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