Add Social Media Icons To Your Posts

Blogging today can’t do without social media. And unless you are able to make use of it you will be losing a considerable part of potential traffic and new opportunities to promote your blog. While most of us use some kind of plugin to achieve this thing, I decided it was time to tweak my WordPress templates. I was using the ShareThis plugin earlier. But I didn’t find it very visible. Also it was collapsed by default and these days with so many icons on and design, visitors can easily miss this tiny one. The other idea was totake out the extra click required to expand the social media options. I decided upon the following social media services which I found to be relevant to my visitors.

  1. Feedburner subscription (not social media but take it as an opportunity to earn a subscriber)
  2. StumbleUpon
  3. Digg
  4. del.icio.us
  5. Technorati
  6. Furl
  7. Newsvine
  8. reddit

The following was the code I used. Two important wordpress tags are <?php the_permalink();?> which returns the full url of the post and <?php the_title();?> which returns the title of the post. All these sites use the same format to accept entries i.e

http://sitename.com/<query>?<url>=<?php the_permalink();?>&<title>=<?php the_title();?>

Get your favorite icons for a free icon pack and use the code below. I think this will work better because of the visibility and ease of use it provides to the visitors. See the bottom of this post for an example. I placed it into single.php and index.php and styled it with CSS. However do post you ideas here about any good plugins you know that can achieve better functionality.

<div id="social" >
<a href="http://feeds.feedburner.com/yourfeedname" title="Subscribe to RSS" alt="RSS Feed">Subscribe to the RSS Feed</a>.
Bookmark on StumbleUpon, del.icio.us or vote for it on Digg.<br />
<a title="Subscribe to the RSS Feed" href="http://feeds.feedburner.com/yourfeedname">
<img alt="" src="feeds.png" width="48" height="48" />
</a>
<a title="Submit to StumbleUpon" href="http://www.stumbleupon.com/submit?url=<?php the_permalink();?>&title=<?php the_title();?>">
<img alt="" src="stumbleupon.png" width="48" height="48" />
</a>
<a title="Submit to Digg" href="http://digg.com/submit?url=<?php the_permalink();?>&title=<?php the_title();?>">
<img alt="" src="digg.png" width="48" height="48" />
</a>
<a title="Submit to del.icio.us" href="http://del.icio.us/post?url=<?php the_permalink();?>&title=<?php the_title();?>">
<img alt="" src="delicious.png" width="48" height="48" />
</a>
<a  title="Submit to Technorati" href="http://www.technorati.com/faves?add=<?php the_permalink();?>">
<img alt="" src="technorati.png" width="48" height="48" />
</a>
<a title="Submit to Furl" href="http://furl.net/storeIt.jsp?u=<?php the_permalink();?>&t=<?php the_title();?>">
<img alt="" src="furl.png" width="48" height="48" />
</a>
<a title="Submit to Newsvine" href="http://www.newsvine.com/_wine/save?u=<?php the_permalink();?>&h=<?php the_title();?>">
<img alt="" src="newsvine.png" width="48" height="48" />
</a>
<a title="Submit to reddit" href="http://reddit.com/submit?url=<?php the_permalink();?>&title=<?php the_title();?>">
<img alt="" src="reddit.png" width="48" height="48" />
</a>
</div>

Be careful when copying the above code – WordPress is not all that code friendly though they know code is poetry.

10 Comments

  1. I don’t like that extra click with ShareIT either, but don’t you find your icons are too big and therefore “loud”?

    Reply
  2. They are actually. I’m still working on reducing the size to a little smaller for the ones inside “the loop” and plan to keep the larger ones at the bottom of single posts.

    However the main idea behind the big icons was to use them the way a big RSS icon draws more subscribers. But still they are too large at the moment 🙂

    Reply
  3. Thank you for this wonderful post.
    I would like to say that your aticle could’ve been the slighest bit better by removing those ” | ” out from your code. It makes it very hard to copy. Laugh out loud. But i have to admit that this post about social media icons is very detailed and informative.

    Thanks ,
    Tim The UWN http://www.ultimatewebnet.com

    Reply
  4. Yes Spot on.It becomes very easy to get dugg if you put digg button at the end of your post.Same with delicious and others.

    Reply
  5. Good post and you use the sexy bookmarks plugin that I use as well on my blog and I really like it.

    Reply

Comment on Add Social Media Icons To Your Posts

Your email address will not be published. Required fields are marked *