Tutorial: Beautiful big Social Bookmarking buttons

I got a question from Gabstero

Hi!

Quick question:

What plugin are you using for those beautiful big Social Bookmarking buttons at the bottom of your Indomagz worpress page? (Stumble, Delicious, Technorati, etc)

I like the fact that they are big as opposed to the other tiny ones you find on the web.

Thanks!
Gabi.

I don’t use any Wordpress plugins for this. If i can do it without a plugin, then i’ll not use any plugin.

This is a short tutorial for you, with detail instruction, for both Wordpress and Blogger

Wordpress

First, you have to download the images and upload them to the /images folder in your current theme.

  Beautiful Big Social Bookmarking Buttons (28.3 KiB, 224 hits)

Edit your theme files, single.php and/or page.php and/or index.php . Copy and paste the code below after <?php the_content('Read more &raquo;'); ?>

<div style="clear:both; ">
<div style="width:60px; float:left;">
<script type="text/javascript">
digg_url = '<?php the_permalink() ?>';
</script>
<script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
</div>
<div style="width:60px; float:left;">
<script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><?php the_permalink() ?></script>
</div>
<div style="width:65px; float:left;">
<a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>stumble.gif" style="padding:0;margin:0;border:none;" alt="Stumble" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://del.icio.us/post?url=<?php the_permalink() ?>&amp;title=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>delicious.gif" style="padding:0;margin:0;border:none;" alt="Delicious" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://technorati.com/faves?add=<?php the_permalink() ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>technorati.gif" style="padding:0;margin:0;border:none;" alt="Technorati" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://twitthis.com/twit?url=<?php the_permalink() ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>twitter.gif" style="padding:0;margin:0;border:none;" alt="Twitter" /></a>
</div>
<div style="width:65px; float:left;">
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&amp;t=<?php the_title(); ?>" target="_blank" rel="external nofollow"><img src="<?php echo bloginfo(stylesheet_directory) .'/images/'; ?>facebook.gif" style="padding:0;margin:0;border:none;" alt="Facebook" /></a>
</div>
</div>

Blogger

Go to Layout - Edit HTML, don’t forget to check “Expand Widget Templates”. Copy & paste the code below after <data:post.body/>

<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/stumble.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/delicious.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/technorati.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/twitter.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://s310.photobucket.com/albums/kk426/magznetwork/socialbig/facebook.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>

SUPPORT & DISCUSSION

Go to MagzNetwork Support

Disclaimer

We provide free wordpress themes and blogger templates and we thus release it "as is". We will not be offering any support to users of these wordpress themes and blogger templates. So e-mails and comments requesting support will be ignored completely (comments will be deleted).

Donate & Become VIP Members

You will get our special blog designs, tutorials, and supports.

Learn More!