Our comments policy - We Follow

Add Social Media icons to your posts

October 8, 2008 · 3 comments

in Development, Wordpress

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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 templated. 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.

Add to Del.cio.us RSS Feed Add to Technorati Favorites Stumble It! Digg It!
    www.sajithmr.com

{ 3 comments… read them below or add one }

1 Tony D'Ambra 10.08.08 at 5:50 pm

I don't like that extra click with ShareIT either, but don't you find your icons are too big and therefore "loud"?

2 Shivanand Sharma 10.08.08 at 5:54 pm

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 :)

3 streaming 10.14.08 at 5:25 am

Leave a Comment

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Previous post: Criticism I - How do you handle it?

Next post: Criticism II - How to handle it