Configure Google Friend connect Recommendation gadget for Blogger
| Read next Mobile templates for Blogger websites | x |
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.
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.