Login Card: Your Login tw Internet World (A Real Opensocial Gadget)

This project was started from last Thursday, and I took 4 days to determine the name of the project, It called "Login Card: Your Login tw Internet World", using the "login.tw" domain.

In spite of "Login.tw" is a project call "勇者登入卡: 你的網路第一人生", means "Brave Login Card: Your First Network Life", because this is a real life game using user's network usage profile, but the project was halt cause all of co-worker are busy including me.

It was a project for Yahoo Open Hack Day at first, but it wasn't won because it was not done in that day, but we hope this project can be go further.

After Google announce the "Friend Connect", I feel it will be a new start of "login.tw", so I took 3 days to thinking "How to write a real Friend Connect/OpenSocial Gadget"...

And you can check about last 2 post about what are these gadgets for, and I thank "Epeus" that he is using our gadget already even we are not ready, but after the link problem solved and avoid error for Internet Explorer, I think the first 3 gadget can be announce launch, and we must start to work on official site and what we really want to do. These 3 gadgets are just a test, not a real work even it will work now.

I wonder is there any one can write an illustration "how to using these gadgets" for me?

How to use Custom Gadget for Friend Connect

I think there are lots of people meet this problem, that the custom gadget for friend connect can cause error in IE 6 and IE 7, in spite the Microsoft provide 2 solutions, but these all need user to do something, ..

1. Adjust Security Level
2. Upgrade to IE8

I take a look, it need to be fix a lots in friendconnect.js or SocialNorms.js, so it can't be done in each custom gadget, so I use a method to judge which browser user using, if user use IE 6, IE 7, so disable this gadget.

As we know, we goes to "Friend Connect" to add site and gadget, and when we add a custom gadget, we input the url of the module, like "http://login.tw/gfc/recent.xml", we will get a generated code as follow:

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>

<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229147868491" style="width:200px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser != "Microsoft Internet Explorer" || version > 7) {
var skin = {};
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1229147868491',
url:'http://login.tw/gfc/recent.xml',
site: '00249003971097702571'},
skin);
}
</script>

The green code mean the option you input, the blue code is the system provide differ by each site and gadget, the red code is what we need to insert manually, ...

So you can use your google module or any custom gadget with your site/blog.

Sorry for Custom Google Friend Connect Gadget

One of my friends tell me that there is a problem while using IE to read the gadgets, cause I am using Mac to develop, so I didn't notice that.

"OpenSocial 客製小工具 Custom Gadget" said that it is a common problem for all custom gadget for google friend connect, and this is an known issue, so please don't use these custom gadgets or you really deny users using IE (like me).

I will try to fix this problem but I don't know how to fix it, but you can using fixing "Security Restricted Sites" like "Fix: IE7 with Sitemeter: Operation aborted", but this is not a really good ideal.

There are two ways to escape this problem, one is denying all visitor using IE, like:

var b =navigator.appName;
if (b == "Microsoft Internet Explorer") exit;

but it is still not a good way, another one is try to fix the problem, cause it is caused by "innerHTML or appendChild", not by XSS as I guess, ...

Thanks for Mr Stack(?) from keusta.net encourage me a lot, and hope I can write "How-To", I think this is a good ideal, but as a matter of fact, I am not a good author to writing instruction, but I will try my best.

I hope I can deal this problem tonight, otherwise, it will fixed in next week, cause my schedule is full by my family.

Oh, there is another issue about link, all of the link is not available, cause the Google Friend Connect does not provide this data, I think it will be available later or I will try to find other data to replace.

PS. After 3 hours, I add a escape condition while user use IE 6 or IE 7, you can add

