We see in almost all types of blogs that a widget called Facebook Like Box has been added. Recently, the Facebook authorities have made the Facebook Page Plugin a lot more beautifully developed. With the new update, the Facebook Page Plugin is now loading on the blog in a much faster time.
Adding the Facebook Page Plugin to the blog enhances the beauty of the blog on the one hand and on the other hand the visitors of the blog can become aware of the Facebook page and like the Facebook page from the blog. If you want, you can easily add the Facebook Page Plugin to the right side of the blog.
Today I will show you how to add this updated Facebook Page Plugin. In the picture above you can see the demo of Facebook page Plugin. If you want to see the live demo of the Facebook Page Plugin, you can come to the bottom of the Landing Page of my blog by clicking on this link.
How To Create Facebook Page Plugin?
First of all, since it is basically a Facebook page plugin, you must have a Facebook page to add it to the blog. And if you don't have a Facebook page, you have to create a new Facebook page. In this case, I would personally suggest you to create a Facebook page in the name of your blog.
If you have a Facebook page, first login to your Facebook account. Then click on this link (Facebook Page Plugin) to create the Facebook Page Plugin. Just by clicking on this link, Facebook will take you to the following page.
See the image above because Facebook has automatically detected my Facebook page because I am logged in with my Facebook ID. As you can see in the picture above, there are many options. If you create the page plugin without changing the above settings, the plugin of your Facebook page will look like the image below.
The image above shows more information including the name, cover photo and post of my Facebook page. It looks a lot like mobile. Because usually this Facebook page plugin is used in the sidebar of the blog. And since the sidebar of the blog is small, it is showing according to the normal size of the sidebar. However, if you want, you can enlarge it from the settings.
If you want to change its settings, you can change it from the options in the image below.
Deleting the timeline under the tab in the image above will not show the posts of your Facebook page plugin. Then you can make it smaller or larger from the following Width and Height. In addition, there are four more options that you can understand yourself.
If you delete the timeline under the tab in the image above, the Facebook page plugin will show in the image below.
See in the image above how the plugin on your Facebook page looks like by deleting the Timeline under Tab.
How to add Facebook Page Plugin to Blog?
So far we have created the Facebook page plugin. Now we will see how to add the Facebook page plugin to the blog.
To add the Facebook page plugin to the blog, first click on the blue Get Code button in the lower left corner of the image above. Just click the Get Code button and you will see the codes in the image below.
Now you need to login to your blog. Login to the blog and from the template of your blog, click on Theme> Edit HTML and press Ctrl + F on the computer keyboard to search the </body> part. Then you have to save the template by placing the codes of the 1st part of the image just above the </body> tag.
Finally, if you add part 2 to an HTML and Javascripts widget from the layout of the sidebar of your blog, the Facebook page plugin will be added.
Easy way to add Facebook Page Plugin:
If you do not want to bother so much, you can follow our simple customized rules and add the Facebook page plugin to the blog.
First login to your blog. Then click on Template> Edit Html.
Then press Ctrl + F from the keyboard to search the </body> section. Now copy and paste the following codes on top of </body>. (Note: If the following Facebook Plugin is added to your blog, then there is no need to re-add it. But if it is not added then you must add it. Can).
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v6.0"></script>
Then click Layout from the Blogger Dashboard. Now click on Add Gadget from the Layout on the right side. See the image below -
Then click on HTML / JavaScript and copy and paste the following codes into the HTML / JavaScript field.
<div class="fb-page" data-href="https://www.facebook.com/freeSEOlearn" data-tabs="" data-width="" data-height="" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
Finally, if you save the widget, your Facebook page plugin will be added to the blog.
Customization:
- Enter the name of your Facebook page Url instead of FreeSEOlearn marked in red in the box above.
- If you want to make the header bigger, replace data-small-header = "true" with false.
- If you want to show cover photo, replace data-hide-cover = "true" with false.
- If you do not want to show the picture of the fan data-show-facepile = "true" instead of false.
