Adding share buttons to your blog or website - a comprehensive guide

icon

A lot has happened in the field of share buttons in the past year: Google +1 button for web pages was introduced, Facebook started to migrate the Share and Like buttons, TweetMeme button is slowly getting replaced by the offical Tweet button, etc. Enough to make maintenance of these buttons a pain in the ass. But since social activity is getting more and more important for SEO, this needs to be done, one way or another. To make it easier, I've put together a comprehensive list of different share widgets, together with some explanation, sample code and direct links to full documentation.

Keep it simple: Use basic links

Most social services support direct linking to share forms, which can be populated using a proper request. This means the URL of the target content (and sometimes title) must be passed in the query string (e.g. "?url=http://stritar.net"). In case you require a simple solution that doesn't require a lot of space, or you would like to style your share buttons on your own, this could be what you're looking for.

Facebook: http://facebook.com/sharer.php?u=<%=contentUrl%>
Twitter: http://twitter.com/?status=<%=contentTitle%> <%=contentUrl%>
Reddit: http://reddit.com/submit?url=<%=contentUrl%>&title=<%=contentTitle%>
Digg: http://digg.com/submit?url=<%=contentUrl%>
Delicious: http://delicious.com/post?url=<%=contentUrl%>&title=<%=contentTitle%>
StumbleUpon: http://stumbleupon.com/submit?url=<%=contentUrl%>&title=<%=contentTitle%>
 

Keep it simpler: Use AddThis

If you're not a demanding users and you're OK with a plain solution, the service AddThis may be just what you need. Set the parameters and you're good to go, and the number of supported services is really huge (and you also get the Print button).

<div class="addthis_toolbox addthis_default_style">
<a class="addthis_button_facebook_like" addthis:url="<%=contentUrl%>"></a>
<a class="addthis_button_tweet" addthis:url="<%=contentUrl%>"></a>
<a class="addthis_counter addthis_pill_style" addthis:url="<%=contentUrl%>"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script>

Result:

Possible modifications: too many to mention

More info: http://www.addthis.com/
 

Facebook

So, you'll rather go for the real thing? Let's begin with Facebook. If you're trying to get the code for the Like button and it says you have to be a registered developer, don't worry, just logout and everything will be great. After that you will be offered with two sets of code, both of them work. I used the second one, which also support "Send to".

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="<%=contentUrl%>" send="false" layout="button_count" width="130" show_faces="false" action="like" font=""></fb:like>

Result:

Possible modifications: layout (standard, button_count, box_count), colorscheme (light, dark), action (like, recommend), show_faces, font, width, send (add send button), etc.

More info: http://developers.facebook.com/docs/reference/plugins/like/
 

Twitter

Since Twitter introduced the new Tweet button, the original TweetMeme button started to behave strangely (sometimes it doesn't count tweets correctly). On the other hand, the official Tweet button doesn't count the tweets for older posts, so all your viral posts from the past will show 0 tweets (and I was so proud one of my posts got more than 100 retweets!). Your choice, I've decided to go for the new one.

<a href="http://twitter.com/share" class="twitter-share-button" data-url="<%=contentUrl%>" data-count="horizontal">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

Result:

TweetMeme:

Possible modifications: data-count (vertical, horizontal, none), which modifies the layout. You can also set the default text and specify @via, etc.

More info: http://twitter.com/goodies/tweetbutton
 

Reddit

Reddit is a great community that can get you quite a bit of traffic if your topic is more on the geeky side.

<script type="text/javascript">
reddit_url='<%=contentUrl%>';
</script>
<script type="text/javascript" src="http://reddit.com/static/button/button1.js"></script>

Result:

Possible modifications: tens of different layouts

More info: http://www.reddit.com/buttons/
 

Digg

Since Digg's last upgrade, I haven't been seeing any traffic from it, but it's nice to dream about the old times. Not working properly on FF2.

<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggCompact" href="http://digg.com/submit?url=<%=contentUrl%>"></a>

Result:

Possible modifications: class (DiggWide, DiggMedium, DiggCompact, DiggIcon), which modifies the layout.

More info: http://about.digg.com/downloads/button/smart
 

Delicious

We'll probably be seing a new version of Delicious button soon, but for now, you can either put a simple link without the count to your blog or some hacking is required. You practically have to make your own button that retrieves the data from Delicious and puts it into correct HTML tags. For advanced users only.

<span id="deliciouscount" style="font-size: 12px; font-weight: bold;"></span>
<a id="deliciouslink" style="font-size: 12px; font-weight: bold; text-decoration: none;" target="_blank" title="View details"></a>
<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (urlinfo == null) {
document.getElementById('deliciouscount').innerHTML = "Bookmarks: 0";
return;
}
else {
document.getElementById('deliciouslink').innerHTML = "Bookmarks: " + urlinfo.total_posts;
document.getElementById('deliciouslink').href = 'http://delicious.com/url/' + urlinfo.hash;
}
}
</script>
<script src="http://badges.del.icio.us/feeds/json/url/data?url=<%=contentUrl%>&amp;callback=displayURL" ></script>

