A Popular Posts Gadget From Google Friend Connect

While browsing around looking for more Blogger gadgets to add to the directory, I discovered an awesome feature offered by Google Friend Connect: the Recommended (Popular) Posts Gadget.

This is a feature which I'm sure we've all been waiting for! While we have seen various implementations of popular posts gadgets in the past, I've found these are not as useful or easy to configure as I'd prefer.

In contrast, the Friend Connect Recommended Gadget stable, reliable and quickly updates. Being developed and hosted by Google ensures this is unlikely to suffer issues, and once installed it's very easy for your blog readers to recommend their favourite posts.


Want to see how it works? Take a look in the sidebar to see a list of posts recommended by readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of , so feel free to recommend any other posts you may like!).

Those of you reading this in a feed reader may like to pop over to the site to see this gadget in action.

How to install your Friend Connect Popular Posts Gadget

Unfortunately, this Friend Connect gadget is not (yet) installable in one click. There are two elements required for complete installation, and these are relatively easy.

Firstly, log into Friend Connect. You will need to use the same credentials (username and password) as you do when logging in to Blogger.

Once you've logged in, you'll see a page which appears similar to this one:

Any blogs which you have created with your Google account will appear in the list on the left-hand side of the page.

Click on the blog you would like to work with (if this is not already selected). This will open a sub-menu beneath the title of your blog.

Click the "Social Gadgets" link in this sub-menu:

On the following page, scroll down to the "Recommendation" widget - this is the gadget we will be using to display our blog's most popular posts, as voted by blog members:

Click through to create and style the Recommendation gadget for your blog.

Style the Recommendation List

In the first area of this page, you can choose how your recommendation list will be styled when added to your Blogger layout.

If you'd prefer any of the color elements (such as the background and border) to be transparent, simply delete the hex value.

You'll be able to preview the changes made to the style and settings of your recommendation list in the top right corner of the page.

Configure the Voting Buttons

The second area of this page enables you to configure the appearance of the voting button. This is what will appear on the post pages of your blog, and is what your readers will click to recommend posts they enjoy.

There are two distinct types of voting buttons you could choose from:

A "compact" button appears like this
A "modular" button appears like this:

For either style of button, you can choose between the heart or tick icons. When choosing the "modular" button, the colours of the text, border and background may also be altered:

Generate and add the JavaScript for your Gadget

Once you've configured the appearance you prefer for the recommendation list and voting button, you can generate the codes required to add these to your template by clicking the button in the third section of the page:

This will generate two different sets of code - one for the recommendation list, and another for the voting button.

Add the code for the Recommendation List

The easiest way to include the Recommendation List (the list of your most popular posts) in your blog is to paste the code into an HTML/JavaScript widget in your Blogger sidebar.

Simply highlight all of the code in the "aggregation gadget" section, and copy to your clipboard. Then go to Layout>Page Elements in your Blogger dashboard, create a new HTML/JavaScript widget in the area of your choice and paste the code from your clipboard into the content section of your gadget.

Add the code for your voting button on post pages

Ideally, we should add the voting button to appear only on item pages. This ensures there is no conflict when posting multiple buttons on the same page (for example, the blog home page which displays more than one post); it also makes for simpler installation.

To add the voting button to our item pages, we need to edit our Blogger template code.

Go to Layout>Edit HTML in your Blogger dashboard, and ensure you have checked the "Expand widget templates" box.

Then using your browser's search function, locate the line which contains <data:post.body/&gt;

This section of code may be wrapped in <div> or <p> tags depending on the template you are using.

Immediately after this line, paste the following section of code:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>

Next, copy the second section of code generated for your Friend Connect Recommendation widget:

And paste this between the &ltb:if cond...> and </b:if> tags which we previously added in the template code.

Here is how the completed installation should appear:

<b:if cond = 'data:blog.pageType == &quot;item&quot;'>

<!-- 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-1020104213976883876" 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'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
 { id: 'div-1020104213976883876',
   url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
   height: 21,
   site: '06135972569882299778',
   'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
 },
  skin);
</script>

</b:if>

Once you've pasted the script, preview the changes you have made to ensure the button does not appear on your blog's home page. If all looks well and no errors are reported, continue to save your template and complete the installation.

Using your Recommendation Gadget

At first, your recommendation list will not display any posts. This is because no posts have yet been voted for using the voting button.

You could vote for a few posts yourself by clicking on the voting button on post pages, or you could simply wait for readers to vote by themselves.

When using the voting link, a pop-up page will appear prompting the user to log into Friend Connect (if they are not already logged in) and afterwards will be able to recommend the post. Votes are counted almost immediately, and are listed beneath each item in the Recommendation List:

What do you think?

I sincerely prefer the Friend Connect Recommendation Gadget to other "popular posts" widgets I have tried as the results are based on reder engagement and genuine recommendations which offer a greater sense of community than "page views" alone.

My only reservation is that this gadget cannot be added in a few simple clicks. Having to edit our Blogger templates to add the voting buttons id a dissuading factor for many when considering whether or not to install it.

That said, I have a good feeling that this gadget may soon be integrated into the Blogger system, as so many Friend Connect gadgets and features already have!

What do you think of the Friend Connect Recommendation gadget? Is installation too complex, or are you happy to use this gadget for readers to recommend their favourite posts?

Please let us know your opinions by leaving your comments below.

Image credit: RichKidsUnite, via Flickr Creative Commons