Adding social media buttons

These days, an increasing number of people are sharing their minds through different social media, such as Facebook, Twitter, and many more.

Every social media platform has the option to share pages on their platform. The most famous examples of this are the share buttons, such as the Like button of Facebook, the Tweet button, the Google Plus button, and many more.

Getting ready

In this recipe, we will add share buttons for the following platforms. You can take a look at the developer documentation of each platform as a preparatory step:

• Facebook (https://developers.facebook.com/docs/plugins/like-button)
• Twitter (https://about.twitter.com/resources/buttons)
• Google Plus (https://developers.google.com/+/web/+1button/)

To show a button on every product page, we have to do some code changes. Ensure that you have access to the code with your IDE.

How to do it

The following steps show you how to add social media buttons to the description of your product:

1. Open the page of the product where you want to add the social media buttons.
2. We will start with the Like button of Facebook. Visit https://developers.facebook.com/docs/plugins/like-button and configure the following form with your data:
   
3. When clicking the Get Code button, you will see the code of the button. Place this code in the product description field.
4. Save the product and open the Product Detail page of that product in the frontend. You will see a Like button in the description field of the product.
5. We can also add buttons for sharing on other social media using the same principle. For Twitter, we can get the code of a button at https://about.twitter.com/resources/buttons. From here, copy the code and paste it after the code of the Facebook Like button.
6. Similarly, for Google Plus, we can get a button at https://developers.google.com/+/web/+1button/ from where we can copy the code and paste it in the description field of the product.
7. When reloading the frontend, we can see the buttons on the detail page of that product. If we want to show it on every page, we will have to make a change in the code of the product detail template.
8. If you have a custom theme, copy and paste the app/code/Magento/Catalog/view/frontend/templates/product/view/description.phtml file to the configured app/design/frontend/<package>/<theme>/Magento_Catalog/templates/product/view/description.phtml theme.

   Note

   If you have no custom theme installed, take a look at the Creating a Magento 2 theme recipe of Chapter 3, Theming. In that recipe, all the steps are explained on how to do this.

9. Add the code of the social media buttons at the end of the file. You generate the product URL with the following code: $block->getProduct()->getProductUrl(). Use this code to generate the URL for the button. The code for the Facebook Like button code will look as follows:

   <div class="fb-like"
       data-href="<?php echo $block->getProduct()->getProductUrl() ?>"
       data-width="450"
       data-layout="standard"
       data-action="like"
       data-show-faces="true"
       data-share="true">
   </div>

10. Save the file, clean the cache, and you will see the Like button on every page.

How it works

A social media button is mostly a piece of external HTML that will render in your website. With this button, a page can be shared.

To render these buttons, external static resources from the social media website will be loaded. When you read the code of the buttons, you can see that additional JavaScript libraries are included in the code.

When sharing a page, the social media crawls the page to look for a title, image, and description for the post. In the first case, the crawler will search for the Open Graph meta tags.

These tags are generated by Magento on a product detail page, so a good title, image, and description will be displayed for the post.