Loading...In the previous post, I had discussed about hosting the XML file in Google Groups containing the analytics data from Google Analytics for Popular Posts widget. Now we’ll need to use Yahoo Pipes and some Javascript codes.
You are going to require a feed URL for your Google Groups. To subscribe to the XML feed of your Google Group or just get the feed URL, click on the XML button which is located at the lower part of your Google Groups page. Click on “15 New Messages” under RSS 2.0 or just copy its link.
Now fire up Yahoo Pipes. You’ll need to create a pipe that will collect the data from the XML feed for displaying information on your popular posts widget. It will actually take the most recent Google Groups XML feed and terminate the rest, filter out the links that aren’t to be included and and lets the visitor land on the post page. Or you can simply clone this pipe. Now enter the feed URL that you just copied from your Google Groups into in the Fetch Feed box. Now, you’ll see a filter in the central part of your pipe. You’ll need to enter the constraints for showing the required posts in your Popular posts widget. In this pipe, it is according to the date permalink model. In the loop box in the upper right part of the pipe, enter your website URL in the string builder so that when anyone clicks on any link on the popular posts widget, he/she can land on the exact page.
Now you should insert some Javascript codes in your blogto display the widget on your site based on the data given by Yahoo Pipes. Well this is the code:
<div id=”popularPosts”>Loading…</div> <script type=”text/javascript”><!– function topcontentCallback(obj) { var url, title, output, i; i = 0; output = ‘<ul>’; while (i < 5 || i < obj.count) { url = “http://www.yoursite.com” + obj.value.items[i].Key; title = obj.value.items[i].loopfetchpage[0].content; // remove the <title> tags the pipe leaves in: title = title.substring(27, title.length-8); output += ‘<li><a href=”‘ + url + ‘” title=”‘ + title + ‘”>’ + title + ‘</a></li>’; i++; } output += ‘</ul>’; document.getElementById(“popularPosts”).innerHTML = output; } //–> </script> <script type=”text/javascript” src=”http://pipes.yahoo.com/pipes/pipe.run?_id= XXXXXX&_render=json&_callback=
topcontentCallback”></script>
Replace XXXXXX above with the id of your pipe. You can insert this code in a widget(html/javascript) or directly in the template. So, you can easily display your popular post widget based on the most traffic generating posts on your blog as shown by Google Analytics.