15 May, 2017 seen 14,781
There is no secret that related content can help to improve over all page views for website. More page views means more engaged website visitors, resulting in more sales and higher profit.
In today's Drupal tutorial I will write how to make related content block using taxonomy term field in Drupal 8. For Drupal 7 tutorial see: Related nodes based on…
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
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.
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
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.