Topic: Installing Facebook Page code

Tagged: x

Author

Posts
November 6, 2016 at 3:21 am #1245675
Alex
Participant
Hello,

I’m trying to install the Facebook page code into my site to show the widget:

http://take.ms/6NyHZ

Here’s the 2 parts of the code:

1 (to embed into the page right after the opening <body> tag)
```
<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&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
```
2 (to put in the sidebar text widget)

<div class="fb-page" data-href="https://www.facebook.com/Playing-Writer-951275514978760/" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="https://www.facebook.com/Playing-Writer-951275514978760/"><a href="https://www.facebook.com/Playing-Writer-951275514978760/">Playing Writer</a></blockquote></div>

The first code I put without <script> in the Custom section (JavaScript field) in the Customizer like this:
```
<div id="fb-root"></div>
(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&version=v2.8";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk')); 
```
But the widget on the front-end looks like this:

http://take.ms/piadZ

So it’s broken. 🙁 Could you help me with getting it right?

Here’s the link where you can see it live: http://playingwriter.com/blog/

Thanks!

—
Alex
November 6, 2016 at 5:26 am #1245773
Thai
Moderator
Hi Alex,

Please add the following code under functions.php file locates in your child theme:
```
add_action( 'x_before_site_begin', 'x_print_fb_scripts' );
function x_print_fb_scripts(){
	?>
	<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&version=v2.8";
	  fjs.parentNode.insertBefore(js, fjs);
	}(document, 'script', 'facebook-jssdk'));</script>	
	<?php
}
```
Then let us know how it goes!
November 10, 2016 at 11:17 am #1251963

Alex
Participant

Hello Thai,

Thank you very much for your help! The code fixed the issue and now I can see the Facebook widget:

http://take.ms/vSwqe

But there’s some strange blank space above the widget, as you can see from the screenshot. Could you help me get rid of that too?

Thanks.

—
Alex

November 10, 2016 at 2:49 pm #1252263

Jade
Moderator

HI Alex,

I checked your site but I can’t seem to find the empty space above the FB widget.

Kindly try to clear your cache.

November 11, 2016 at 5:44 am #1253202

Alex
Participant

Hello,

I cleared the cache and found my widget not working at all:

http://take.ms/F00ni

As it was before.

And I have this page where I added the widget via Raw Content element:

http://playingwriter.com/thank-you-for-subscribing/

But it doesn’t work here too.

Could you help me?

Thanks.

—
Alex

November 11, 2016 at 9:54 am #1253428

Lely
Moderator

Hello Alex,

Since we have added the code already via your child theme, please remove it from Appearance > Customize> Custom > Edit Global Javascript. The code suggested by Thai will add it perfectly on the exact location. Adding it in the customizer is not recommended because it will cause error. See this:http://screencast-o-matic.com/watch/cDXXoMj97E

Hope this helps.

November 15, 2016 at 6:55 am #1257844

Alex
Participant

Hello Lely,

Thank you very much! That helped a lot.

—
Alex

November 15, 2016 at 7:55 am #1257913

Christian
Moderator

You’re welcome.
Author

Posts

<script> jQuery(function($){ $("#no-reply-1245675 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>