Facebook shares are very important in publicizing your website’s content all over the world. The share button allows sharing your files across Facebook, thus across the world. Creating a share button on every post or page is very important to keep your posts popular. In this article, we teach you how to add the official Facebook share button to your WordPress website. By the end of the article, you will have a solution to increase your website’s reach with Facebook.
What a Facebook share button can do?
It might seem simple, but a Facebook share button can do wonders for your website. Especially if you produce high-quality content that users find interesting, they will be more than likely to share them with their friends or family members. Apart from the direct shares, the social button might also result in a pyramid-like share flow.
Implementing such a simple feature is just a matter of seconds, but might result in great results. Keep in mind that, social engagement is an indicator that your web page is pretty good resulting in better search positions as well.
How to Add Facebook Official Share Button to WordPress Website?
Before adding the share button, you should add a piece of code right after the <body> tag of your website. Be sure to replace [YOUR_APP_ID] with your actual app ID, which you can get from the Facebook Developer Apps page.
You should collect all these codes from the share button page by Facebook for easier implementation and to avoid potential errors. The code provided is for demonstration purposes only.
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v16.0&appId=[YOUR_APP_ID]&autoLogAppEvents=1" nonce="zH28FDgN"></script>To place the button, add the following code to your theme file based on the type of button you want to display on the page. The place you have to add the code will depend on your theme. You can also use a custom plugin that allows adding code to certain sections of your website to display the share button.
Box with count
A rich box that also shows the number of Facebook shares of the URL.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="box_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>Button with count
If you want a more compact share button with the count. Use the following code.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>Button
A simple Facebook share button.
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button" data-size="small"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>You can change the style and look of the buttons by customizing the attributes such as –
- data_layout – 3 available values – box_count | button_count | button
- data_size – 2 available values – small | large
The official Facebook share button is more elegant and effective than any other third-party buttons. It helps to avoid any types of bugs like no image when sharing the content. It is always better to choose the official Facebook button than any other sharing button, which might result in compatibility issues. So, use them wisely to make your content popular on the web.