7EC330B5-B132-499A-A307-65040D76AA48 Add Facebook Like and Share button to WordPress

Add Facebook Like and Share button to WordPress

To add Facebook Like and Share button to your WordPress site, you need to do 3 steps:

  • Step 1: Create and activate a Facebook App
  • Step 2: Get your Facebook User ID
  • Step 3: Get the embed code of the Facebook Like and Share button and paste the code to the position you want to show the Like and Share button.

Now, I will show you how to add Facebook Like and Share button to your WordPress site.

 

I. Step 1 – Create a Facebook app

To get a Facebook App ID, you need to create a Facebook app » See more at: How to create a Facebook App for your website . In this example, I created an app is “firstappdemo” with App ID is 1607132996198694

create-and-activate-a-facebook-app

II. Step 2 – Get your Facebook User ID

You need to use your Facebook User ID to manage Facebook comments » See more at:Instructions on how to get your Facebook Page ID and Facebook User ID

From this guide, I find my Facebook User ID is 100006844891xxx

III. Step 3 – Get and paste the embed code of the Facebook Like and Share button to the position you want to show the Like and Share button

From Part I and II, you have: Facebook App ID=”1607132996198694” and Facebook User ID=”100006844891xxx“.

You choose Appearance » Editor (item 1). Click on the file Header (header.php – item 2). In the <meta> area, you insert the following code (item 3):

<meta property="fb:app_id" content="1607132996198694" />  /*1607132996198694 is your Facebook App ID */

<meta property="fb:admins" content="100006844891xxx"/> /*100006844891xxx is your Facebook User ID*/

embed-facebook-comments-manually
Enter Update to save changes.

III.1. Get the embed code of the Facebook Like and Share button

You go to the address: https://developers.facebook.com/docs/plugins/like-button

embed-like-facebook-joomla-1

Click on the Get Code button to get the embed code.

embed-like-facebook-joomla-2

You need to copy the embed code:

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

<div class="fb-like" data-href="/<?php the_permalink(); ?>" data-layout="button_count" data-action="like" data-show-faces="true" data-share="true"></div>

In the WordPress admin page, you choose Appearance » Editor (item 1). Click on the file Single Post (single.php) (item 2) to open it and paste the code into the position as shown below (item 3):

embed-like-and-share-button-facebook-on-wordpress-5

Note: With other themes, the template show single post isn’t in the file Single Post (single.php). It may be the file Content (content.php) or another file. It depends on the theme you are using. In this example, I’m using the theme Hueman.

In the file single.php of this theme, the line of code in the item 4 will show related posts and the line of code in the item 5 will display comments on your WordPress site. You can delete these lines if you don’t want to show them.

You will see the Facebook Like and Share button in all posts:

embed-like-and-share-button-facebook-on-wordpress-4


Choose a language

You are here

SEARCH

CMMS Lazada

Subscribe YouTube

 

Hải sản Vân Đồn

Chào mừng bạn đến với chuyên mục giới thiệu và cung cấp các mặt hàng hải sản của Vân Đồn. Hải sản Vân Đồn - Quảng Ninh | Tươi ngon, bổ dưỡng và đảm bảo với giá cả phải chăng. Xem trang....

UDEMY COURSES

Sitewide2of4-Oct-15dollars300x250