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

Categories: Open SourceWordPress

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

Randall · February 23, 2012 at 12:56 pm

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!

Eric · September 16, 2012 at 9:34 pm

Awesome. This is great. However, there is an extra </div> in the facebook one. Just wanted to let you know.

Thx

joxe · November 23, 2012 at 7:16 pm

there is a problem with your facebook code

<div id="fb-root"></div>
2
<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>
3
</div>

you have a extra </div> code that is breaking the theme , without that is working good, really thanks!!

Daniel H. · August 10, 2013 at 2:53 pm

Thank you. This works perfectly.

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

GruntJS

My First GruntJS Plugin: Bust My Cache

GruntJS is a JavaScript Task runner that has been around for about 2+ year, at least as far as I can remember. I started playing around with GruntJS which uses Node.js about a year ago, Read more…

HTML5

HTML5 Local Storage and Web Personalization

I have just finished doing some research on using HTML5 Local storage instead of Cookies for website personalization and have come to the conclusion that everyone should be using HTML5 local storage in place of Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…