Adding Facebook like box to sidebar

BB Theme
1

Hi

What’s the way to add a Facebook Like box to the sidebar (widget)?

I’ve added this code to Customizer > Code > Header Code

<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/nl_NL/sdk.js#xfbml=1&version=v2.5&appId=307502249353971”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>

After that I add this code to the text widget of the sidebar:

<div class=“fb-page”><div class=“fb-xfbml-parse-ignore”>

Beaver Builder
</div></div>

When I refresh the page, I shortly see the text “Beaver Builder” but the box doesn’t appear. What’s the best way to do this in a WP Multisite environment?

Thanks!

2

<div class="fb-page" data-href="Beaver Builder; data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="Beaver Builder href="Beaver Builder Builder</a></blockquote></div></div>

3

When I paste this code into the text widget:

<div class="fb-page" data-href="https://www.facebook.com/netsensemarketing&quot; data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="Facebook href="Facebook - Marketing platform</a></blockquote></div></div>

… it gets transformed into this:

<div class="fb-page"><div class="fb-xfbml-parse-ignore"><blockquote cite="Facebook href="Facebook - Marketing platform</a></blockquote></div></div>

That’s probably the reason the box doesn’t show. How can I fix this please?

4

Hi Christof,

Where did you get that code from?
Also, is it possible for you to add the script you pasted into your first post again, but this time use the code tags, please. This way the code is formatted correctly and we can test it on our end.

Thanks,
Danny

5

Hi Danny

I generated it through the Facebook page:

I just took the Beaver Builder Facebook page as an example :slight_smile:

So I need to insert this code just after the <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/nl_NL/sdk.js#xfbml=1&version=v2.5&appId=307502249353971";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

And this code needs to be added where you want the box to appear, so I always paste it in a sidebar text widget:

<div class="fb-page" data-href="Beaver Builder; data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><div class="fb-xfbml-parse-ignore"><blockquote cite="Beaver Builder href="Beaver Builder Builder</a></blockquote></div></div>

I don’t know why but the box doesn’t appear. I always did it this way with other themes (paste code in functions.php and then in the text widget)

Thanks for your help!

Regards

Christof

6

Hey Christof,

I tried your code above, pasted the first one to the Header Code section in the customizer, then placed the other code to a Text Widget as well as on an HTML module and both works fine. Check the screenshot below for reference.

View post on imgur.com

Do you think you can share temp admin access to the site so we can check?

Ben

7

[Content Hidden]

8

Hey Christof,

So I went in to the site, added the code under Appearance > Customize > Code > Header Code. Created a new private page entitled BB Test Page, added the code for the content, and it works fine. Is there a specific page/place you need me to look at?

Ben

9

Hi Ben

Can you add it to the sidebar? I want to show it at the top of the sidebar.
Then nothing happens…

10

Ah! So that’s where the problem lies. It is just like you said, when placed inside the Text widget, some of the HTML gets stripped. This is not happening at all on my local dev. Can you try disabling all plugins except BB and see if you get the same thing?

Ben

11

Hi Ben

I disabled all plugins except the Beaver Builder plugin but I get the same error.
The code I paste into the widget gets stripped when I click the “save” button.

I use WP Multisite and at the “main” site, this error doesn’t occur… Any suggestions?

Regards

Christof

12

Is the main site using the same theme as the subsite in question? Do you think you can switch to a different theme real quick and see if you get the same thing?

Ben

13

Both sites use the Beaver builder theme with BB plugin

14

Hi Christof,

The issue is related to WordPress Multisite - https://wordpress.org/support/topic/site-admin-cant-add-code-to-widget

Apparently only Super Admins can add HTML code to text widgets. I recommend you ask this question on the WordPress support forums and see what they recommend.

Thanks,
Danny