How to Add and Customize Facebook Social Plugins – Facebook Page Plugin

Updated on

This article will walk you through to add and Customize Facebook Social Plugins – Facebook Page Plugin (formerly known as Facebook Like Box) for your website. I will also discuss the implementation of Facebook Like Button, Facebook Share Button, Facebook Save Button along with the Facebook Quote and Group Plugin on your website.

In recent years, content promotion and sharing via social media had been increased drastically. And when we talk about social media, Facebook comes first because of its 2 billion active users and higher user engagement.

Also, Facebook continuously evolving its tools and infrastructure to meet market demand. Therefore, in order to engage people and connect with them on similar or like-minded platforms, Facebook offers its Social Plugins such as Facebook Page Plugin formally known as Facebook Like Box.

How to Add and Customize Facebook Social Plugins - Facebook Page Plugin
How to Add and Customize Facebook Social Plugins

Facebook Social Plugins

Here, we are going to discuss the implementation of following Facebook Social Plugins to your website.

  1. Facebook Page Plugin – (formally Facebook Like Box)
  2. Facebook Like Button
  3. Facebook Share Button
  4. Facebook Save Button
  5. Facebook Quote and Facebook Group Plugin

What is Facebook Page Plugin (formally Facebook Like Box)

Facebook Page Plugin will help you to display any Facebook Page on your website. Visitors can like your Facebook Page directly from your website.

They can also share your Facebook page without leaving your website and can see the number of Page Likes, can click on your Page Button which is customizable. You can also showcase your Facebook Page Timeline, Messages, Events etc. using this plugin.

How to Add Facebook Page Plugin to your website

  1. After login to the Facebook, head over to Facebook Page Plugin webpage.
  2. After that, Enter your Facebook Page URL.
  3. In the Tabs option, Type what you want to display. You may type timeline, messages, events or any combination using a comma (,).
  4. Enter the plugin display width (px) between 180 to 500, default width of the plugin is 340px.
  5. Enter the plugin display height (px), default height is 500px and you may choose anything above 70px.
  6. In addition to that, you can select other options as per your preference, such as Header size, Adaptable width of the plugin to make Facebook Page Plugin responsive, Show or Hide Cover Photo and Show Friend’s Faces in the display.

After entering your Facebook Page URL, a preview of the plugin will be displayed as shown in the image below. I would suggest you try (change/edit) to all the options and finalize the same as per your likeability/requirement.

Add Facebook Page Plugin - Facebook Social Plugins
Add Facebook Page Plugin – Facebook Social Plugins
  1. Click on ‘Get Code’ button.
  2. After that, a popup will appear, it will ask you to select Facebook App Id or create a Facebook App, follow the screen instructions to create the Facebook App.
  3. Next, you can change the language if needed.
  4. Next step is to Copy the code of the first column and paste it in the Header of your Website (you can also enter this code in the footer to maintain your website speed).
  5. Then copy the code of the second column and paste it in your website’s widget or wherever you want to display Facebook Page Plugin.
  6. Save changes on your website and refresh the page, Facebook Page Plugin should be started displaying on your website.
Facebook Page Plugin Code - Facebook Like Box HTML Code
Facebook Page Plugin Code – Facebook Like Box HTML Code

How to Customize Facebook Page Plugin (formally Facebook Like Box)

Many times I have searched on the internet to get a Customizable Facebook Page Plugin code (Facebook Like Box HTML code). And believe me on this, after reading many lengthy tutorials, tips and tricks and so-called easy methods I got nothing, total waste of time.

So, I decided to work around some CSS implementation to customize the Facebook page plugin code. Here I am sharing the custom Facebook page plugin CSS codes for your use, you may improvise it and make your own as per your need.

You only need to use given below CSS code with Facebook Plugin code, that’s it. Just make it clear, I am using Facebook like box iframe code instead of JavaScript code for the customization.

How to Customize Facebook Page Plugin Code
How to Customize Facebook Page Plugin Code

How to use the Customizable code of Facebook Page Plugin

Code to Customize Facebook Page Plugin
Code to Customize Facebook Page Plugin
  1. First, you need to write the above-given code into a text widget or where you want to display Facebook Like Box.
  2. Second, You need to replace the URL in the above code with the URL of your website or blog. In <iframe element, replace technumero by your Facebook URL name.
    i.e. – Change xxxxxxxxxx with Your Facebook URL and your code should be look like this – https%3A%2F%2Fwww.facebook.com%2Fxxxxxxxxx
  3. After that, save your widget and refresh your website.

Now, if you want to change the background color. Select any color, find the right color code and change the background-color in <style> section.

Customize Facebook Page Plugin (formally Facebook Like Box)
Customize Facebook Page Plugin (formally Facebook Like Box)

