How to Add Twitter, Facebook & Google Plus Share to Self Hosted Wordpress Posts

How to Add Twitter, Facebook & Google Plus Share to Self Hosted WordPress Posts

It’s only recently that I started with CodeHandbook using WordPress. I’m completely a new bee when it comes to wordpress and as far I have heard from a few friends, it’s quite simple to get started and there are tons of plugins to make everything work for you right out of the box.

I started blogging on CodeHandbook and used to share my tutorials and article on Facebook, Twitter and Google plus. Then I saw a number of websites having the social media share button right above their articles which made it quite easier for the reader to share the post. So, I started searching for a plugin to add the share buttons above my articles and I stumbled upon GetSocial plugin. It was a nice plugin and perfectly suited my needs. But there was an issue. While sharing using Twitter, if I wanted to include my twitter handle, I have to upgrade to a paid version (which I wasn’t really willing to).

So, I thought why not try to add Twitter, Facebook and Google Plus share to posts without using any plugin.

To create a twitter share button, go to the twitter button resources. Select the share button and enter the required details and you should get the required code for the twitter share button. Here is how my twitter share link looked like:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="codehandbook" data-related="codehandbook">Tweet</a>

For the Google Plus share , you need to the following script and code.

<script src="https://apis.google.com/js/platform.js" async defer></script>
<g:plusone size="medium"></g:plusone>

Size can be small, medium and tall.

For the Facebook share button, go to the facebook official docs and enter you URL and get the required code. Include the JavaScript SDK code right after the opening body tag. So, go to you wordpress theme folder and edit the header.php file to include the JavaScript SDK code after the body tag. Here is how my Fb share code looks like:

<div class="fb-share-button" data-href="<?php echo get_permalink(); ?>" data-layout="button_count"></div>

I have modified the data-href to get the particular post URL when the Facebook share button is clicked.

Now finally open up the content-single.php file from the themes folder and add the following code before the entry- content class element.

<div class="media-share">
    <div class="twitterDiv">
       <a href="https://twitter.com/share" class="twitter-share-button" data-via="codehandbook" data-related="codehandbook">Tweet</a>
    </div>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <div class="googlePlusDiv">
       <g:plusone size="medium"></g:plusone>
    </div>
    <div class="facebookDiv">
        <div class="fb-share-button" data-href="<?php echo get_permalink(); ?>" data-layout="button_count"></div>
    </div>
</div>

Now you should be able to view the Twitter, Facebook and Google Plus share buttons above your articles or tutorials.
Happy Hacking 🙂