How To Display Social Share Buttons On Drupal Taxonomy Pages

In this Drupal tutorial I will show how one (perhaps you) can add social share buttons on your Drupal taxonomy pages.

By saying social Share buttons - I mean Facebook share or like, Twitter tweet and Google+. In this tutorial I will not use any module, just some Drupal theming and working with Drupal views.

This tutorial is heavily based on my tutorial how to add Facebook share button on Drupal nodes I did back at the end of 2013.

Prior I will dig into technical details take a look at this screenshot or see it on action by pressing any tag or category page on my blog, for example Drupal Development category page.

Social Share buttons on Drupal Taxonomy pages

Social Share buttons on Drupal Taxonomy pages

The reason I wanted to display social share buttons is simple. Recently I launched a Facebook Ads to drive traffic on one of my category pages as a landing page, I discovered that a social share functionality on category pages could possibly give me another traffic boost, I have no results yet to report - does it actually helped me boost my traffic, but this is even not a subject of this topic.

Adding code snippets to Drupal html.tpl.php file

Since I'm not using any third party modules to build this functionality, there are few things we should do manually by editing Drupal theme files. And one of them is html.tpl.php file located into templates folder - if you don't have it you can copy it's basic structure:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 
 xmlns="http://www.w3.org/1999/xhtml" 
 xml:lang="<?php print $language->language; ?>" 
  version="XHTML+RDFa 1.0" 
  dir="<?php print $language->dir; ?>"
  <?php print $rdf_namespaces; ?>>

  <head profile="<?php print $grddl_profile; ?>">
    <?php print $head; ?>
    <title><?php print $head_title; ?></title>
   <?php print $styles; ?>
	 <?php print $scripts; ?> 

  </head>
  <body class="<?php print $classes; ?>" <?php print $attributes; ?>>
    <?php print $page_top; ?>
    <?php print $page; ?>

     <?php print $page_bottom; ?>
	   
  </body>
</html>

Upload html.tpl.php to your theme's templates folder and clear all caches.

Next add a following code snippets between <body> tags:

Snippet for Facebook

<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&appId=YOURAPIID";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Snippet for Twitter

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

Snippet for Google+

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

Snippet for Pinterest

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"
    data-pin-hover="true"
></script>

Now, again upload this file, clear all the caches.

Taxonomy Term Views Page

There is a huge possibility you have already turned on your taxonomy term page view (if you are using views), if not - go to views and enable it:

Taxonomy term view from Views UI

Taxonomy term view from Views UI.

Here is a code snippet I added to my taxonomy term views page (using fields)

<div class="social-share">
<div class="fb-share-button" data-href="[path]" data-type="button_count"></div>

<a href="https://twitter.com/share?url=[path]" class="twitter-share-button" data-text="[title_1]" data-via="Reinis_Fischer">Tweet</a>
<div class="g-plus" data-href="[path]" data-action="share" data-annotation="bubble" data-height="24"></div>

</div>

where -

  • [path] is a absolute link to your node
  • [title_1] is additional Title field without actually been linked to url

Here is a full view of my taxonomy term pages

<h2 class="photo-title">[title]</h2>
<div class="info-bar">Posted on [created] by [field_author_name]  [field_category] </div>
[nothing_1]
[field_images]
<div class="photo-padding">
[body]   	  
</div>
<div class="info-bar">Tags: [field_taxonomy]  </div>

here is a full print screen of my taxonomy term page view

Drupal Views Taxonomy Term page

Drupal Views Taxonomy Term page

I hope this article helped you adding social share buttons on your Drupal Taxonomy Term Pages, if you have any questions please feel free to leave a comment bellow or contact me.

Disqus