Who likes this – Google Friend Connect gadget

Do you like this story?      

This gadget gives the option for users to like the page /post. In addition to that it shows the list of members who already liked the page, and also the other pages the same members have liked. Thus it gives a set of recommended pages to the reader from other readers who found them interesting.

If you do not have Google Friend Connect, please get it.

All blogger blogs are already set up with Google Friend connect.This gadget needs to be set up for each webpage/blog post of the site.

I will first explain how to add this gadget for non-blogger website and then for Blogger blogs.
Non-Blogger websites
1. Login to Google Friend connect, and select the site you want to add the gadget to.

2. Click on “Gadgets”

3. Click “Add Gadget by URL” link at the bottom.

4. Give the gadget url as http://xmlgadgets.com/ig/who-likes.xml

Add Gadget by URL

5. Customize the gadget

Page Title and Page URL need to be provided properly for each page of your website.

Customize the Gadget

6. Click on Generate Code



7. Copy the code and past in your web page


If you need multiple instances of gadget in the same webpage, give different div id’s in the code


Configuring the gadget for Blogger:
1. Follow the same process given above, but give Page Title as  and Page URL as 

Configuration for Blogger



2. Generate the code, it will look like

<!-- 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-XXXXXXXXXXXXXXX"
style="width:300px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
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-XXXXXXXXXXXXXXX',
   url:'http://xmlgadgets.com/ig/who-likes.xml',
   site: '18370910113884099612',
   'prefs':{"pageTitle":"<data:post.title/>",
"pageUrl":"<data:post.url/>","maxMembers":"2",
"imagewidth":"25"}
 },
  skin);
</script>

Some changes need to be done to the above code, for it to function in Blogger. See the below snippet, the red portions of the text are the ones you need to remove, and the green ones to be added


<!-- 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-XXXXXXXXXXXXXXX"
 style="width:300px;border:1px solid #cccccc;" ></div>
<div expr:id='data:post.id'
 style="width:300px;border:1px solid #cccccc;" />
<!-- Render the gadget into a div. -->
<script type="text/javascript">
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-XXXXXXXXXXXXXXX' ,
    id: '<data:post.id/>',
   url:'http://xmlgadgets.com/ig/who-likes.xml',
   site: '18370910113884099612',
   'prefs':{"pageTitle":"<data:post.title/>",
"pageUrl":"<data:post.url/>","maxMembers":"2",
"imagewidth":"25"}
 },
  skin);
</script>

This code snippet has to be added to the Blogger template.
How to do it?
1. Goto Blogger dashboard of your blog.
2. Goto Layout tab, click “Edit Html”
3. Check the “Expand Widget Templates” checkbox
4. Locate
<div class=’post-footer’>
in the template.
5. Just below it, paste the code snippet, and save the template.

But, please do not use Recommendation gadget along with this gadget in Blogger, because only one of these will function properly (since we use Post-id as the div id for these gadgets).Any queries, feedback, comment here.