0

I'm developing a WordPress theme that has a sidebar and in it I've added the jetpack Facebook page widget.

I want to also add the Facebook customer chat plugin to the site.

The issue I'm having is that the rendered HTML for the customer chat plugin gets appended in the same context as the Facebook page widget which is causing a display bug - the plugin doesn't appear in the bottom right of the page, it sits just below the Facebook page plugin in the sidebar.

Is there a way to tell the Facebook SDK where to place the html for the chat plugin ?

I've looked through the API documentation but no dice.

Thanks!

Mihai
  • 133
  • 1
  • 14
  • The Facebook SDK is not responsible for _where_ the plugins show up. They show up in the place where you put the initial HTML code that the SDK transforms into the plugins. – CBroe May 17 '18 at 11:39
  • @CBroe that would make sense, but sadly it's not so. Or something is off in my case. https://layerblend.com/demo/alimo-health/ - here i have the facebook page in the sidebar, and as you can see, the chat plugin appears right beneath it (also in the html structure). If you access another page where the sidebar isn't visible (say a post https://layerblend.com/demo/alimo-health/2018/04/15/magic-green/ ) the plugin behaves, and appears in the bottom-right corner (also near the end of the HTML ). My code is the same - added the `
    ` (visible if you view page source)
     – Mihai May 17 '18 at 12:50
  • Yeah, this one seems to be special. The other social plugins are all supposed to live somewhere “in” a page, but this one is supposed to stay at a fixed position during scrolling. Inspecting the DOM of your example pages, it looks like the SDK appends the elements to the `#fb-root` element - and that resides inside your side bar (where you placed the like box.) Try and put `#fb-root` somewhere else - recommendation is just at the end of `body`. – CBroe May 17 '18 at 13:15
  • Already tried that. Sadly, same result. – Mihai May 17 '18 at 13:43
  • Can you provide an example of that as well, please? – CBroe May 17 '18 at 13:54
  • Because in your working example, the `#fb-root` element _is_ a child of body ... (Make sure that you have only one of those in your document; when copy&pasting the code the Facebook generator spits out, it is easy to accidentally put it into the document multiple times.) – CBroe May 17 '18 at 14:02

0 Answers0