Facebook Like & Share Buttons on Drupal 8 using Views

Updated: 10 May, 2017 seen 1,667

In this tutorial you will learn how to setup custom Facebook like & share buttons for Drupal 8 website using views display. No doubt, there are many great modules set and forget configuration. Though if you are looking to display functional social share buttons on views based pages, you will need to come out with custom solution. 

There are many pages and even blocks in Drupal social share buttons to be featured, like custom blocks, taxonomy pages, custom pages and so on.

For Drupal 7 see: Facebook share button for Drupal views

Here is live examples with Facebook like & share buttons I built for Drupal 8 site - tourgeorgia.eu

Custom Drupal 8 views display

Custom Drupal 8 views display with Facebook Like and Share buttons

Above you can see a custom block, featuring most popular tours on tourgeorgia.eu.

Facebook social share buttons on Drupal 8 custom pages

Facebook social share buttons on Drupal 8 custom pages

Above you can see example with social share buttons on blog page.

Here are two things you will need to take care to make Facebook like &share buttons available on Drupal 8 website

  • Add Facebook JavaScript SDK code to html.html.twig page
  • Add custom code and CSS styling to Drupal views page

Update html.html.twig page

Locate html.html.twig page in your theme folder (if you don't have one yet, create it

Visit: https://developers.facebook.com/docs/plugins/like-button#configurator and click Get Code button, you will get something like this:

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

Paste following code just after opening <body> tag in html.html.twig template, make sure you enter your APP ID

Save html.html.twig

Add custom code to Drupal 8 views

I'm going to add Facebook share and like buttons, but you could fine tune it according to your needs (follow examples here: https://developers.facebook.com/docs/plugins/like-button#configurator)

Open your views display and add following code:

<div class="fb-like" data-href="{{path}}" data-layout="button_count" data-action="like" data-size="small" data-show-faces="false" data-share="true"></div>

As you can see, I've added {{path}} field for getting actual URL. When adding path field, make sure you select use absolute url, to make it work together with Facebook Open Graph

Now you can add some CSS styling to position Facebook social buttons.

The Bottom Line

As you can see from examples above, this is really custom, though powerful way of adding Facebook like & share buttons for your Drupal 8 website. I would recommend to setup OpenGraph for Drupal to take a full control of things users are sharing, see: How To Add Open Graph Protocol For Drupal 8 Website