{"id":816873,"date":"2022-11-11T02:14:39","date_gmt":"2022-11-11T02:14:39","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/how-to-add-facebook-like-button-in-wordpress\/"},"modified":"2022-12-10T12:44:44","modified_gmt":"2022-12-10T12:44:44","slug":"how-to-add-facebook-like-button-in-wordpress","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/how-to-add-facebook-like-button-in-wordpress\/","title":{"rendered":"How to Add Facebook Like Button in WordPress"},"content":{"rendered":"<div itemprop=\"text\">\n<p>Do you want to add a Facebook Like button in WordPress? <\/p>\n<p>A Facebook Like button on your WordPress website can make it simple and easy for users to like and share your content. You can increase engagement and get more followers. <\/p>\n<p>In this article, we will show you how to add the Facebook Like button in WordPress.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"385\" alt=\"How to add Facebook like button in WordPress\" class=\"wp-image-137148\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress-300x170.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"385\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress.png\" alt=\"How to add Facebook like button in WordPress\" class=\"wp-image-137148\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/how-to-add-facebook-like-button-in-wordpress-300x170.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<h4>Why Add a Facebook Like Button in WordPress?<\/h4>\n<p>Facebook is one of the most popular social media platforms in the world. Many businesses use Facebook to connect with their customers and promote their products. <\/p>\n<p>Adding a Facebook Like button to your <a href=\"https:\/\/www.wpbeginner.com\/guides\/\" title=\"How to Make a WordPress Website in 2022 (Ultimate Guide)\">WordPress website<\/a> can help drive more engagement. It also encourages people to share your content on their Facebook profiles and <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-increase-your-blog-traffic\/\" title=\"How to Increase Your Blog Traffic \u2013 The Easy Way (27 Proven Tips)\">attract new users<\/a> to your site. <\/p>\n<p>You can use the Facebook Like button to increase your <a href=\"https:\/\/www.wpbeginner.com\/plugins\/display-social-media-followers-count-text-wordpress\/\" title=\"How to Display Social Media Followers Count in WordPress\">social followers<\/a> and build a community. It helps raise awareness about your products and services and boosts conversions. <\/p>\n<p>That said, let\u2019s see how you can add a Facebook Like button in WordPress using a plugin or adding custom code. <\/p>\n<h4>Method 1: Add Facebook Like Button in WordPress Using a Plugin<\/h4>\n<p>In this method, we will be using a <a href=\"https:\/\/www.wpbeginner.com\/showcase\/24-must-have-wordpress-plugins-for-business-websites\/\" title=\"24 Must Have WordPress Plugins for Business Websites in 2022\">WordPress plugin<\/a> to add Facebook Like button. This method is very easy and recommended for beginners.<\/p>\n<p>The first thing you need to do is install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/facebook-button-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" title=\"BestWebSoft's Like &amp; Share\">BestWebSoft\u2019s Like &amp; Share<\/a> plugin. For more details, see our step-by-step guide on <a title=\"Step by Step Guide to Install a WordPress Plugin for Beginners\" href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners\/\">how to install a WordPress plugin<\/a>.<\/p>\n<p>Upon activation, you can go to <strong>Like &amp; Share \u00bb Settings<\/strong> from your WordPress admin panel. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"376\" alt=\"Like and share plugin settings\" class=\"wp-image-137089\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings-300x166.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"376\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings.png\" alt=\"Like and share plugin settings\" class=\"wp-image-137089\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/like-and-share-plugin-settings-300x166.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Next, you\u2019ll need to add the Facebook App ID and App Secret. If you don\u2019t have this information, then simply follow the steps below. <\/p>\n<p><strong>How to Create a Facebook App ID and App Secret<\/strong><\/p>\n<p>Go ahead and click the \u2018create a new one\u2019 link under App ID or App Secret field in the Like &amp; Share plugin. <\/p>\n<p>This will take you to the Meta for Developers website. We suggest opening the website in another tab or window because you\u2019ll need to open the Like &amp; Share settings page in your <a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-fix-a-slow-loading-wordpress-dashboard\/\" title=\"How to Fix a Slow Loading WordPress Dashboard (Step by Step)\">WordPress dashboard<\/a> to enter the app ID and secret. <\/p>\n<p>From here, you\u2019ll need to select an app type. Go ahead and choose \u2018Business\u2019 as the app type and click the \u2018Next\u2019 button.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"372\" alt=\"Choose your app type\" class=\"wp-image-137528\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1-300x164.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"372\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1.png\" alt=\"Choose your app type\" class=\"wp-image-137528\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/choose-your-app-type-1-300x164.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Next, you\u2019ll need to provide basic information about your app. <\/p>\n<p>You can enter a display name for your app, and be sure that the correct <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-create-a-free-business-email-address-in-5-minutes-step-by-step\/\" title=\"How to Create a Free Business Email Address in 5 Minutes (Step by Step)\">email address<\/a> appears under the \u2018App contact email\u2019 field. Facebook will automatically pick the email address of the account you\u2019re currently logged in as. <\/p>\n<p>There\u2019s also an option setting to choose a business account. You can leave this on \u2018No Business Manager account selected\u2019 and click the \u2018Create app\u2019 button. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"277\" alt=\"Enter basic information for app\" class=\"wp-image-137109\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app-300x122.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"277\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app.png\" alt=\"Enter basic information for app\" class=\"wp-image-137109\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-basic-information-for-app-300x122.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>A popup window will now appear where Facebook will ask you to re-enter your password. <\/p>\n<p>This is for security purposes to stop malicious activity on your account. Go ahead and enter your Facebook account password and click the \u2018Submit\u2019 button. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"246\" alt=\"Reenter your Facebook password\" class=\"wp-image-137113\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password-300x109.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"246\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password.png\" alt=\"Reenter your Facebook password\" class=\"wp-image-137113\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/reenter-your-facebook-password-300x109.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>After that, you\u2019ll see your app dashboard. <\/p>\n<p>From here, you can head to <strong>Settings \u00bb Basic<\/strong> from the menu on your left. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"329\" alt=\"Go to basic settings page\" class=\"wp-image-137130\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page-300x145.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"329\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page.png\" alt=\"Go to basic settings page\" class=\"wp-image-137130\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/go-to-basic-settings-page-300x145.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>On the Basic settings page, you will see the \u2018App ID\u2019 and \u2018App Secret.\u2019 <\/p>\n<p>You can now enter this information in the Like &amp; Share plugin settings in your WordPress dashboard. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"250\" alt=\"Copy the app ID and secret\" class=\"wp-image-137131\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret-300x110.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"250\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret.png\" alt=\"Copy the app ID and secret\" class=\"wp-image-137131\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-app-id-and-secret-300x110.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p><strong>Finish Up Customizing Your Facebook Like Button<\/strong><\/p>\n<p>First, copy the \u2018App ID\u2019 and head back to the tab or window where you have the <strong>Like &amp; Share \u00bb Settings <\/strong>page opened. Simply enter the \u2018App ID\u2019 in the respective fields. <\/p>\n<p>Now repeat the step by copying the \u2018App Secret\u2019 data from Meta for Developers page and pasting it into the Like &amp; Share plugin settings. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"370\" alt=\"Customize your Facebook like button\" class=\"wp-image-137132\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button-300x163.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"370\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button.png\" alt=\"Customize your Facebook like button\" class=\"wp-image-137132\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/customize-your-facebook-like-button-300x163.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Once you\u2019ve done that, you can choose whether to show the Facebook Like button along with the Profile URL and <a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-add-social-share-buttons-in-wordpress\/\" title=\"How to Add Social Share Buttons in WordPress (Beginner\u2019s Guide)\">Share buttons<\/a>. <\/p>\n<p>There are also settings to edit the Facebook Like button\u2019s size, its position before or after the content, and alignment.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"320\" alt=\"More customization options\" class=\"wp-image-137134\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options-300x141.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"320\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options.png\" alt=\"More customization options\" class=\"wp-image-137134\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/more-customization-options-300x141.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>If you have enabled the Profile URL button, then you can scroll down to the \u2018Profile URL Button\u2019 section and enter your Facebook username or ID.<\/p>\n<p>When you\u2019re done, don\u2019t forget to save your changes. <\/p>\n<p>Now, the plugin will automatically add a Facebook Like button to your WordPress website and position it based on your settings. <\/p>\n<p>You can also use the <code>[fb_button]<\/code> shortcode to add the Facebook Like button anywhere on your site. <\/p>\n<p>That\u2019s all! You can now visit your site and see the Like button on each post.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"328\" alt=\"Facebook like button preview\" class=\"wp-image-137139\" title=\"Like button in WordPress\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1-300x145.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"328\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1.png\" alt=\"Facebook like button preview\" class=\"wp-image-137139\" title=\"Like button in WordPress\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/facebook-like-button-preview-1-300x145.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<h4>Method 2: Manually Add Facebook Like Button in WordPress<\/h4>\n<p>Another way to add a Facebook Like button is by using <a href=\"https:\/\/www.wpbeginner.com\/plugins\/how-to-easily-add-custom-code-in-wordpress-without-breaking-your-site\/\" title=\"How to Easily Add Custom Code in WordPress [Without Breaking Your Site]\">custom code<\/a>. However, this method requires you to add the code directly in WordPress so we only recommend it for people who are comfortable editing code.<\/p>\n<p>With that in mind, we are going to use the free WPCode plugin to do so, which makes it simple for anyone to add code to their <a href=\"https:\/\/www.wpbeginner.com\/start-a-wordpress-blog\/\">WordPress blog<\/a>.<\/p>\n<p>First, you need to visit the <a title=\"Like Button\" href=\"https:\/\/developers.facebook.com\/docs\/plugins\/like-button\" target=\"_blank\" rel=\"nofollow noopener\">\u2018Like Button\u2019 page<\/a> on the Meta for Developers website and scroll down to the \u2018Like Button Configurator\u2019 section.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"306\" alt=\"Get code from Facebook developer site\" class=\"wp-image-137075\" title=\"Like button settings\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site-300x135.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"306\" src=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site.png\" alt=\"Get code from Facebook developer site\" class=\"wp-image-137075\" title=\"Like button settings\" srcset=\"https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/get-code-from-facebook-developer-site-300x135.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Next, you can enter the URL of your Facebook page in the \u2018URL to Like\u2019 field. This will be the page you\u2019d like to connect with the Facebook Like button.  <\/p>\n<p>After that, simply use the configuration to choose the Like button layout and size. You will also see a preview of the Like button. <\/p>\n<p>Once satisfied with the preview, click on the \u2018Get Code\u2019 button.<\/p>\n<p>This will bring up a popup showing you two pieces of code snippets under the \u2018JavaScript SDK\u2019 tab.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"352\" alt=\"Copy the SDK code\" class=\"wp-image-137077\" title=\"Facebook Like button code generator\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code-300x155.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"352\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code.png\" alt=\"Copy the SDK code\" class=\"wp-image-137077\" title=\"Facebook Like button code generator\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/copy-the-sdk-code-300x155.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Please note that if you directly add these code snippets to your <a href=\"https:\/\/www.wpbeginner.com\/showcase\/best-wordpress-themes\/\" title=\"2022\u2019s Most Popular and Best WordPress Themes (Expert Pick)\">WordPress theme<\/a>, it may break your website. Plus, the code snippets will be overwritten when you update the theme.<\/p>\n<p>An easier way of adding code to your is by using the <a href=\"https:\/\/wpcode.com\" target=\"_blank\" title=\"WPCode - WordPress Code Snippet Plugin\" rel=\"noopener\">WPCode<\/a> plugin. It lets you <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress\/\" title=\"Beginner\u2019s Guide to Pasting Snippets from the Web into WordPress\">paste code snippets to your website<\/a> and easily manage custom code without having to edit the theme files. <\/p>\n<p>First, you\u2019ll need to install and activate the <a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\" title=\"WPCode Free Code Snippet Plugin for WordPress\" target=\"_blank\" rel=\"noopener\">WPCode free plugin<\/a>. For more details, please see our guide on <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/step-by-step-guide-to-install-a-wordpress-plugin-for-beginners\/\" title=\"How to Install a WordPress Plugin \u2013 Step by Step for Beginners\">how to install a WordPress plugin<\/a>. <\/p>\n<p>Upon activation, you can head to <strong>Code Snippets \u00bb Header and Footer<\/strong>\u00a0from your WordPress dashboard. Now, you\u2019ll need to copy the first code snippet and add it to your WordPress theme\u2019s <code>header.php<\/code> file right after the <code>&lt;body&gt;<\/code> tag.<\/p>\n<p>Simply copy the code and enter it in the \u2018Body\u2019 section. Don\u2019t forget to click the \u2018Save Changes\u2019 button. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"277\" alt=\"Add first code to header section\" class=\"wp-image-137971\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section-300x122.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"277\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section.png\" alt=\"Add first code to header section\" class=\"wp-image-137971\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/add-first-code-to-header-section-300x122.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Next, you need to copy the second piece of code and paste it into your WordPress site to display the Like button.<\/p>\n<p>To start, you can go to <strong>Code Snippets \u00bb + Add Snippet<\/strong> from your WordPress admin panel or click the \u2018Add New\u2019 button. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"339\" alt=\"Click 'Add New Snippet' in WPCode\" class=\"wp-image-134670\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet-300x150.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"339\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet.png\" alt=\"Click 'Add New Snippet' in WPCode\" class=\"wp-image-134670\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/wpcode-add-new-snippet-300x150.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>On the next screen, WPCode will allow you to select a snippet from the pre-built library or add a new custom code. <\/p>\n<p>Go ahead and choose the \u2018Add Your Custom Code (New Snippet)\u2019 option and click the \u2018Use snippet\u2019 button. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"360\" alt=\"Add custom code in WPCode\" class=\"wp-image-134675\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet-300x159.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"360\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet.png\" alt=\"Add custom code in WPCode\" class=\"wp-image-134675\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2011\/09\/add-custom-code-new-snippet-300x159.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>After that, you can give a name for your custom code and enter the second code snippet under the \u2018Code Preview\u2019 section.<\/p>\n<p>Make sure to click the \u2018Code Type\u2019 dropdown menu and select \u2018HTML Snippet\u2019 as the code type.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"273\" alt=\"Enter second code and select code type\" class=\"wp-image-137974\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type-300x120.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"273\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type.png\" alt=\"Enter second code and select code type\" class=\"wp-image-137974\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/enter-second-code-and-select-code-type-300x120.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Next, you can scroll down to the \u2018Insertion\u2019 section and select where you\u2019d like the Facebook Like button to appear. For example, let\u2019s say you want it to appear before the content. <\/p>\n<p>Simply click the \u2018Location\u2019 dropdown menu and choose the <strong>Insert Before Content<\/strong> option under Page, Post, Custom Post Types. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"373\" alt=\"Select location of like button\" class=\"wp-image-137975\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button-300x165.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"373\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button.png\" alt=\"Select location of like button\" class=\"wp-image-137975\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button.png 680w, https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/select-location-of-like-button-300x165.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Once you\u2019re done, you can click the \u2018Save Snippet\u2019 button. <\/p>\n<p>You\u2019ll also have to click the toggle and switch it from Inactive to Active. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"306\" alt=\"Save and activate code snippet WPCode\" class=\"wp-image-134879\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode-300x135.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"306\" src=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode.png\" alt=\"Save and activate code snippet WPCode\" class=\"wp-image-134879\" srcset=\"https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode.png 680w, https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2011\/09\/save-snippet-wpcode-300x135.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>That\u2019s it, a Facebook Like button will appear on your website after entering the code.<\/p>\n<h4>What is Open Graph Metadata &amp; How to Add it to WordPress?<\/h4>\n<p>Open Graph is metadata that helps Facebook collect information about a <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/what-is-the-difference-between-posts-vs-pages-in-wordpress\/\" title=\"What is the Difference Between Posts vs. Pages in WordPress\">page or post <\/a>on your WordPress site. This data includes a thumbnail image, post\/page title, description, and author.<\/p>\n<p>Facebook is quite smart in pulling up the title and description fields. However, if your post has more than one image, then it may sometimes show an incorrect thumbnail when shared.<\/p>\n<p>If you are already using the <a href=\"https:\/\/aioseo.com\" target=\"_blank\" title=\"All in One SEO - WordPress SEO Plugin and Toolkit\" rel=\"noopener\">All in One SEO (AIOSEO)<\/a> plugin, then this can be easily fixed by visiting <strong><strong>All in One SEO \u00bb Social Networks<\/strong><\/strong> and clicking on the Facebook tab. <\/p>\n<p>Next, click the \u2018Upload or Select Image\u2019 button to set a default post Facebook image if your article doesn\u2019t have an open graph image. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"330\" alt=\"Upload default Facebook image\" class=\"wp-image-137144\" title=\"Facebook Open Graph\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1-300x146.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"330\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1.png\" alt=\"Upload default Facebook image\" class=\"wp-image-137144\" title=\"Facebook Open Graph\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1.png 680w, https:\/\/cdn4.wpbeginner.com\/wp-content\/uploads\/2010\/05\/upload-default-facebook-image-1-300x146.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Besides that, you can also configure an open graph image for each individual post or page. <\/p>\n<p>When you\u2019re editing a post, just scroll down to the AIOSEO Settings section in the <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/gutenberg-vs-wordpress-page-builders\/\" title=\"WordPress Block Editor vs Page Builders: What\u2019s the Difference?\">content editor<\/a>. Next, switch to the \u2018Social\u2019 tab and see a preview of your thumbnail. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"398\" alt=\"\" class=\"wp-image-106753\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing-300x176.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"398\" src=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing.png\" alt=\"\" class=\"wp-image-106753\" srcset=\"https:\/\/cdn.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2021\/12\/aioseo-product-social-sharing-300x176.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>Now scroll down to the \u2018Image Source\u2019 option, and you can then choose an open graph image for your post. <\/p>\n<p>For example, you can select the featured image, attached image, the first image in the content, or upload a custom image to be used as an open graph thumbnail. <\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"303\" alt=\"Image source for open graph\" class=\"wp-image-137537\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph-300x134.png 300w\" data-lazy-sizes=\"(max-width: 680px) 100vw, 680px\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph.png\"\/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"680\" height=\"303\" src=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph.png\" alt=\"Image source for open graph\" class=\"wp-image-137537\" srcset=\"https:\/\/cdn2.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph.png 680w, https:\/\/cdn3.wpbeginner.com\/wp-content\/uploads\/2010\/05\/image-source-for-open-graph-300x134.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\"\/><\/noscript><\/figure>\n<p>For more details and alternate ways to add open graph metadata, see our guide on <a title=\"How to Add Facebook Open Graph Meta Data in WordPress Themes\" href=\"https:\/\/www.wpbeginner.com\/wp-themes\/how-to-add-facebook-open-graph-meta-data-in-wordpress-themes\/\">how to add Facebook Open Graph metadata in WordPress<\/a>.<\/p>\n<p>We hope this article helped you learn how to add Facebook Like button in WordPress. You may also want to see our list of <a href=\"https:\/\/www.wpbeginner.com\/beginners-guide\/how-to-register-a-domain-name-simple-tip-to-get-it-for-free\/\" title=\"How to Properly Register a Domain Name (and get it for FREE) in 2022\">how to register a domain name<\/a> and the <a href=\"https:\/\/www.wpbeginner.com\/plugins\/best-social-media-plugins-for-wordpress\/\" title=\"16 Best Social Media Plugins for WordPress (2022)\">best social media plugins for WordPress<\/a>.<\/p>\n<p>If you liked this article, then please subscribe to our\u00a0<a href=\"https:\/\/youtube.com\/wpbeginner?sub_confirmation=1\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" title=\"Subscribe to WPBeginner YouTube Channel\">YouTube Channel<\/a>\u00a0for WordPress video tutorials. You can also find us on\u00a0<a href=\"https:\/\/twitter.com\/wpbeginner\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" title=\"Follow WPBeginner on Twitter\">Twitter<\/a>\u00a0and <a href=\"https:\/\/facebook.com\/wpbeginner\" target=\"_blank\" rel=\"noreferrer noopener nofollow\" title=\"Join WPBeginner Community on Facebook\">Facebook<\/a>.<\/p>\n<\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><br \/><a href=\"https:\/\/www.wpbeginner.com\/wp-tutorials\/how-to-add-facebook-like-button-in-wordpress\/\">source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do you want to add a Facebook Like button in WordPress? A Facebook Like button on your WordPress website can make it simple and easy for users to like and share your content. You can increase engagement and get more followers. In this article, we will show you how to add the Facebook Like button [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":816874,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[1551],"tags":[],"class_list":["post-816873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips-tricks-2"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/816873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/comments?post=816873"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/posts\/816873\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media\/816874"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/media?parent=816873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/categories?post=816873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/wp-json\/wp\/v2\/tags?post=816873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}