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.

Divi WordPress Theme