Configure Google Friend connect Recommendation gadget for Blogger

Do you like this story?      

Google Friend connect ‘s recommendation gadget can be added to blogger blogs, since all the blogger blogs are setup with Friend connect.
The “Recommend it” button needs to be present for each blog post, and the Aggregation gadget will be only one for the whole blog.

GFC Recommendation gadget

Installing the Aggregation gadget is easier. But, how to add the “Recommend it” button for all the posts?
Copy the code provided under “Add this to the pages where you’d like a button to appear:” from Google Friend Connect .
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:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'default';
google.friendconnect.container.setParentUrl('/'
/* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-XXXXXXXXXXXXXXX',
   url:
'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
   height: 21,
   site: 'XXXXXXXXXXXXXXXXXXX',
   'view-params':{"pageUrl":location.href,
"pageTitle":(document.title ? document.title
: location.href),
"docId":"recommendedPages"}
 },
  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:100%;">
</div>

<div expr:id='data:post.id' style='width:100%;'/>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'default';
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://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21, site: 'XXXXXXXXXXXXXXXXXXX',
'view-params':{
"pageUrl":location.href,
"pageTitle":(document.title ? document.title : location.href),


'pageUrl':'<data:post.url/>',
'pageTitle':'<data:post.title/>',

"docId":"recommendedPages"} }, 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.

Any queries, feedback, comment here.

  • yashmistrey

    But i didn't find post comment !

    Dear Karthik, Could you edit my template post like this
    http://blog.tenkely.net/
    I only want to give a touch to my post like this post
    reaction + comment + Recommend it
    i'll email you my template If you could do it in my template theme !
    Please …

    With Regards
    Yash

  • http://carlbobby-cali.blogspot.com Cbayeron09

    This is great

  • Cbayeron09

    I have difficulty to copy the ads generated code to my site or my blog,can somebody help
    Thanks

    • http://blog.xmlgadgets.com Karthik

      Adsense ads?