ikreateit.com

Blog­ging is shar­ing and thanks to many native Word­press plu­g­ins as well as handy code snip­pets, we can make it eas­ier for read­ers to bump, tweet, digg, or save our blog posts. The eas­ier, the bet­ter the chances for some social love. The fol­low­ing arti­cle will take you trough the steps to cre­ate a small “Share this Post” sec­tion after your blog post, easy enough for non-programmers to follow.

The easy way

If you don’t want to code at all but use a WP plu­gin that does all the work for you, I rec­om­mend Socia­ble. It’s avail­able for Word­press, Blog­ger and plain sim­ple HTML sites. You sim­ply pick the ser­vices that inter­est you and choose from the many set­tings avail­able. Acti­vate the plu­gin and your read­ers can start to share your con­tent instantly.

You can eas­ily style the appear­ance of the Socia­ble bar through CSS. I found it quite handy and easy to imple­ment. But what if some of the ser­vices you like are not sup­ported by Socia­ble? Then it comes down to cre­at­ing shar­ing but­tons man­u­ally. Fear not, it’s easy enough, even if you are like me more a designer than a coder.

Cre­at­ing share buttons

First and fore­most, you should think about which ser­vices you want to pro­vide but­tons for. Your needs will vary, depend­ing on the kind of con­tent you pub­lish. For design­ers and devel­op­ers, Design­Bump will be almost unavoid­able, while Deli­cious, Face­book and Twit­ter shouldn’t be absent on any blog. Be aware though, that most of these ser­vices can only be used with an exist­ing account (by you and the user pro­mot­ing your post).

Before you start hunt­ing the web for nice but­tons, check out the offi­cial pages of your ser­vices first. Many offer ready made badges and source code to imple­ment. Look in the “Tools” sections.

Using the code pro­vided by the sites often includes icons. On the iKreateIt blog I use the icons that were pro­vided, save the Deli­cious icon because it was too small to fit with the oth­ers. Here are some sam­ple code snip­pets for you to use:

Design­Bump for Wordpress

<script type="text/javascript"><!--mce:0--></script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"><!--mce:1--></script>

Cypherbox

<script src="http://cypherbox.net/evb/button.php" type="text/javascript"><!--mce:2--></script>

Digg

<script src="http://digg.com/tools/diggthis.js" type="text/javascript"><!--mce:3--></script>

Retweet But­ton I actu­ally cheated a lit­tle bit here. You can insert a badge man­u­ally, but since Tweet­meme offers a nice WP plu­gin that you can cus­tomize nicely, I installed the plu­gin and then called the badge with a short func­tion — that means the code below WORKS ONLY with the WP plu­gin installed!

<?php if (function_exists('tweetmeme')) echo tweetmeme();?>

Deli­cious Amaz­ingly enough, I found it rather dif­fi­cult to get the Deli­cious but­ton to work. The icon pro­vided by Deli­cious was, as men­tioned before, too small for my taste and I wanted to use one of my own. It took me a while to find a code snipped that allowed me that (I prob­a­bly shouldn’t code any­more after 11pm). This finally worked for me:

<a href="javascript:location.href='http://del.icio.us/post?v=2&url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+' '"><img src="http://ikreateit.com/wp-content/themes/twicet/images/delicious.png" alt="delicious" width="64" height="64" /></a>

Obvi­ously, you need to replace the image loca­tion with some­thing on your own server.

Face­book If you are look­ing for a sim­ple and small Face­book but­ton, you can use this code. It will dis­play only a tiny Face­book sym­bol, the word ‘share’ and a share count:

<a name="fb_share"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"><!--mce:4--></script>

Oth­er­wise, if you are like me and like the big Face­book but­ton, grab the Face­book plu­gin, set the loca­tion set­ting to “Man­ual” in the options panel and call it with this function:

<?php echo facebook_sharecount();?>

Oh no, I am confused!

Don’t sweat it. Those were just some code sam­ples for read­ers who are look­ing for some­thing in par­tic­u­lar. If your goal is to cre­ate a sec­tion like mine below, have a look at this code. I’ll explain beneath the snippet.

<div id="socialkudos">
<h2>Sharing is lovin'!</h2>

<!-- DESIGNBUMP -->
<span class="socialmedia"><script type="text/javascript">url_site='<?php the_permalink(); ?>'; </script> <script src="http://designbump.com/sites/all/modules/drigg_external/js/button.js" type="text/javascript"></script></span>

<!-- RETWEET -->
<span class="socialmedia"><?php if (function_exists('tweetmeme')) echo tweetmeme();?></span>

<!-- FACEBOOK -->
<span class="socialmedia"><?php echo facebook_sharecount();?></span>

<!-- CYPHERBOX -->
<span class="socialmedia"><script type="text/javascript" src="http://cypherbox.net/evb/button.php"></script></span>

<!-- DELICIOUS -->
<span class="socialmedia"><a href="javascript:location.href='http://del.icio.us/post?v=2&url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+' '"><img src="http://ikreateit.com/wp-content/themes/twicet/images/delicious.png" alt="delicious" width="64" height="64"/></a></span>

</div><!-- end socialkudos -->

To make sure this appears beneath every blog post, you need to edit your single.php file. Put the above code some­where before the end of the con­tent loop (the loop that makes sure your posts are pub­lished if there are any). In non-tech bab­ble, place it some­where between these lines:

<?php if (have_posts()) : while (have_posts()) : the_post(); /*there can be a lot of code here*/ <?php endwhile; else: ?>

I wrapped my shar­ing sec­tion in a DIV with the ID ‘socialku­dos’ (I know, ter­ri­bly orig­i­nal). That is because I wanted to con­trol the place­ment and styling of the box with CSS (scroll down to see the styles that I applied). Inside the DIV, I sim­ply placed the code snip­pets and wrapped them in a SPAN to float them to the left and thereby arrang­ing them next to each other.

#socialkudos {
	width: 480px;
	height: 120px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid #dcdcdc;
	background: #f1efef;
	}

	#socialkudos h2 {
		font-size: 15px;
		font-weight: bold;
		}

	.socialmedia {
		float: left;
		padding-right: 10px;
		}

And that’s it! Now you can cre­ate a shar­ing sec­tion in your own blog and see how your read­ers spread the word. Speak­ing of which: enjoyed read­ing this or found a solu­tion to a prob­lem? I’d appre­ci­ate your social love too