Wednesday, 20 April 2016

How to add Facebook Fan Page Widget on your Blog

How to add Facebook Fan Page Plugin

                     Since Facebook deprecated their old like box plugin for blog and websites has introduced the newer version “Facebook Page Plugin” widget for blog and websites. Adding “Facebook Page Plugin” to your blog attract more visitors to connect and share the page easily with readers Facebook social network. The Page Plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page. Let`s add Facebook Fan Page Widget/Facebook page plugin on your Blog. To do this all you need to go https://developers.facebook.com/docs/plugins/page-plugin and sign into Facebook developer website with your Facebook account first.

Recommended: What successful Blogger Do and Don't

                            Top Tips To Be A Successful Affiliate Marketer

                     Step 1: Now on the Facebook page plugin setup page put your Facebook Fan Page URL in Facebook Page URL place. In the Tabs place if you want to show your Facebook Fan Page timeline, messages or event on your Facebook Fan Page Plugin then put the value separated with (,) comma. Choose the width and height according to your need. It is a good idea to put the Facebook Page Plugin widget on your blog sidebar. You can choose the width from between 180 pixels to 500 pixels and the height should be the minimum of 70 pixels. Put a tick on Use Small Header, Adapt to plugin container width, Hide Cover Photo, and Show Friends Faces according to your need otherwise leave blank. A preview will show like the bellow screenshot. When you are satisfied with your widget configuration click on the “Get Code” tab to get the code which we will use to place the widget on our blog.

Fan page settings

                     Step 2: If you have any App ID then choose from Step 1 otherwise click on step 2 shown JavaScript SDK code to select and copy the code.

Recommended: Setting Up Feedburner Email Subscription and RSS feed on your blog


                           Fix error: The feed does not have subscriptions by email enabled

Get Code Screenshot

                     Step 3: Before you make any changes always keep a backup of your template. You can backup template from the Backup/Restore from the upper right under the Template settings or copy the whole template code and paste it to a notepad, so if you find any issue after making changes you can again use your backup template. Now go to blogger dashboard and click on Template then click on Edit HTML and find the opening <body> (Click inside HTML template and press CTRL+F, in the search box type <body>, Press enter) in your template and paste the copied JavaScript Code just bellow the opening <body>. Click on Save Template* to save the configuration.

Opening Body Screenshot

Recommended: Facebook Tips and How to Guide–Smart and Master Tricks


                        Step 4: After you save the template copy the HTML code from shown in Step 3 on "Get Code" popup window and place the code wherever you want. For example, we are configuring our blog sidebar to show the Facebook Page Plugin. To do that go to Layout from the blogger dashboard and click on “Add a Gadget” to add widget on your blog sidebar. Scroll and find “HTML/JavaScript” and click on plus (+) to add HTML/JavaScript widget. Paste the copied code in the Content box of HTML/JavaScript window from the Get Code popup window shown on Facebook developer page. Click on Save to add and show the Facebook Fan Page Plugin widget on your blog sidebar.

Adding Facebook Page Plugin on Sidebar

                      * If you find any error saving template after adding Facebook JavaScript SDK Code for Facebook Page Plugin. Then do not paste the JavaScript code in the template and paste the JavaScript Code on the “Add a gadget” “HTML/JavaScript” content box and paste the Step 3 HTML Code after the JavaScript in the content box.

                     I have tried to make this article “How to add Facebook Fan Page Widget To your Blog” as easy as possible to easily understand. If you do the above-mentioned step thoroughly hope you will not face any error. Share this article with your friend if you love this. Subscribe Digital Doubt to get stuff like this directly in your mailbox.

Author of DD | Technology Passionate | Electronics Engineer | Professional Blogger | Hobby - Travel | India | Quote - Love Life, Live Life.


EmoticonEmoticon