• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

14 May - 2018 By Paal Joachim 1 Comment
Last updated on: July 23, 2019

Here is the process of adding a Facebook Like Box that also shows timeline posts.

Go to: developers.facebook.com/docs/plugins/page-plugin

Facebook-Page-Plugin

Go through and fill in the options. Test it out and see what it looks like.
Here is an example I filled in using a clients Facebook page.

Facebook-Page-Plugin-filled-in

Clicking Get Code one can choose from JavaScript SDK or IFrame.

NB! Follow the description if you do not have a Facebook App ID. 
If you do not have an App ID which is needed for using the below code then go here and create one: developers.facebook.com/docs/apps/register
Login to Facebook. Optional I believe is to Create a Developer Account. Create a New Facebook App to create an App ID. After having gone through the dialog screens you will end up on a Add a Product page. Click See More Products on the bottom right to open up additional options. Click the bottom Social Plugins card (Read Docs link). Scroll through the page and notice the Page Plugin. Click web and notice we are right back at the Page Plugin page.

 

Adding the JavaScript SDK code

Facebook-Page-Plugin-JavaScript-code

Step 1: Select the page you want to use.

Step 1: Select the language you want to use. I selected Norwegian. I clicked Collect Analytics. As it gives me the option to use Facebook Analytics.

Step 2: The JavaScript code needs to be added into the header. This can be done in multiple ways depending on the theme you are using. It can be added through a theme panel, or directly into the header.php file. Another option would be to use the Header and Footer scripts plugin.

Step 3: Add the code to where you want to the Facebook Like Box and timeline to show up. I added the code into a HTML widget to use in the footer of the clients site.

 

Adding the IFrame code

Facebook-Page-Plugin-IFrame-code

Step 1: Choose the App ID.
Step 2: Place the code to where the Facebook Like Box is to be seen.

NB!
Notice that there is no option here to change the language. If you are using it with English then it is easier to just insert using the IFrame code to where you want the Facebook Like Box to be seen.

NB! 
“Enabling Messaging on your Page
To enable messaging on your Facebook page go to your Page Settings. In the row Messages check Allow people to contact my Page privately by showing the Message button (Direct Link: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).”

Look through the various options on how to modify the Facebook Like Box: developers.facebook.com/docs/plugins/page-plugin

NB! Error message:
Each time I have added the iframe code I get an error.
The error is allowTransparency which needs to be allowtransparency with a small t.
Change the capital T to a small t and the error should go away.

iframe-facebook-error

Here is the iFrame code that I use for the celias.no web site (in the footer widget):
<iframe src=”https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FCelias.no%2F&tabs=timeline&width=250&height=400&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=181995185785300″ width=”250″ height=”400″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowtransparency=”true” allow=”encrypted-media”></iframe>

 

Additional resources:
wpbeginner.com/wp-tutorials/how-to-add-facebook-page-plugin-in-wordpress/

Share this:

  • Email

Categories: Developer, Featured, How to, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. 1v1 lol says

    29 June - 2020

    Thank you very much for sharing the process of adding Like Box on Facebook, I will apply it now!

    Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.