How to manually add social media share or like buttons in WordPress?

Social media share buttons has become an increasingly important part of every website owner’s marketing strategies. If you don’t have any, you must add as soon as possible. In this article, I will explain how to manually add social media share or like buttons in WordPress – Facebook, Twitter and Google+. You just need to visit developer page of your desired social media (Pinterest, LinkedIn and etc).

Let’s start by creating vertical share buttons in your website.

Facebook Buttons

Visit Facebook Developers and chose your desired button. In this case we will create a share button. Use the form and generate the code in Facebook Developers.

<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_US/sdk.js#xfbml=1&appId=1234567789&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Note: Change appId=1234567789 to your personal appID. To make it work in WordPress, we changed data-href="<?php the_permalink(); ?>". With this change we will ensure that we will have the correct link to each post.

Twitter Buttons

Visit Twitter Developer to generate your button. Once again, we will create a share button.

<a class="twitter-share-button" href="https://twitter.com/share" data-via="ageorgiev91" data-size="large" data-count="”vertical”" data-related="ageorgiev91">Tweet</a><script>// <![CDATA[
!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>

To make it vertical, simply add to your generated code in Twitter this – data-count=”vertical”

Google+ Buttons

Visit here

<!-- Place this tag where you want the +1 button to render. -->
<div class="g-plusone" data-size="tall"></div>
<!-- Place this tag after the last +1 button tag. -->
<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>

Place your code in WordPress

In your themes’ folder, find the loop where posts are. You need to find this: while ( have_posts() ) : the_post();

It could be one of these files

  • index.php
  • single.php (most likely)

Add the buttons immediately after the loop. By doing this, you will add them immediately after every post (on the bottom). If you want to include in your pages add – page.php is the place.

Conclusion

Adding like or share buttons to your website is relatively easy process and important. You just need to visit developer’s page of your favorite social media (e.g. Facebook) and create your buttons. With a beginner programming knowledge you can add them manually to any website, just replace few lines with your personal account data.

What do you think? Do you have any better ideas? Share in the comments below.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.