Add Social Media Icons To Your Posts

October 8, 2008

Social Media

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.

 

Join 37,807 others and get free tutorials & tips on design & development using Wordpress on, Thesis & Genesis!

{ 10 comments on Add Social Media Icons To Your Posts… read them below or add one }

Tony D'Ambra October 8, 2008 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”?

Shivanand Sharma October 8, 2008 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 :)

streaming October 14, 2008 at 5:25 am
Streaming January 7, 2009 at 7:46 pm

Thanks for the code ;)

zibex January 21, 2009 at 2:32 pm

BRUuoy hi! nice site!

php development June 27, 2009 at 3:59 pm

very useful post for seo developers

Tim June 30, 2009 at 11:53 pm

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

Shivanand Sharma July 1, 2009 at 4:32 pm

Tim: Done. Thanks for pointing that out.

Wiity July 7, 2009 at 11:17 am

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.

Frank Pipolo January 18, 2010 at 7:22 pm

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

Comment on Add Social Media Icons To Your Posts

You can add images to your comment by clicking here.

Previous post:

Next post:

X

Wordpress, Thesis, Genesis tutorials from Binary Turf — one tutorial a day. Subscribe & sharpen your web design skills.

Name:

Email:

We respect your email privacy.