Result:

Possible modifications: the world is not enough

More info: contact me


 

StumbleUpon

I'm not sure if I'm using StumbleUpon properly, but I haven't managed to get a single stumble since I started blogging, so I temporarily removed it from my blog (due to lack of space).

<script src="http://www.stumbleupon.com/hostedbadge.php?s=2&r=<%=contentUrl%>"></script>
 

Result:

Possible modifications: many different layouts

More info: http://www.stumbleupon.com/badges/
 

Google +1

It's too soon to say if +1 button will be a game changer, or it's just too lame, too late, like other Google's social services. We'll see. Not working properly on FF2, FF3.5 and IE7.

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="medium" href="<%=contentUrl%>"></g:plusone>

Result:

Possible modifications: size (small, standard, medium, tall)

More info: http://www.google.com/webmasters/+1/button/index.html
 

LinkedIn (Update 28.11.2011)

LinkedIn may not be your dynamic social platform, but perhaps you may still find use for it.

<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share" data-url="<%=contentUrl%>" data-counter="right"></script>

Result:

Possible modifications: layour (vertical, horizontal, nocount)

More info: https://developer.linkedin.com/plugins/share-button
 

Special: Like Facebook page and follow on Twitter

If you have a Facebook page, all you need to do is point the Like button to the URL of the page, and people will automatically become "fans". Similarly, you can implement the new Twitter Follow button and hopefully get new followers.

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like href="http://facebook.com/neolab.si" send="false" layout="button_count" width="130" show_faces="false" action="likel" font=""></fb:like>

<a href="http://twitter.com/gstritar" class="twitter-follow-button" data-show-count="false" >Follow @gstritar</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>


 

Other platforms

All of these buttons can be modified to some extent, and most of them will work without the specified URL. But you'll probably need to set it anyways so they will also work on your homepage with many posts.

The cases presented were made for asp.net, but they can be modified for other platforms such as WordPress or Blogger by replacing the <%=contentUrl%> with something like <?php the_permalink() ?> or data:post.url (sorry, no experience). But if you managed to get the Facebook Like button to work, you will surely be able to modify others too.

There you go, time to share.

Like what you read? Now tell the world!

A few more things you might find interesting:


Comment
written 6.6.2011 13:05 CET on chronolog
2851 views   •   4 likes   •   2 comments  •   Like   •   
Hi Nick, thanks for the comment. All-in-one solutions are great, but sometimes you want to position the buttons in a special way, that's when you have to go for the custom build. But for casual users, I would suggest using the simple approach. I think the biggest issue around these widgets is not how to do it technically, but which communities and services to use.
commented 24.6.2011 15:13 CET by Stritar
good stuff, Stritar what about something really really simple, like this all-in-one solution?: http://wordpress.org/extend/plugins/digg-digg/faq/... Any drawbacks?
commented 24.6.2011 10:47 CET by Nick Taylor
date
date
date
date

Connect with :