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 Blogger Buster readers, and scroll down to the bottom of this post for the button you can use to vote (this appears on every page of Blogger Buster, 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: |  |
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:
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/>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 == "item"'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>
<b: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 == "item"'> <!-- 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>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
No comments:
Post a Comment