In addition to that, one can use the same Facebook Page Plugin code (Facebook like box) for Blogger as well as for WordPress or any other web framework.

Facebook Page Plugin – WordPress plugin

There are plenty of options available in WordPress repository to add a Facebook page widget in your WordPress site. I would recommend the following two plugins:

  1. Responsive Facebook Page Plugin – This plugin is quite handy, easy to use and do what its name suggests. You can add a Responsive Facebook Page Plugin Widget to your website widget area, or you can generate a shortcode to use Facebook Like Box anywhere on your website. Download this plugin here.
  2. Easy Facebook Like Box (Facebook Page Plugin) – This plugin is highly customizable with a lot of options. You can also change the color of your Facebook feed widget in WordPress. It is available for free on WordPress plugin repository, the link is here.

What is Facebook Like Button and Facebook Share Button

Facebook Like Button and Facebook Like Button are useful to get your web page liked or shared directly from your website. This would be similar to the Like Us on Facebook buttons

you might have seen on various websites.

Facebook Like Button will allow your visitors to like your web page and share the same on facebook using Facebook Share Button right next to the like button.

A customized message can be added while sharing the webpage via share button and one can also choose (content privacy), with whom they want to share this piece of content on Facebook.

How to Add Facebook Like Button and Facebook Share Button on the website

The process of adding the Facebook Like Button & Facebook Share Button on your website is quite similar to that of Facebook Page Plugin implementation. The steps are following to get your Facebook like button code for your website, see the image for details.

  1. After login to the Facebook, go to the Facebook Like Button webpage.
  2. Head over to Like Button Configurator.
  3. Enter Webpage URL to like.
  4. After that, select the layout – standard, box_count, button_count and button
  5. Choose action type – like or recommend
  6. Finally, select the button size.
  7. Select other options as per your preference, such as add the Facebook Share Button and Show Friend’s Faces in the display for custom Facebook like button.

 

How to Add Facebook Like Button and Facebook Share Button
How to Add Facebook Like Button and Facebook Share Button

That is it. Now, click on the ‘Get Code’ button and insert this code to add Facebook Like Button & the Facebook Share Button on your website.

 

Types of Facebook Like Button and Facebook Share Button
Types of Facebook Like Button and Facebook Share Button
Types of Facebook Recommend Button and Facebook Share Button
Types of Facebook Recommend Button and Facebook Share Button

Facebook Like Button – WordPress Plugin

However, if you are not comfortable with the use of code on your website, you may add a Facebook Like Button WordPress plugin to your WordPress website. Therefore, here I am sharing the two most popular WordPress plugins…

  1. Facebook Button by BestWebSoft – You will be able to add a facebook button on your content, after or before. A shortcut can also be used to add FB like button on some custom location. The plugin can be downloaded from here.
  2. FB Page Promoter Lightbox – This WordPress plugin adds a Facebook Like Popup to your website. It is quite lite in size and easy to implement. You can read more about this plugin here.

What is Facebook Save Button

The Facebook Save Button allow your visitors to save your webpages to their private saved list on Facebook. It quite handy to bookmark some web page for further readings.

To add Facebook Save Button on your website, you have to
  1. Login and head over to Facebook save button page.
  2. Read the steps provided on the page then go to the Save Button Configurator.
  3. After that, Enter your URL, choose the button size and you are done.
  4. Get the code and insert it to your webpage where you want to display the Facebook Save Button.

You can follow similar procedures to add Facebook Quote Plugin and Facebook Group Plugin on your Blogger, WordPress or any other website.

Do let us know if you like this post? Feel free to suggest any point you want us to add/explain. Do share your queries in the comment section given below, we would be happy to answer your queries.

Interesting reads you might like…

Photo of author
Saurabh K
Saurabh K is a technology enthusiast and part-time blogger. He loves to explore the efficient use of technology and gadgets. He is an outlier and lensman. Add him in your social circle to know more.
Disclaimer: Affiliate links of some product(s) are being used on this page, if you follow the link and make a purchase, we may receive compensation from respective companies. This compensation comes at no additional cost to you.

5 thoughts on “How to Add and Customize Facebook Social Plugins – Facebook Page Plugin”

  1. Avatar of Saurabh K

    Hey Paula, I am glad that you found this post useful.

    Reply
  2. Avatar of Paula

    Thank you so much! I’ve been looking for something like this without any success. I finally got it!

    Reply
  3. Avatar of TheRock

    I want to know how to change font-color!

    Reply
    • Avatar of Saurabh K

      Hey, you can not change font-color in Facebook like box. Because it is pushing directly from Facebook servers.

      Reply
  4. Avatar of Ayutthaya

    Nice article. Thanks admin for sharing.

    Reply

Leave a Comment

Your email address and website details will not be published. Required fields are marked with *.