Add Facebook Like, Tweet and Google +1 sharing buttons to WordPress without a plugin

4
Add Facebook Like, Tweet and Google +1 sharing buttons to WordPress without a plugin

I have always used WordPress plug-ins to setup social media sharing links, but what I don’t love about plug-ins is that you really don’t know what sort of code is being injected into your WordPress installation. If you are curious, add a few plug-ins and View the Source of your webpage, more times than not the head gets filled with JS includes and messy code. Call me a code freak, but I strive for cleanliness.


I had recently been using the AddThis JavaScript implementation – but found often times the website getting hung up on loading. Also, the AddThis implementation does not give you full access to all of the features available, so I have since moved on. I have written my own jQuery Facebook Like plug-in, which is for websites, but can also be used on WordPress.

Get the code:

The code is really easy to implement, first you need to grab to code from each of the links below.

Code to implement

Using the permalink and title WordPress functions, you can easily integrate the post URL’s into the button code provided above. You can place the following code on your index or single post page templates, just make sure its placed within the posts loop otherwise it will not be able to pull the permalink or title.

[html]
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=204703199589477&amp;xfbml=1"></script><fb:like href="<?php the_permalink() ?>" send="false" width="90" show_faces="false" action="like" font="" layout="button_count"></fb:like>
</div>
[/html]

[html]
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="jakerutter">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
[/html]

[html]
<g:plusone size="medium" href="<?php the_permalink() ?>"></g:plusone>

<!– Place this render call where appropriate –>
<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

[/html]

The Downside

Facebook like adds 415k JS overhead to the page.

Twitter Tweet adds 20k JS overhead to the page.

Google +1 like adds 178k JS overhead to the page.

I will be investigating how to get these JS includes either down in size or to load asynchronously, therefore not affecting the load of the page.

Preview this code below

  1. I've been trying to do this without Frames for thee weeks now and a friend turned me on to your site. This is exactly what I've been looking for. Just one question because I'm really new to building a site when it comes to code. Will this work if I place it before or after php the_title() in the single.php: file?
    Thanks for the post!

LEAVE A REPLY