XF 2.0 Tutorial - Add Facebook Page widget in side bar

[Dnyan]

Hello All,

Today i am sharing how to add Facebook page widget on forum at predefined positions.

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

if you are login in you fb account then you can see the page already listed and default content set as timeline.

You can change the page url which you want to show and tabs whatever you wanted as allowed by fb

Select appropriate options by ticking.

Then click on the Get Code.


After that code pop up will come and it will show 2 parts of it.


Copy both the codes.

Now login to your admin control panel
go to appearance > Widget and then click on add widget
then select HTML

In Widget Key area - write the good description which you can remember, it will be name of widget (Widget_facebook_page_plugin).

Tittle - write here what you want to see at top of fb page widget (Do Like Us on Facebook!)

Select the display position where you want to display this widget.
i used Forumlist: Sidebar, because i wanted to show it their.

Then last at below area in template paste that 2 copied code one below other and save it.

Above is pic of desktop view, widget look most beautiful in mobile view than desktop view.
Congrats your Facebook page widget is ready and being displayed on your forum.

You can use this method to create other widget, you can also use iframe tags too to display widget.

Hope this Tutorial will help member here to make this widget.

Now Enjoy!
make your FB, Twitter and other like this widgets on your own.

 

[Dnyan]

I would like to say thanks to @AndyB, i understood how to make html widget by reading his post at xF2 demo site.

 

[JoyFreak]

Thank you so much for this tutorial. Someone else is charging for this when its Free lol. How desperate!

 

[alpertunga688]

thanks

 

[Motobaka]

Thanks for sharing this, it has been very helpful. I´ve ran into a problem, the facebook thing does not always remain inside the container. This seems to happen randomly. Any suggestions as to what I´m doing wrong?

 

[Dnyan]

Add width parameter to widget code.

You xan easiley edit by going to fb dev page as shown in 1st picture of my post

 

[Motobaka]

Thanks!

 

[albertc.s]

thanks!!

 

[theinvisibleman]

Hi

I have followed this to the letter but when i go to save the widget i get:-

Oops! We ran into some problems. Please try again later. More error details may be in the browser console.

This seems to happen whenever I try to add any <script> tags

I'm no developer, so any help would be greatly received.

 

[Dnyan]

Do it correctly, it will work for sure.

I am too not a coder.

 

[theinvisibleman]

excellent thanks, after further digging i found out it was our server firewall blocking me from adding script tags! once whitelisted it now works.

Thanks for your prompt reply, you're a star.

 

[WxP]

Do this work again for you ??? i cant config like @Dnyan Deshmukh

 

[SyTry]

Working good for me

 

[WxP]

Yes i cant understand why one of my fanpage cant show on my webpage i have try to another and is ok...