Home Blog Web Design How to add social sharing buttons to WordPress posts manually

How to add social sharing buttons to WordPress posts manually

Web Design
Jan 27, 2013

Blueprint Digital

Insights from the Blueprint Digital team.

Summarize With ChatGPT

Social media is everywhere and always changing. It is important to utilize social media in every way you can. One way is to boost your branding by having branded social media pages. Another is to use social sharing buttons. Recently, I worked on adding social sharing buttons on the Blueprint blog as a part of my front end development tasks. There are a variety of ways to add social sharing buttons in WordPress. Today I will be sharing how to add social sharing buttons manually to WordPress posts. This method is particularly useful if you really want to customize how the buttons look. You will have full control as to where you want the buttons to be placed on your blog post. To do this, we need to edit our WordPress theme. Specifically, we will be working in The Loop for single.php.

Adding Facebook Like button

You can generate and customize how a Like Button would look on the Facebook Developers website. For this tutorial, I have customized the code as how it looks on the Blueprint blog. The first code is the necessary JavaScript you need to put in your theme. Facebook recommends that it be placed right after the opening <body> tag.

<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/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

The following code should go in The Loop for the single.php file. Place it where you want the button to be.

<div class="fb-like" data-href="<?php the_permalink(); ?>" data-send="false"
data-layout="box_count" data-width="450" data-show-faces="false"></div>

For data-href, I put the WordPress template tag for getting the URL of the post. Because of the permalink template tag there, when you look at each blog post on the Blueprint blog, the URL you click like for is automatically generated as link for the blog post. Because we are putting the social sharing buttons in The Loop, we can use this template tag without problems.

Twitter also offers a way to generate a Tweet button. Below is the code I used for the Blueprint blog:

<a href="https://twitter.com/share" class="twitter-share-button"
data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>"
data-via="BlueprintWebMedia" data-count="vertical">Tweet</a>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];
if(!d.getElementById(id)){js=d.createElement(s);js.id=id;
js.src="//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>

The bottom portion is the JavaScript needed for the Twitter tweet button. As we did for Facebook Like button, we put the permalink template tag for data-url and the post title template tag for data-text. Remember that these template tags are only used in The Loop, so these tags would be appropriate in this case. Also, make sure to change BlueprintWebMedia to your Twitter handle so that when people click Tweet on your post on your website, they will mention the correct Twitter account. (If you would like, follow @BlueprintWebMedia!)

Google also offers a way to customize their Google+ button on the Google Developers site.

<div class="g-plusone" data-size="tall" data-href="<?php the_permalink(); ?>">
</div>

<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>

The above code is what I used for the Blueprint blog. Google recommends that the script be placed after the last +1 button on the website. Again, I placed the permalink template tag for data-href.

Conclusion

You could use the same codes for The Loop on index.php or wherever blog posts are displayed if you want. That is because we specified the URL to share in each code, so each button displayed on the blog posts page will have a different URL. If you did not specify the URL to share and you had the buttons on the blog posts page, you would have a bunch of share buttons that share the blog page (ex. yourdomain.com/blog) instead of the URL for individual posts. That is because each button defaults to the page URL that the button is placed if the URL is not specified. On the Blueprint blog, it is set so that only the excerpt shows instead of the full content, so it is appropriate to show the buttons only on the individual blog post. However you decide to do, I hope you found this article to be helpful!