Google Friend Connect Recommedations Gadget For Blogger

Google Friend has brought with it a great of set of widgets to interact with your followers as well as get feedback from them. The recommendations gadget is one gadget to get feedback from followers much like ‘reactions’ in blogger and others like ‘thumbs up’. Followers can recommend posts they like by clicking on the recommend it button as shown below:

The Best feature of this gadget is that you get a widget to display the most recommended posts. Here is a demo of the gadget. This widget can be added easily to any website.

Here is a tutorial to add this gadget to blogger blogs:

1. Sign in Google Friend Connect
2. Select a Blog and then click on Social Gadgets
3. Now select the Recommendation Widget.
4. Customize the design of the widget
5. Click on generate code.

After clicking on this button, the site will generate two codes

6. Adding the Recommended Posts Widget

Example code:

<!– 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-Site specific code” 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′;
skin['HEADER_TEXT'] = ‘Recommended stories’;
skin['RECOMMENDATIONS_PER_PAGE'] = ’5′;
google.friendconnect.container.setParentUrl(‘/’ /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: ‘div-site specific code’,
url:’http://www.google.com/friendconnect/gadgets/recommended_pages.xml’,
site: ‘Your Site Id’,
‘view-params’:{“docId”:”recommendedPages”}
},
skin);
</script>

a. Copy the code from the site and then go to layout>Page Elements
b. Click on add Gadget

c. Then select HTML/JAVASCRIPT

d. Paste the code here and save.

7. Adding the Recommend Button

Example code:

<!– 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-site specific data” 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-site specific data’,
url:’http://www.google.com/friendconnect/gadgets/recommended_pages.xml’,
height: 21,
site: ‘Your site Id’,
‘view-params’:{“pageUrl”:location.href,”pageTitle”:(document.title ? document.title : location.href),”docId”:”recommendedPages”}
},
skin);
</script>

a.copy the code from the site
b. Go to layout>Edit Html
c. Download the template (For Backup purposes)
d. Search for the following code

<data:post.body/>

e. just below the code above paste the code copied and save the template.

And now you’re widget is live!