Presence of social widgets on your blog can really help you in generating leads later.
It can improve the Trust and the social presence to your visitors. It is really recommended to engage with your visitors on social media.
Sometimes, you may need to turn your visitors into followers to make them stay with you.
For that, you can embed widgets to your site. Here I'm explaining how to install the Facebook widgets on your blog.
Steps to install Facebook widgets on your blog
So what are the type of widgets provided by Facebook to install on your blog?
I recommend you to install the page plugin. It can help you get some easy followers to your blog.
There are 2 possible ways to embed widgets from Facebook. They are installing the Javascript SDK or using simple iframe.
In the time of writing this article, there are more than five plugins available for you to install on your site. You can find all the Plugin Docs on the developer page.
Almost all the plugins work similarly.
So I will explain how to install one of the widgets. Let me go with a Page plugin.
Installing Facebook Page Plugin on your site
The page plugin is available only on the web.
Plugins like Share, Like, Save button has options to install on platforms like Android, iOS, web, etc...
Page Plugin can help you add components of your public Facebook page to your site. And you can let your visitors Like and Share your page without leaving from your site.
So to start to navigate to the Page Plugin page.
Now on the Plugin Page, you can generate code to install on your site.
For that, you need to provide the Facebook Page URL on the first field. Then type the required tab. The default tab is the timeline, and you can change it to events and messages tab.
You will be also able to use multiple tabs at a time by specifying "timeline,events,messages"
Now you can specify the height and width of the widget for your site, both having a minimum and maximum value.
You will have the options to toggle Use Small Header, Adapt to plugin container width, Hide Cover Photo, and Show Friend's Faces.
Configure these according to your design and specifications.
Now you can click on the Get Code button to generate the code for the widget.
You will see a popup box with the codes. In which one of the tabs shows the Javascript SDK and other method is to embed an iframe.
Installing Facebook Page Plugin using Javascript SDK
You need to follow 3 simple steps to install the plugin successfully on your site. The steps are easy to follow.
Step1: You need to select the AppID for the page widget. You can create one app if you haven't done it yet. Also, select the language you preferred to use.
You can also use the Javascript SDK to collect analytics of the Page Plugin on your site.
Step2: The second step is to copy the script given in the code box and paste it just below the <body> tag of your website.
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&autoLogAppEvents=1&version=v7.0&appId=xxxxxxxxxxxxxxxxxxxx" nonce="wNG2i7x7"></script>
Step3: Now you can select the code from the step3 and paste it anywhere on your website, you would like to show the Facebook Page Plugin.
<div class="fb-page" data-href="https://www.facebook.com/xxxxxxxxx" data-tabs="timeline" data-width="" data-height="" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/xxxxxxxx" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/xxxxxxxxxxx">YOUR PAGE NAME</a></blockquote></div>
That's it for installing Facebook Page Plugin using Javascript SDK on the web.
Installing Facebook Page Plugin using Iframe
If you are using this method, you will not need to load the javascript library from Facebook to your site.
Instead, you can simply copy-paste the widget code anywhere on your site. The plugin will appear there.
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2F<!--YOUR PAGE CUSTOM NAME-->&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=<!--YOUR APP ID-->" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
To do that navigate to the Iframe tab on the popup box. Choose the AppID, and copy the code and paste it on your site.
That's it for embedding Facebook Page widget using Iframe.
Also Read:
Final Words
Almost all other Facebook plugins can be installed similarly on the web.
Even though the speed of the website will be compromised when you install the Javascript SDK. It is recommended to make a Social presence on your site/blog to attract and engage more people.
Follow the steps provided above to install the plugins correctly on your site.
Post a Comment
To be published, comments must be reviewed by the administrator. You can also write Guest Blogging on our website.