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:

google friend connect recommendation it button, Google Friend Connect Recommedations Gadget For Blogger

Recommend It Button

google friend connect recommendation widget, Google Friend Connect Recommedations Gadget For Blogger

Recommended Posts Widget

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

Sidebar add gadget, Google Friend Connect Recommedations Gadget For Blogger

c. Then select HTML/JAVASCRIPT

HTML JAVASCRIPT, Google Friend Connect Recommedations Gadget For Blogger

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!

  • Charlotte

    Thank you very much for posting these instructions. It saved me a bunch of time!

  • csie-tw

    good job!

  • Dee

    Google Friend Connect is a good tool. Great advice, thanks for posting!

    Recent blog:=- Links for 2009-10-17 [Digg]

  • antonio

    I have an issue, I use multiple posts in the same home, how do I avoid getting the home page to be "suggested" for the view while clicking on a post that is displayed on it?

    Thanks

  • gautam

    i think you might have to code for that, so you might some stuff and code to your specific needs

  • http://gossipblower.com gadgets

    Always top notch articles. I dont know how you do it but its always as good as expected, I am really a fan of your blog…

  • http://choosyinfo.com Ruchi

    I have not tried it yet, but i will bookmark it and will install google friend connect soon.
    .-= Ruchi´s last blog ..Site Performance Feature added in Google Webmasters Labs =-.

    • http://www.bloggodown.com Gautam

      It is a must have for blogs, because of most of the readers use blogger and prefer subscribing to the feed by google friend connect

  • rndtechnologies786

    Good thought.