var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser != "Microsoft Internet Explorer" || version > 7) {

before "var skin = {};" and place a "}" after "skin);", and it will preven IE 6 or IE 7 user goes to die...

Custom Gadgets for Google Friend Connect

I think there must be lots of people find Google Friend Connect is very fun, I do~~~

Because my bad personality, I try to write some statics gadgets base on Google Friend Connect, especial for it's "Community Base", that is, you can statics by members, not for all.

This is my first time to write such gadget, so I learn from the Demo "Lame Game".

I wrote 3 gadgets tonight:

1. Time Elapse:
http://login.tw/gfc/time.xml

2. Recently Reader:
http://login.tw/gfc/recent.xml

3. Hits Ladder:
http://login.tw/gfc/hits.xml

All you need to do is go to your Google Friend Page, you can see "Social Gadget" in your each sites/blogs, there will be a "Custom Gadget", while you click in, you can see there is a textarea for "Gadget URL", if you want to know the Hits Ladder of your member, just input "http://login.tw/gfc/hits.xml".

you can see the illustration above, but I use "Time Elapse", so it is "time.xml"



I want to write some fun gadgets, and those are under development, but I think these 3 gadgets will work fine and you can have fun with them.

(You can see Illustrate on my blog: http://gene-hong.blogspot.com/, I put all of them in sidebar)

Database Upgrade

I think there must be some users notice that since 06/16 that there is sometime out of service, cause I upgraded the database.

There was a lot of trouble during upgrading, but I fix most of situation last night, so the system will operate normally from then.

I know there are many function can be upgrade, but I don't know how much time that I can do, so if there is anyone interesting this system, and you can help me make this better, you can tell me freely, I need all kinds of help beside coding~~~

Anyway, I make my apologize the system down without announce in advanced, cause the system is almost overload, and I make most of effort to fix the problem, thank you all folks.

Yours MyMiniCity -- How to read City detail (I)

I know I am a numeric maniac, I keep track many statics fro MyMiniCity, Let see the detail of a city.

First of all, you can see the red words:
Add This City To My ListThe red icon provide you set this city to your list, so that you can see the list of your watch in MyList, so if you want to keep track of this city, just press it!

and following line is
This city is in Taiwan, the data is 8 minuite(s) ago
It is easy to see which country/region the city locate. The system fetch the latest data for interval, the interval according to the size of your city and latest increasing of the city, it might be in 5 to 50 mins.

Next is a huge table:

BlogLook XML RSS		Ranking	Now: 2	Today: 2	Yesterday: 3
Items	This Hour	Last Hour	Today	Yesterday	Total
Population	54	252	1270	1949	48511
Incomes	8100	37800	307800	461150	12603950
Construct	0	0	588	2519	52058
Commerce	0	--	2	2	3847
Enviorment	0	--	1	6	10780
Industry	0	--	466	672	15154
Security	0	--	1	1289	12562
Traffic	0	--	118	550	9715
Unemployment Now		0		848 (49359)
Transport Now		100		164 (48675)
Criminality Now		0		2037 (50548)
Pollution Now		0		600

I think most of data is easy to understand, but I must explain four numbers I mark as red and green. The red number mean if you don't increase your improvement, how many people you can capacity or how many people you can increase. In this example, the city can increase more 848 peoples to keep unemployment zero, and transport can support upto 48675 peoples. The green number is how many industries you can improve, but this is just an approximate number, cause it will depend on your population and commerce later.

The next line is:
Set My Primary
It will be use for exchange link, cause the city will count your hits for your primary city, so if you hits other city more, your primary city will get the higher rank of the exchange link.

See Neighbor City
The data from neighbor city depend from all the user watch list, this is a relational analysis algorithm, but if your friend use the system more, the data will be more correct.

Yours MyMiniCity -- Dynamic Signature

I found there are many user in http://createmycity.xooit.com/, and this is a forum for MyMiniCity, but it can only use images for signature.

So I create three type of dynamic signature for myminicity.

1. Line Graphic:

The line graphic drawing everyday progress, population and construction, the blue line is population, the yellow line is construction.

The construction means total of 5 improvement, Commerce, Environment, Industry, Security and Traffic, cause if we use 5 lines to draw, I think there will be too noisy.

The usage is like http://mmc.urs.tw/images/days.php?mmc=yourcityurl

2. Recent Detail:

It's a table present this hour, last hour, today and yesterday population added, and improvement added, and last column is status now.

The graphic cached for 5 minutes, and expire 5 minutes, so it may be 10 minutes ago data.

The usage is like http://mmc.urs.tw/images/table.php?mmc=yourcityurl

3. Week Progress Table:

It show only population and rank for recent 7 days and now. The title show the status of Unemployment, Transportation, Criminality and Pollution, if the number is 0 or 100, the color of number is blue, otherwise is red, and the Trans use "-0" for 100.

The usage is like http://mmc.urs.tw/images/week.php?mmc=yourcityurl

I hope these images can be useful for you, I will make some images for vertical in sidebar, not only in signature.