Many blog owners thrive on having their content submitted to sites like Digg, Mixx, Stumbleupon, Delicious and the like. The massive wave of traffic not only brings fresh visitors to your blog, it gives you the chance to syndicate your content across the internet, giving your website a much needed boost.
A big number of blogs will be running on either Wordpress or Blogger software/hosted solutions, many of these will have some sort of social network submission widget, some of these including Sociable, AddThis or AddToAny. Have you ever craved the big submission buttons that you see on some of the bigger blog networks? This guide will show you how to add it to your Wordpress or Blogger blog.
Wordpress
First, you have to download the images and upload them to the /images folder in your current theme.
Big Social Bookmarking Buttons
Edit your theme files:
- single.php will mean these are displayed when you view inside a post
- page.php will display the buttons at the bottom of each page
- index.php will display the buttons at the bottom of each post on the front page
Copy and paste the code below after <?php the_content('Read more »'); ?>
1: <div style="clear:both; ">
2: <div style="width:60px; float:left;">
3: <script type="text/javascript">
4: digg_url = '<?php the_permalink() ?>';
5: </script>
6: <script src="http://digg.com/tools/diggthis.js" type="text/javascript"></script>
7: </div>
8: <div style="width:60px; float:left;">
9: <script type="text/javascript" src="http://d.yimg.com/ds/badge2.js" badgetype="square"><?php the_permalink() ?></script>
10: </div>
11: <div style="width:65px; float:left;">
12: <a href="http://www.stumbleupon.com/submit?url=<?php the_permalink() ?>&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>
13: </div>
14: <div style="width:65px; float:left;">
15: <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&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>
16: </div>
17: <div style="width:65px; float:left;">
18: <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>
19: </div>
20: <div style="width:65px; float:left;">
21: <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>
22: </div>
23: <div style="width:65px; float:left;">
24: <a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&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>
25: </div>
26: </div>
Blogger
Go to Layout – Edit HTML, don’t forget to check “Expand Widget Templates”. Copy & paste the code below after <data:post.body/>
1: <div style='clear:both; '>
2: <div style='width:60px; float:left;'>
3: <script type='text/javascript'>
4: digg_url = '<data:post.url/>';
5: </script>
6: <script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
7: </div>
8: <div style='width:60px; float:left;'>
9: <script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
10: </div>
11: <div style='width:65px; float:left;'>
12: <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + 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>
13: </div>
14: <div style='width:65px; float:left;'>
15: <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + 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>
16: </div>
17: <div style='width:65px; float:left;'>
18: <a expr:href='"http://technorati.com/faves?add=" + 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>
19: </div>
20: <div style='width:65px; float:left;'>
21: <a expr:href='"http://twitthis.com/twit?url=" + 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>
22: </div>
23: <div style='width:65px; float:left;'>
24: <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + 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>
25: </div>
26: </div>
You should now have big social buttons visible on your blog. Thanks goes to MagNetwork for this tutorial.
4 Responses
Nice one matt :)
I got it up and running on all three blogs, but I wonder how can I center it? and make the tags wrap under them or something?
http://blog.ramitaibah.com/general/my-knuckles-...
For example
If you enter <div style=”clear:both”></div> your tags should display below the buttons. As for centering, you need to add styling to the buttons using margin or padding to pull them across.
@sirclown82 Here is the article I wrote on how to add them to your blog: http://is.gd/fvT7
Your CommentsThanks for your article,
I have 2 questions
1) I saw that you code is for .php, , can it use for ASP.NET ? ( I am working one project to build a website using ASP.NET 2.0. )
2) I download your “Big Social Bookmarking Buttons “, may I use it for my website for FREE ?