MachoArts passionately provides useful articles for Creatives. We share resources for Designers, Photographers & bloggers.

Share button codes of Facebook, Twitter, Delicious, Digg and StumbleUpon

Last day I tried to find codes of sharing buttons for popular social networking and bookmarking sites, but I was unable to find all these codes at one place. I thought it will be good to post all important sharing and voting button codes in one post, here are the share and voting button codes of popular social networking and bookmarking sites like Facebook, Twitter, StumbleUpon, Digg, and Delicious.

Digg Button Code:

Digg is one of the popular social bookmarking sites, may be not these days. But here is the code for Digg button.

<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>
<!-- Medium Button -->
<a class="DiggThisButton DiggMedium"></a>
<!-- Compact Button -->
<a class="DiggThisButton DiggCompact"></a>

StumbleUpon Voting button code:

StumbleUpon is another famous social bookmarking site for getting huge amount of traffic. Here is the StumbleUpon button code:

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

Delicious Save button Code:

Delicious is one of my favorite bookmaking sites for getting traffic. I recommend to use this button on your blog.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://delicious-button.googlecode.com/files/jquery.delicious-button-1.0.min.js"></script>

For wordpress blog use below code with above script:

<a class="delicious-button" href="http://delicious.com/save">
 <!-- {
 url:"<?php the_permalink() ?>"
 ,title:"<?php the_title(); ?>"
 ,button:"wide"
 } -->
 Save on Delicious
</a>

For Blogger.com use below code with above script:

<a class='delicious-button'  href='http://delicious.com/save'>
 &lt;!-- {
 url:"<data:post.url/>"
 ,title:"<data:post.title/>"
 ,button:"wide"
 } --&gt;
 Save on Delicious
</a>

Retweet Button Code:

Now it’s time for Retweet button, I am not a fan of Official Retweet button. Here is the Tweetmeme Retweet button code:

<script type="text/javascript">
tweetmeme_source = 'machoarts';
tweetmeme_style = 'normal';
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Replace ‘machoarts’ with your twitter user-name. If you want compact retweet button, then replace “normal” with “compact”.

Facebook Like button code:

And last here is the Facebook like button code:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0"  allowTransparency="true" style="border:none; overflow:hidden; width:250px; height:40px">
16 comments
muss emma
muss emma

hello there, i wd like to have a html code for facebook share and twitter share on my mobile wapsite. i have tried various codes but they didnt work, possibly they r meant for desktop?

Ashok Sharma
Ashok Sharma

Great post really very helpful for me..

thanks suraj

Leslie Franklin
Leslie Franklin

I was able to add the face book like button on my website but when customers click on it they get some kind of invalid error message, so the button is not functioning properly. There must be something missing in the code.

sriganesh.m
sriganesh.m

Hey its working, but all the button comes in vertical format. how to make them in horizontal

kalaiselvan
kalaiselvan

How can we add our custom images in place of above facebook like?

shawon
shawon

Very Nice ,,,,,,,,,,,,,,,,,,,,,

Most Welcome to Your Help................

Translator
Translator

Nice.. Very helpful.. Raj, your Alexa Rank is Great.. Can you teach how you can? thx

Satish
Satish

Dude where is the code for wordpress facebook widget ? and also delicious is not showing as a normal icon. it just shows save on delicious, thats all. can i get a icon which counts the delicious saves too ?

Neeraj Mishra
Neeraj Mishra

Awesome post it will really help me.........

thanx.......

Daniel
Daniel

How Does we can put a buttom to know how many poeple twitter a determinate page?

Thanksss

Graphics Design
Graphics Design

Well, of course the share buttons appear below the date. They are very clearly positioned right after the date in the code you pasted here. If you want them to appear before the date, then move the AddThis section of code above the date.

suraj
suraj

Leslie, are you using WordPress for your website? above Facebook like code is for Sites which run with WordPress.

suraj
suraj

Hey Sriganesh, I have added compact as well as medium button code for Digg. For StumbleUpon replace ?s=5 with ?s=1

For Tweetmeme replace normal with compact

and for Facebook replace layout=standard with layout=button_count

Suraj (Raj)
Suraj (Raj)

My pleasure Neeraj, thanks for the comment.

Suraj (Raj)
Suraj (Raj)

Hi Daniel, sorry but I can't understand your question, if you want to know who retweeted your post, then just click on the numbers present in tweetmeme button.