{"id":32649,"date":"2021-12-15T15:00:37","date_gmt":"2021-12-15T14:00:37","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=32649"},"modified":"2023-07-11T15:02:20","modified_gmt":"2023-07-11T13:02:20","slug":"add-facebook-like-button-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/add-facebook-like-button-wordpress\/","title":{"rendered":"How to Add Facebook Like Button in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]With <a href=\"https:\/\/www.statista.com\/statistics\/272014\/global-social-networks-ranked-by-number-of-users\/\" target=\"_blank\" rel=\"noopener\">nearly 2.9 billion active users<\/a>, Facebook is still the most popular social network worldwide. So, whether you are a fan of it or not, you can\u2019t deny it is still one of the best ways of bringing in more website traffic, building a community, or increasing the revenue your website makes. Currently, there are <strong>many ways of connecting a WordPress website with the Facebook platform<\/strong>. These include <a href=\"https:\/\/qodeinteractive.com\/magazine\/auto-post-to-facebook-from-wordpress\/\">automatically posting to Facebook<\/a>, <a href=\"https:\/\/qodeinteractive.com\/magazine\/adding-facebook-comments-to-wordpress\/\">adding Facebook comments to WordPress<\/a>, or <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-add-woocommerce-store-to-facebook\/\">adding your WooCommerce store to Facebook<\/a>, among other things.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we will show you how to<strong> add the Facebook like button to WordPress<\/strong>, as one of the easier things you can do to reach a wider audience organically. This feature can be helpful to a multitude of WordPress businesses and blogs, which is why we decided to cover it.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Here are the methods we will be covering:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-facebook-like-button-using-plugin\">How to Add Facebook Like Button Using a Plugin<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#the-like-button-configurator\">The Like Button Configurator<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-facebook-like-button-using-javascript-sdk\">How to Add Facebook Like Button Using JavaScript SDK<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-to-add-facebook-like-button-using-iframe\">How to Add Facebook Like Button Using iFrame<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-facebook-like-button-using-plugin\"><\/a>How to Add Facebook Like Button Using a Plugin<\/h2>\n<p>[\/vc_column_text][vc_column_text]Since WordPress has a lot of quality plugins to choose from, looking for a suitable plugin that implements the desired functionality is<strong> the go-to way for the vast majority of WordPress users<\/strong>. With that in mind, we will cover the plugin method first.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this particular case, we have looked at a lot of plugins with a wide range of similar functionalities including reviewing, like, sharing, or bookmarking posts and pages as well as those that are made specifically for adding the Facebook like button. In the end, we have opted to showcase one of the latter.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/wordpress.org\/plugins\/wp-like-button\/\" target=\"_blank\" rel=\"noopener\">WP Like Button plugin<\/a> is <strong>a very straightforward plugin for adding the Facebook like button on your website<\/strong>. You can choose where you wish to display the like button, including your homepage, all pages, posts, and archive pages, as well as the possibility to restrict the choice further by excluding specific URLs. It comes with <strong>four like button layouts<\/strong> with preview available. Finally, while users can simply add the like button using the options provided, the plugin allows for some other advanced uses such as displaying the <a href=\"https:\/\/buzzvoice.com\/facebook\/post-likes-shares\/order\" target=\"_blank\" rel=\"noopener\">Facebook like<\/a> button in custom locations. We will cover all of this below. Let us begin.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]After <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-install-a-wordpress-plugin\/\">installing and activating the plugin<\/a>, <strong>navigate to the newly created WP Like Button section<\/strong> in the admin dashboard. Here you can find all the plugin settings needed to display the Facebook like button on pages and posts on your website. These settings are sorted into separate subsections, which we will quickly cover.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The first subsection allows you to <strong>choose where you wish to display the like button<\/strong> \u2013 your homepage, all pages, posts, archive pages, or to exclude certain pages or posts. You have multiple options, especially in conjunction with the exclude option. Apart from that, you can also choose whether you wish to <strong>display the like button on smaller screens or not<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the following section, you can insert an<strong> app ID or admin ID<\/strong>, if you have access to Facebook Insights to get the related data. Additionally, you can insert a<strong> default thumbnail<\/strong> that will be shown on Facebook and mark your website as <strong>kid-directed<\/strong>, if your website or its parts are intended for persons under the age of thirteen.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]While the option of <strong>setting a default fallback thumbnail is helpful<\/strong>, we chose not to use this option for the purposes of this article. Instead, we advise setting the default thumbnail and other metadata using a suitable SEO plugin. For more on this, we advise reading our article on <a href=\"https:\/\/qodeinteractive.com\/magazine\/facebook-open-graph-wordpress\/\">how to set Facebook Open Graph metadata in WordPress<\/a>. Having said that, let us continue with the overview of the options that the WP Like Button plugin provides.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In the following subsection, you can also see some advanced uses of the plugin by using the related shortcode and function. We will cover how these are used later.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The remaining subsections concern the creation of the like button. Firstly, you can <strong>choose whether the Facebook like button will be shown before or after the page\/post content<\/strong>. Then, you can choose the page\/post that the button will allow you to like. Specifically, <strong>you can opt that all pages and posts have their separate like buttons and like counts, or that all the links allow the visitors to like a singular URL<\/strong>, either your website or some other URL that you specify. Any of these options are useful and come down to personal preference. For this demonstration, we have opted to set the link to the <a href=\"https:\/\/qodeinteractive.com\/\">QodeInteractive<\/a> website and allow the share button as well, as you will later see.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With that being said, the remaining options allow you to choose<strong> the width of the like HTML element, its alignment with regards to the page\/post content, and the language in which the like and share button<\/strong> and all the surrounding messages are shown. Finally, in the Preview section, you will be able to choose the<strong> type of Facebook like button layout with its relevant options<\/strong> and have it previewed before opting for what you deem most suitable for the website. These options include the section layout, the color of the text within the buttons, button size, whether to like or recommend, show friends\u2019 faces, and include the share button, as well.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button.jpg\" class=\"attachment-full size-full\" alt=\"WP Like Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-Options.jpg\" class=\"attachment-full size-full\" alt=\"WP Like Button Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-Options-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-Options-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/WP-Like-Button-Options-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Having explained all the options, <strong>you will need to adjust them according to your needs<\/strong>. Afterward, <strong>press the \u201cSave Settings\u201d button<\/strong> at the bottom to save your option choices. Then, <strong>load a page or post where the Facebook like button is set to show<\/strong> for the given options that you chose. The result we got is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Post-Facebook-Like-and-Share-Button.jpg\" class=\"attachment-full size-full\" alt=\"Post Facebook Like and Share Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Post-Facebook-Like-and-Share-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Post-Facebook-Like-and-Share-Button-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Post-Facebook-Like-and-Share-Button-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Post-Facebook-Like-and-Share-Button-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As you can see, the plugin can be used in a very simple manner, by adjusting the settings and displaying the Facebook like button in a predefined location on pages and posts. However,<strong> the plugin offers some more advanced uses. These are the <em>[fblike]<\/em> shortcode and the <em>fb_like_button()<\/em> function<\/strong>. The advantage of using them is that you can insert the Facebook like button into custom locations, instead of being restricted to either before or after the content of a given page or post. However, they require a great deal of prior knowledge to be used properly. We will try to explain it below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Of the two, using the <em>[fblike]<\/em> shortcode is slightly easier and more known to intermediate WordPress users. To display the Facebook like button in a custom location on the website, you only need to <strong>insert the <em>[fblike]<\/em> shortcode call inside a shortcode-rendering element<\/strong>. This element depends on the page builder you are using on your website. For Gutenberg, it is the Shortcode block, Elementor uses the Text Editor and the WPBakery uses the Text Block element, while if you are using the Classic Editor, you can simply insert the shortcode call inside the editor.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As an example for this article, we will be using the Elementor plugin on one of the pages that were already created by Elementor and contain the Text Editor element.<strong> The shortcode call can be inserted in either of the tabs that the Text Editor element has \u2013 Visual or Text.<\/strong> We have included it in the Text tab below. That done, <strong>update the page<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor.jpg\" class=\"attachment-full size-full\" alt=\"FB Like Button Elementor Text Editor\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The result that we got is shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-Live-Preview.jpg\" class=\"attachment-full size-full\" alt=\"FB Like Button Elementor Text Editor Live Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-Live-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-Live-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-Live-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Like-Button-Elementor-Text-Editor-Live-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As an additional note, the flexibility of any shortcode can be further extended, as it can be included inside a Text widget. Therefore, this shortcode can be displayed in any widget area you see fit for displaying the Facebook like button. Since we have already covered how you can <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-shortcode-to-wordpress-widget\/\">include shortcodes into widget areas<\/a>, we suggest reading the linked article on how you can insert the<em> [fblike]<\/em> shortcode into a suitable widget area of your choice.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the plugin allows you to <strong>custom display the Facebook like button by calling the <em>fb_like_button()<\/em> function<\/strong>. In the past, this was mostly done by directly editing a template file. In recent years, this practice has fallen out of favor and the use of WordPress hooks has become standard. However, as this is a very advanced WordPress topic, we advise learning more on WordPress hooks, as well as what will be covered later in this article.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this particular case, to display the like button in a custom location, you would need to <strong>\u201chook\u201d the<em> fb_like_button()<\/em> function onto a suitable hook using the add_action() function<\/strong>. In other words, you need to use the following line of code:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">add_action( 'suitable-action-hook-here', 'fb_like_button' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]while <strong>replacing the suitable-action-hook-here with an actual action hook<\/strong>. Then, having replaced the action hook in this line of code, to display the like button in a custom location, you only need to place it inside the <em>functions.php<\/em> file of your child theme or a site-specific plugin.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"the-like-button-configurator\"><\/a>The Like Button Configurator<\/h2>\n<p>[\/vc_column_text][vc_column_text]Adding a Facebook like button to your WordPress website can also be accomplished using custom code. Even though you can achieve most of the functionalities of the plugin described above, this method is a lot more challenging and recommended only for advanced WordPress users. We will explain it below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, before we do that, we strongly suggest <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-manually-backup-wordpress-website\/\">making a backup of your website<\/a> as a precaution. Additionally, as you will need to insert some code via FTP, brushing up on <a href=\"https:\/\/qodeinteractive.com\/magazine\/how-to-use-ftp\/\">how to use FTP<\/a> is advised.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]First, <strong>visit Facebook\u2019s <a href=\"https:\/\/developers.facebook.com\/docs\/plugins\/like-button\/\" target=\"_blank\" rel=\"noopener\">Like button page<\/a><\/strong> and <strong>locate the Like Button Configurator section.<\/strong> Using this section, we will create the code which needs to be included in appropriate locations on your website. In this section,<strong> you will need to enter the URL of the page that you wish to like<\/strong>, the width of the whole like HTML element, its layout, action type, size of the button(s), and whether to include the share button as well. After entering your preferences,<strong> press the \u201cGet Code\u201d button<\/strong> to proceed.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"540\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Get-Code.jpg\" class=\"attachment-full size-full\" alt=\"Get Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Get-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Get-Code-300x167.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Get-Code-768x428.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Get-Code-620x346.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We have to mention two things before going to the following steps.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, the configurator won\u2019t let you proceed unless you<strong> specify an URL to Like<\/strong>, contrary to what we have read in most existing articles on this subject. Therefore, <strong>we advise entering either your website URL or a 3rd party link<\/strong> like your Facebook page link, as an example. We will explain how you can set the like button for separate pages\/posts later.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Secondly,<strong> the configurator will let you leave the Width field empty.<\/strong> However, make sure you enter the width of the like button layout as well. Otherwise, you <strong>will experience issues displaying it using the IFrame method<\/strong>, as the assumed width that will be used is 0px, making the HTML non-existent. Even though the same problem isn\u2019t present while using the JavaScript SDK method, we thought it was still worth noting.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]That said, we can proceed. At this point, you will see a popup window with two tabs \u2013 JavaScript SDK and IFrame, denoting two ways to implement the constructed Facebook like button. Both methods will be shown below but we leave the decision on which to use to you. <strong>We advise keeping the tab with the popup window open, as you will need to copy\/paste certain codes across tabs in either method.<\/strong> That said, let us continue.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-facebook-like-button-using-javascript-sdk\"><\/a>How to Add Facebook Like Button Using JavaScript SDK<\/h2>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;21px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-JavaScript-SDK.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code JavaScript SDK\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-JavaScript-SDK.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-JavaScript-SDK-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-JavaScript-SDK-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-JavaScript-SDK-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the JavaScript SDK tab, you will see <strong>two steps, each containing a piece of code<\/strong> and a relatively vague instruction of where to include it. The first part contains a script that enables the functionality, while the second part contains the HTML structure of the like element. But, while they seem very simple, <strong>knowing where to place them and how requires an advanced understanding<\/strong> of WordPress for the functionality to work properly. We will try to explain it below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, <strong>the part that includes the Facebook script should be included once, ideally right after the opening body tag, as noted in the tab<\/strong>. However, while most would assume that it requires editing the <em>header.php<\/em> file directly, we argue for a more advanced method of adding customization to WordPress \u2013 using suitable WordPress hooks. Let us explain what those are before going into detail about how to add the code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>WordPress hooks are placeholders in the code<\/strong> which advanced <strong>WordPress users can use to change existing functionalities or add new ones<\/strong>. WordPress hooks are divided into two categories \u2013 action hooks, used for adding new functionalities, and filter hooks, used to change existing ones.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To use WordPress hooks, <strong>you will need to write custom functions<\/strong>, called callback functions or callbacks, with the code which enables a given functionality. But, for it to work, the callback function needs to be \u201chooked onto\u201d a suitable WordPress hook. This is done using the <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_action\/\" target=\"_blank\" rel=\"noopener\">add_action()<\/a> function for action hooks and <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_filter\/\" target=\"_blank\" rel=\"noopener\">add_filter()<\/a> function for filter hooks.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Both functions accept the same four arguments: the name of the hook, the name of the callback function, its priority, and the maximum number of arguments that the callback function can accept, in that order. Of these, only the first two are used in most cases, assuming the default values for the remaining two.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, what makes this method difficult is the choice of the hook name for a given functionality. Specifically, every time you wish to implement new functionality or change an existing one, <strong>you will need to find a suitable WordPress hook<\/strong> on which you need to hook your callback function. Finding the appropriate hook requires advanced WordPress knowledge, as it could be part of core WordPress files, as well as theme and plugin files. Asking your theme or plugin authors for help in finding the most suitable one(s) is often the way to go, since they can be incredibly difficult to find otherwise.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Difficulty aside, using WordPress hooks can be quite beneficial, as opposed to directly editing a template file to achieve the same functionality. Instead, you should insert all the customization either in the functions.php file of your child theme or a <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-site-specific-plugin\/\">site-specific plugin<\/a>, where you can easily keep track of them. Furthermore, by using WordPress hooks in this process, you won\u2019t have to worry that your customization will be overridden by WordPress, theme, or plugin updates.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Having learned more about WordPress hooks, let us explain how you can use them to insert the first part of the code into a suitable location.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Copy-Custom-Code-JavaScript-SDK.jpg\" class=\"attachment-full size-full\" alt=\"Copy Custom Code JavaScript SDK\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Copy-Custom-Code-JavaScript-SDK.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Copy-Custom-Code-JavaScript-SDK-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Copy-Custom-Code-JavaScript-SDK-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Copy-Custom-Code-JavaScript-SDK-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]To do that, <strong>copy the code from Step 1<\/strong> and<strong> insert it into the following snippet<\/strong>, instead of the<em> &lt;!&#8211; Facebook SDK code goes here &#8211;&gt;<\/em> comment line.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_facebook_like_js_sdk() { ?&gt;\r\n&lt;!-- Facebook SDK code goes here --&gt;\r\n&lt;?php }\r\nadd_action( 'suitable-action-hook-goes-here', 'qode_add_facebook_like_js_sdk' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The only thing left to do is<strong> properly replacing the suitable-action-hook-goes-here part<\/strong>. As possible action hooks that you can use, we advise using <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_head\/\" target=\"_blank\" rel=\"noopener\">wp_head<\/a>, <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_footer\/\" target=\"_blank\" rel=\"noopener\">wp_footer<\/a>, or <a href=\"https:\/\/developer.wordpress.org\/reference\/hooks\/wp_body_open\/\" target=\"_blank\" rel=\"noopener\">wp_body_open<\/a>, as the most suitable one according to what was written within the popup window. However, as the wp_body_open hook has become part of the WordPress code relatively recently (since WordPress 5.2 update), some themes may not have included it in their code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, using either of the <strong>other two widely known action hooks<\/strong> is more suggested. Alternatively, you can also consult with your theme authors regarding a suitable action hook that you can use instead of the three we mentioned. Having said that, for this article, we have opted to use the wp_footer hook. Therefore, in our case, the code snippet would be the following:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_add_facebook_like_js_sdk() { ?&gt;\r\n&lt;!-- Facebook SDK code goes here --&gt;\r\n&lt;?php }\r\nadd_action( 'wp_footer', 'qode_add_facebook_like_js_sdk' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]with the &lt;!&#8211; Facebook SDK code goes here &#8211;&gt; comment line properly replaced.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Before getting into the second part of this first method of implementation, we have to add another helpful tip. The script used to display the buttons used the en_US language code, i.e. American English. But, if you wish to<strong> display all the components of Facebook\u2019s like button element in a different language<\/strong>, you will need to replace the en_US part with a suitable <a href=\"https:\/\/developers.facebook.com\/docs\/javascript\/internationalization#locales\" target=\"_blank\" rel=\"noopener\">language code<\/a>, i.e. locale.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Different-Language.jpg\" class=\"attachment-full size-full\" alt=\"Different Language\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Different-Language.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Different-Language-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Different-Language-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Different-Language-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That said, let us continue with our explanation.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As for <strong>Step 2<\/strong>, the HTML code that it contains<strong> can be added in two ways \u2013 using the Custom HTML element or by using WordPress hooks once more<\/strong>. We will cover both of them below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Using the <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-custom-html-page-to-wordpress\/\">Custom HTML element<\/a> is the more beginner-friendly solution of the two. With it, you could insert the code both in the content of your pages and posts, as well as in your widget areas using Custom HTML shortcode\/block and Custom HTML widget, respectively.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]As an example, we will explain how you do so with the Custom HTML block the Gutenberg plugin has. As such,<strong> copy the code in Step 2<\/strong> and <strong>open a new page or post<\/strong> on which you wish to display the Facebook like button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-Step-2.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code Step 2\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-Step-2.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-Step-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-Step-2-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-Step-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can also create a new page or post if you don\u2019t wish to edit any existing page\/post. To add the code,<strong> insert the Custom HTML block<\/strong> in a part of the content where you wish to display the like button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>insert the copied code into the Custom HTML block<\/strong> and <strong>update the page\/post.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"461\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-300x143.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-768x365.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-620x295.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Then, <strong>check the frontend of that page\/post<\/strong>. As an example of how it could look, we leave you with the following screenshot.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Custom Code HTML Block Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-Preview.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-Preview-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Custom-Code-HTML-Block-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In this example, we have demonstrated how you can add the Facebook like button HTML which points to an URL that is important to your website. However, you can slightly tweak this method to <strong>add a separate like button to each page\/post<\/strong> with a separate like counter instead of liking one external URL only. To do that, <strong>after performing Step 1<\/strong>, make a slight change to the previously described Step 2.<strong> You need to alter the like URL, located in the data-href attribute of the HTML code given in Step 2<\/strong>. You will need to do so for every page\/post which contains the Step 2 HTML code.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"456\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Replace-URL.jpg\" class=\"attachment-full size-full\" alt=\"Replace URL\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Replace-URL.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Replace-URL-300x141.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Replace-URL-768x361.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Replace-URL-620x292.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Using this method, you can achieve the same flexibility as the previously described plugin \u2013 i.e. you can add the like button which points to your website or some other link, or have separate like buttons tied to separate pages\/posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, if you don\u2019t need this flexibility, this method might be too tedious for you, as you will need to add the HTML code mentioned in step 2 every single time and change the data-href attribute if needed. Instead, if you want to <strong>enable the liking of a singular URL<\/strong> (website URL or some other URL), it would be best if you could add the Step 2 code only once and that it is<strong> applied site-wide<\/strong>. Thankfully, that is <strong>possible using WordPress hooks<\/strong>, as well. Here is an example of code that you could use, in that case:[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_facebook_like_html_code() { ?&gt;\r\n&lt;!-- Facebook like HTML code goes here --&gt;\r\n&lt;?php }\r\nadd_action( 'suitable-action-hook-goes-here', 'qode_display_facebook_like_html_code' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]But, this is not a fully working example. For it to work properly, you need to<strong> replace the comment line and the suitable-action-hook-goes-here placeholder<\/strong>. While the comment line is easily replaced with the HTML code found in Step 2, <strong>finding a suitable action hook<\/strong> to use instead of the placeholder is less obvious. In most cases, you should use a theme-specific action hook to display the Facebook like button on all pages and posts.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Therefore, to figure out what that action hook is in your case, you should<strong> consult your theme\u2019s developer<\/strong>. Then, after replacing both suggested parts, insert the code either into the<em> functions.php<\/em> file or site-specific plugin, as previously mentioned.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-to-add-facebook-like-button-using-iframe\"><\/a>How to Add Facebook Like Button Using IFrame<\/h2>\n<p>[\/vc_column_text][vc_column_text]Even though it is very similar to the JavaScript SDK method, we will also cover the IFrame method in detail. The difference between the two is that <strong>the IFrame method only has a single step \u2013 adding the iframe code<\/strong> whenever you want it to appear on the page\/post. It is as if we only performed Step 2 from the previous method.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For that reason, it is more appealing for less technically skilled WordPress users, since you don\u2019t need to deal with WordPress hooks if you don\u2019t want to. Instead, you can<strong> insert this iframe code inside the content of a page or post using the Custom HTML element<\/strong>. For Gutenberg users, that is the Custom HTML block, while for others that is the default Custom HTML shortcode or widget.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]However, before delving into how you can add the iframe to your WordPress website, we must mention the one downside of this method. By using the iframe method,<strong> you won\u2019t be able to connect your website with Facebook Insights<\/strong> to get its data. You need to decide which of the two methods you will use to add the Facebook like button to your WordPress website. Having said that, let us quickly explain the process of adding the iframe code.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Similar to our instructions given above, we will showcase the Gutenberg case only, as adding the same code inside any other Custom HTML element is equally easy. To do that, <strong>copy the code from the IFrame tab<\/strong> and <strong>open a page\/post where you wish to add that code.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/IFrame-Code.jpg\" class=\"attachment-full size-full\" alt=\"IFrame Code\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/IFrame-Code.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/IFrame-Code-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/IFrame-Code-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/IFrame-Code-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Add a Custom HTML block<\/strong> to that page\/post in the desired location and <strong>paste the previously copied code.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg\" class=\"attachment-full size-full\" alt=\"Add HTML Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/04\/Add-HTML-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]After doing so, you will see a similar result to the one we have gotten, shown below.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Iframe-Like.jpg\" class=\"attachment-full size-full\" alt=\"FB Iframe Like\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Iframe-Like.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Iframe-Like-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Iframe-Like-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/FB-Iframe-Like-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]As with the previous method,<strong> having a single URL that can be liked is a lot easier to implement<\/strong>, as you can insert the same iframe code on all your pages\/posts where you wish to display the like button. It is what we have done as the example for this article, with the link leading to the QodeInteractive website. But, you can also set individual pages\/posts to be liked.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Needless to say, <strong>you will need to change the URL in the iframe code<\/strong> each time you wish to insert it. Even though <strong>it can be changed directly in the code<\/strong>, we advise <strong>recreating the iframe code for the given link using Facebook\u2019s Like Button Configurator<\/strong> tool instead to avoid any mistakes while doing so. And, while adding the Facebook like button using the iframe code is as simple as it seems, there are 2 notices we must add.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Firstly, as seen on the screenshot above, the Like button section has been displayed using the native language, which was Serbian, in our case. While it is not as obvious as in the 1st method, there is a way to control this feature, i.e. <strong>to choose in which language the buttons and text are displayed<\/strong>. Once more, this involves editing the code to include the language preference. In this case, it means <strong>inserting the \u201clocale=ll_CC&amp;\u201d label after the \u201clike.php?\u201d part<\/strong> <strong>and before the \u201chref=\u201d part<\/strong>. In doing so, the ll_CC locale placeholder needs to be replaced with an appropriate locale code. For example, if you use es_ES for the Spanish from Spain, you will see the following result, shown below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"433\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Language.jpg\" class=\"attachment-full size-full\" alt=\"Language\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Language.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Language-300x134.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Language-768x343.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Language-620x277.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Test-Post-Language.jpg\" class=\"attachment-full size-full\" alt=\"Test Post Language\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Test-Post-Language.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Test-Post-Language-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Test-Post-Language-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/12\/Test-Post-Language-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Finally, while we said that WordPress hooks aren\u2019t necessary while using this method, they can still be used. You can <strong>insert a singular PHP code which displays the iframe on all your pages and posts<\/strong>. Of course, this method should be used <strong>if you want your visitors to like a singular URL<\/strong> \u2013 either the website URL or some other you specify. As with the previous method, it involves using a code similar to the one shown below.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">function qode_display_facebook_like_iframe_code() { ?&gt;\r\n&lt;!-- IFrame code goes here --&gt;\r\n&lt;?php }\r\nadd_action( 'suitable-action-hook-goes-here', 'qode_display_facebook_like_iframe_code' );<\/pre>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For it to work, you need to<strong> replace the &lt;!&#8211; IFrame code goes here &#8211;&gt; comment<\/strong> with the iframe code and replace the suitable-action-hook-goes-here placeholder with a suitable action hook. And, if you opt for this method,<strong> we advise asking your theme authors for help<\/strong> in finding that action hook.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Final Thoughts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Connecting your WordPress website with Facebook is one of the greatest ways of increasing the website\u2019s audience and expanding your business and reach. In this article, we have explained how you can add the Facebook like button as one of the steps in this process. While most of the article is technically oriented, we have also elaborated on how you can achieve this feature only using the options of the WP Like Button plugin. Therefore, a wide range of WordPress users can review this article and implement a method that they are most comfortable with.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]On the other hand, intermediate and advanced users will find a lot of value in the article, as we have covered some of the more advanced WordPress concepts in the article. Furthermore, we have made sure to include tips and tricks that will help with the implementation of the custom code method. Therefore, we are sure that you will be able to add the Facebook like button using either of the methods that were covered. Finally, as the Facebook like button is a means of interacting with and expanding your audience that could benefit a multitude of WordPress websites, we strongly suggest bookmarking this article for future use.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Expand your social following by adding the Facebook like button to your WordPress website &#8211; we will show you how.<\/p>\n","protected":false},"author":11229,"featured_media":32695,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[121,26,4,13],"class_list":["post-32649","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-facebook","tag-social","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32649","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/11229"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=32649"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/32649\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/32695"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=32649"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=32649"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=32649"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}