eFrog Digital Design |

Sharing is caring, right tadpoles?

So today, we’re going to show you how to auto-magically super-charge your blog posts, with easy-to-click Twitter and Facebook buttons, so that your readers can tweet and like your content seamlessly. Just like the supermarkets put all the chocolates around you when you’re at the tills, so it’s dead easy to drop a couple while you’re feeling great about all the veggies you’ve just bought? Just like that.

And it’s just a single piece code, added to the functions.php file, in your theme folder. Very easy. As always, you want to back up first. So say you were using our free Greyzed theme, you’d be looking in wp-content/themes/greyzed. Find the functions.php file and copy it to say, functions.php.bak.

Now you can go ahead and open functions.php in a plain text editor, like NotePad, or TextMate or something similar. Scroll to the bottom, and then use the ‘view source’ button, top right of the code snippet below, and copy and paste the code as the last function in the file.

function facebook_twitter_button($content){
if(!is_feed() && !is_home()) {
$content .= '<div class="facebook-twitter-button">
<a href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical">Tweet</a>
<script type="text/javascript"
src="http://platform.twitter.com/widgets.js"></script>
<div class="facebook-share-button">
<iframe
src="http://www.facebook.com/plugins/like.php?href='.
urlencode(get_permalink($post->ID))
.'&amp;amp;layout=box_count&amp;amp;show_faces=false&amp;amp;width=200&amp;amp;action=like&amp;amp;colorscheme=light"
scrolling="no" frameborder="0" style="border:none;
overflow:hidden; width:200px;"
allowTransparency="true"></iframe>
</div>
</div>';
}
return $content;
}
add_action('the_content', 'facebook_twitter_button');

Now save the file, and you’re all done! Open a post on your blog and admire your own geek-itude! Well done!

Update: Turns out, you might need a little something extra, that is, some CSS, and  a change to the code we originally included. That’s been changed in the code snippet above, and the CSS changes are detailed here.

In the same way that you’ve edited the functions.php file, now open style.css, in the same folder, wp-content/themes/greyzed in our example, and at the bottom, add this snippet of CSS code:

/* =Extras for the Facebook and Twitter buttons.
-------------------------------------------------------------- */

.facebook-twitter-button {
float:left;
width:270px;
}

.facebook-share-button {
float:right;
height:80px;
}

Save that file too.
THEN it’ll show up as the pics above shows….