How to Add a Facebook Share Button to Drupal Views

| Drupal Development | 2 seen

Adding a Facebook share button to your Drupal website can help improve your website's user experience. By making it easier for visitors to share your content, you can encourage more engagement and interaction with your website, which can lead to increased customer loyalty and better overall website performance.

A time ago, I created a tutorial showing how you can add a Facebook-like button to your Drupal-powered site. That tutorial was pretty easy because we used a module. Today I'm willing to show, how to add a Facebook share button to the Drupal views page.

Go to the Facebook developer center - https://developers.facebook.com/docs/plugins/share-button/ 

Generate your share button:

We will use HTML5.

Now you must add JavaScript SDK to your theme, you can load JavaScript with the theme .info file

Once JavaScript is added to your theme - go to your views, add a new field  - path, exclude it from your display, and move it under the custom text field (custom text I use for views overrides)

Now open your custom text field and add HTML5 code from the Facebook page, change URL to [path] field:

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

And in final you should get your views containing the Facebook share button, with links to each node in views. Save this view and display it on the Drupal site using blocks.

Adding a Facebook share button to your Drupal views can be an effective way to increase your website's social media presence, engagement, and overall user experience.  By using the Facebook share button in your Drupal views, you can leverage the power of social media to help grow your website and build a loyal following.

If you need any help with adding a Facebook share button to Drupal views or Drupal in general, consider hiring me!

Add new comment