A banner type "Recent Reader" and Call for Co-work

At first I am trying to use gadget of Friend Connect, I notice that it was all vertical spread, but sometimes we need a banner type (horizontal spread) gadget, in fact, the first three gadgets is a prototype, if I want to use, I must make customized.

Now I notice that the "recent readers" is most popular gadget as I thought, I have written a banner type recent reader gadget when published, but I don't want to confuse the users, so I didn't publish it.

The URL (URI) of this gadget is "http://login.tw/gfc/recent_banner.xml", it is horizontal spread, so you can use the foot of your website or blog, there is a demonstration in my web, you can check in "BlogLook", or "bloG gOOd reaD", it look like as below illustrated.


At this time, I want to call for "Help" or "Cooperation", Is there anyone want to write such these gadgets for Open Social or Friend Connect, please contact with me, in fact, I am not a good programmer, My specialist is something other in Algorithm or other, I will very thank if you can join this project, you can use gtalk in sidebar, or give me a note.

I am long for your volunteer.

Plans for Login Card (A Friend Connect Gadgets Project)

There are a lots of plan to write gadgets for Friend Connect, in fact, I have written dozens of gadgets for blogger in Chinese, it called "Blog Look".

The plans for new gadgets is focus on Friend Connect, it has some goals:

1. OpenSocial: It must be using OpenSocial API.
2. Useful: It must be useful gadget.
3. Fun: It can add some fun stuff, or game concept.
4. Statics: It record the usage of user, and analytics the behavior.
5. History: User can see the history of the gadget.

Now, we (me and friends) plans 2 system for the gadgets:

1. Auto Recording History: it will record the member usage in this web/blog.
=> You can see who is the #100, #300, #1000 user reading this site today or history.
=> You can see who is the most loyalty reader coming here last for how many days...
=> and so on...

2. Message System: Like old time BBS, there are a note for next user.
=> You can message to next user
=> Member can message to particular user or Owner
=> Owner can mail mailling list to all users
=> and so on...

In fact, there are many ideal can be work out, but I know I still have hundreds gadgets to write in to do list...

Last night, I write a article in Chinese to tell experience of this project so far and more detail about this project, you can use translate program to read "Friend Connect Custom Gadget 經驗?", or wait for me to write more articles here in my bad English.

At last, I thank for Adobe Master mention me in article.

Google Friend Connect Custom Gadget work on IE now....

In fact, there are some changes since yesterday.

1. Before today, IE will halt by Custom Gadget.
2. Each site need to login again independly.

I think the last post "How to use Custom Gadget for Friend Connect" can be expired now.
Thank the Google Friend Connect Teams working hard, and We know there are some bug report that even the offical gadgets failed in IE today, I think it must be side effect while GFC debugging.

Anyway, you can take 3 gadgets freely now, see "Custom Gadgets for Google Friend Connect", if there are any bug, please free to tell me in wall gadget or gtalk session.

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)