[shea cParticipant]

Im trying to use the new facebook page thing they are implementing instead of the basic facebook like box.

To make it work, I have been instructed to add the javascript SDK to the page preferably after the head section. I have tried adding it to the custom Java section in the customizer but I am having no luck, can you please advise how to do this correctly.

this is the java section

<div id=”fb-root”></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=”ID”&version=v2.3″;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

and then the code added to make the box appear is

<div class=”fb-page” data-href=”https://www.facebook.com/jackscrabshack” data-hide-cover=”false” data-show-facepile=”true” data-show-posts=”true”></div>

this does not seem to be working, im also going to provide you with a link to the new page they are using.

I used to always use the facebook like box as a simple way to put the facebook feed on a site with the like button etc, it was an iframe. But it looks like they are killing support for this and making us switch to this new facebook page plugin, its not an actual plug in for wordpress.

Im sorry if this is confusing, im just trying to figure out how to word my question correctly.

Here is the link to the new thing they are doing

https://developers.facebook.com/docs/plugins/like-box-for-pages

Please let me know what you think, if my question is even understandable…

🙂

[Prasant RaiModerator]

Hello Shea,

Thanks for writing in.

Before you could implement Facebook like box on website, you need to create a Facebook app. Kindly login to the developer section of your Facebook account and create a web app. Unfortunately June 23rd 2015 onwards Like box plugin is going to be depreciated. Instead we recommend you to implement Facebook Page plugin.

https://developers.facebook.com/docs/plugins/page-plugin

Thanks.

[shea cParticipant]

Thats exactly what I’m asking, I have the app ID and everything, and want to know how to use the new page plugin with the theme. Where would I insert that Javascript SDK? I tried to put it in the custom Java section of the customizer and add the correct code to the page, but it does not display. Do I have to use a child theme to implement that page-plugin like you linked to or should it work right in the custom java section of the customizer

[ThaiModerator]

Hi There,
Please add following PHP code below into functions.php locates in child theme folder:

add_action( 'x_before_site_begin', 'x_print_fb_sdk' );
function x_print_fb_sdk(){
	?>
	<div id="fb-root"></div>
	<script>(function(d, s, id) {
	  var js, fjs = d.getElementsByTagName(s)[0];
	  if (d.getElementById(id)) return;
	  js = d.createElement(s); js.id = id;
	  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=your_FB_ID&version=v2.3";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>
	<?php
}

After that you can replace the your_FB_ID by your Facebook AppID.
Hope it helps.

[shea cParticipant]

That did the trick, thank you so much!

[ZeshanMember]

You’re welcome! 🙂

[GlebParticipant]

Is it possible to have more than one facebook page to have a like box on a website?

[GlebParticipant]

nevermind, figured it out!

[Prasant RaiModerator]

Glad you figured out 🙂

[Loren NParticipant]

Hi,
I’ve tried following these instructions to get the new Facebook page plugin working but it doesn’t work. Is there a specific place in the functions php file I should add the code above?

[Loren NParticipant]

Actually, never mind. I added the actual javascript code from Facebook (instead of your code above) and it worked.

[ZeshanMember]

Glad to hear that! Have a good day. 🙂

[Samer KParticipant]

Quick question, would a theme update override anything added to the funcions.php file?

🙂

[Prasant RaiModerator]

Hello Samer,

Thanks for writing in!

We always recommend our customer to setup Child theme before making any changes because that allows you to make code changes that won’t be overwritten when an X update is released. If you haven’t setup child theme we recommend you to do so and move all the code changes into that. For more information on setting up child theme please walk-through following tutorial:

https://community.theme.co/kb/how-to-setup-child-themes/

Thanks.

[Author]

Posts