Quickly add Social Share Buttons to your WordPress site without plugin

Home ¬Ľ Quickly add Social Share Buttons to your WordPress site without plugin

Quickly add Social Share Buttons to your WordPress site without plugin

Adding a social share buttons to a website is needed for every project nowadays. The way I’m going to show you is really the simplest option available to do it, when we exclude adding a plugin for WordPress or any other CMS. A note on the plugins thou, keep in mind that usually there is a lot more code in there than a sharing buttons actually need.

This snippet includes simple Facebook Like, Facebook Share, Tweet, Google +1 and Pin It buttons. The styling of the buttons is the default offered by the vendor (or in our case the social networks). I tryed to get the sizes eaqual, however please keep in mind that you will probably need to add some CSS to make it match your design.

OK Let’s go already!!! ūüôā

First lets open header.php, footer.php and the template file you want the buttons placed in. I will use single.php. You can also add the HTML as a finction and then call it but this is not very good Idea as we should try and keep the HTML inside the templates and not in the functions.

In the template file (ex. single.php) paste the following code:

<div class="fb-like" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
<a class="twitter-share-button" href="https://twitter.com/share" data-count="none">Tweet</a>
<div class="g-plusone" data-size="medium" data-annotation="none"></div>
<a class="pin-it-button" href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>&description=<?php the_title(); ?>">Pin It</a>

The code above will place the buttos inside your template, now we just need to add the jQuery.

Next in header.php and right after thetag paste the Facebook initialization code.

<div id="fb-root"></div>
<script>(function(d, s, id) {
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) return;
 js = d.createElement(s); js.id = id;
 js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=XXXXXXXXX";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Where the XXXXXXXXX needs to be changed with your appID. For additional information check the FB Like button page.

Now we need to initialize the scripts for Pinterest, Twitter and Google +1.
Open footer.php and paste the code from the box below (I usually place it after wp_footer();)

<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script>
<script type="text/javascript">
 (function() {
 var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
 po.src = 'https://apis.google.com/js/platform.js';
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>


It there is any issues with code above please let me know in the comments below and I will adjust it as some of the sharing links or scripts may be changed by the vendor.

By | 2018-03-13T11:44:25+00:00 February 12th, 2017|Snippets, WordPress|0 Comments

Leave A Comment