Widgets for Most Popular Articles on Twitter, Digg, Delicious, Propeller, and Reddit

One of the most appealing elements on a webpage are "popular posts". There are several possibilities to get popular posts, e.g. by number of comments or visitor statistics. In this post I present 5 widgets that display your highest voted posts from social websites. These widgets can serve to increase visitor involvement and as navigational element. Some of these widgets display a vote or bookmark button and can help you to attract more visitors by social recommendations.

I thought why not install a widget that displays popularity in terms of votes, motivates people to vote, and thereby attract more visitors, while at the same time serving as navigational elements.

I was searching several of the most popular social websites to find possibilities to get such widgets. I found such widgets for Twitter, Digg, Reddit, Delicious, and Propeller.

Here you find demos: Twitter Demo, Digg Demo, Reddit Demo, Delicious Demo, Propeller Demo

For each widget I will show a javascript code which you can simply copy and paste with very few changes that I indicate. You can do so without any knowledge of HTML or javascript. In blogger you can create a new HTML widget in layout, paste the code, and there you go with a new widget.

Digg - Most Dugg

<script type="text/javascript">
digg_id = 'digg-widget-container'; //make this id unique for each widget you put on a single page.
digg_title = 'title';
</script>
<script type="text/javascript" src="http://digg.com/tools/widgetjs"></script>
<script type="text/javascript" src="http://digg.com/tools/services?type=javascript&amp;callback=diggwb&amp;endPoint=%2Fuser%2Fusername%2Fsubmissions&amp;count=5&sort=digg_count-desc"></script>

Change username for your digg user name and title for the title you want to see displayed in the widget. You can change the number of posts displayed by changing 5 to any other number.

Reddit Most Popular

<script src="http://es.reddit.com/user/username/submitted.embed?limit=5&sort=hot" type="text/javascript"></script>

Change username for your reddit account name. You can change the number of posts displayed by changing 5 to any other number.

Propeller Most Popular

For this widget I had to create a yahoo pipe.
<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ul>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ul>");
}
</script>
<script src= "http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&
_id=6e954c49f0ea1f933e9faf78321799a1&userid=username&num=5" type="text/javascript"></script>


Again you should put in your username, this time at propeller, and you can change the number of posts displayed.

Delicious Recent Bookmarks

Delicious provides a linkroll, which sorts your bookmarks alphabetically or by date.
<script type="text/javascript" src="http://feeds.delicious.com/v2/js/username?title=Most Popular on Delicious&icon=m&count=5&sort=date&tags&extended&name&showadd"></script>


Put in your username and there you see it on your blog.

Twitter - Most Tweeted Posts

This is the longest code, fear not. At the end are the options you'll have to change, indicated in bold.

<style type="text/css">
/* ul list */
ul.pot{
padding:0;
margin:0;
}
ul.pot li{
border-bottom:silver 1px solid;
float:left;
margin:1px 0 1px 0;
padding:2px;
list-style-type:none;
/* height:50px; */
width:100%;
overflow:hidden;
}
/* link span */
ul.pot span.pot-url{
display:block;
font-weight:bold;
}
ul.pot span.pot-url a{
text-decoration:none;
}
ul.pot span.pot-url a:hover{
text-decoration:underline;
}

/* tweet content */
ul.pot span.pot-tweet{
color:#333
}

/* link meta : tweets, score,.. line */
ul.pot span.pot-meta {
color:#006699;
display:block;
font-size:90%;
margin:3px 0 0;
}
ul.pot span.pot-meta a{
color:#006699;
text-decoration:none;
}
ul.pot span.pot-meta a:hover{
text-decoration:underline;
}
/* tweeter username span */
ul.pot span.pot-tweeter{
padding:0 2px;
}
/* tweets count span */
ul.pot span.pot-tweets{
padding:0 2px;
}
/* score span */
ul.pot span.pot-score{
padding:0 2px;
}

/* customize @user links */
ul.pot a.pot-at { }
/* customize #hashtags links */
ul.pot a.pot-hashtag { }
</style>
<!-- required CSS :END -->

<!-- required javascript :include once -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://popular-on-twitter.googlecode.com/files/jquery.popular-on-twitter-1.0.min.js" type="text/javascript"></script>
<!-- required javascript :END -->

<!-- required HTML -->
<div class="popular-on-twitter" options="{
site:'blogurl'
,show_n:0
,n:5
,animate:'height'
,tweeter_text:''
,show_tweet:1
}">loading..</div>
<!-- required HTML :END -->

Here you should change blogurl to your websites web address without the http://www. part (e.g. myoutsourcedbrain.com). The parameter n indicates the number of posts you want to have displayed (here 5).

See the widget's google code project page for an explanation of more options.

Credit for this widget goes to Moretechtips, where the widget was shown in the post Popular-on-Twitter Widget: Topsy-enabled jQuery Plugin.

Enjoy. Please leave a comment below for questions and suggestions.