Fixed Inconsistent XF behavior with Facebook SDK

abdfahim

Well-known member
I am having an issue with Facebook page plugin and XF 1.5 responsive mobile view. The problem only occurs when user is logged in. Also, this occurs only with XF 1.5 responsive view, not with any old XF version.

Here is the summary, tested with XF 1.3 and 1.5

1. XF 1.3 - No issue (responsive, non-responsive, logged in, logged out)
2. XF 1.5 - Only have issue with responsive view while user is logged in

The issue is resolved when I set
1. XenForo.Facebook.forceInit = false in page_container_js_body template, AND
2. Add the original FB SDK code after <body> tag in page_container template
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/en_US/sdk.js#xfbml=1&version=v2.8&appId=1111111111";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
So, I believe there is some issue in initializing Facebook SDK in responsive view in XF 1.5.

EXAMPLE

I added following code snippet in ad_sidebar_below_visitor_panel to show the FB page plugin in the sidebar

Code:
<div class="fb-page" data-href="https://www.facebook.com/mylibrarymanager" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="false"><blockquote cite="https://www.facebook.com/mylibrarymanager" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/mylibrarymanager">My Library Manager</a></blockquote></div>
FB page plugin is non-responsive, but it adapts to the parent container width when data-adapt-container-width is enabled (so you have to refresh the page each time you change browser size).

Below are some snapshots (all are tested with out-of-the-box Xenforo installation with above mentioned modification only)

Xenforo 1.3 and Xenforo 1.5 - Desktop view - Logged In

Working as expected

xf13-fs-li.PNG



Xenforo 1.3 and Xenforo 1.5 - Desktop view - Logged Out

Working as expected

xf13-fs-lo.PNG


Xenforo 1.3 and Xenforo 1.5 - Mobile view - Logged Out

Working as expected

xf15-mb-lo.PNG


Xenforo 1.3 - Mobile view - Logged In

Working as expected

xf13-mb-li.PNG


Xenforo 1.5 - Mobile view - Logged In

Facebook page plugin overflows the parent container, with width of 340px (which is the default/fall back width of FB page plugin block when it fails to calculate container width, as I understood from FB SDK)

xf15-mb-li.PNG


Xenforo 1.5 - Mobile view - Logged In (after adding Facebook SDK manually)

Works as expected

xf15-mb-li-mod.PNG
 
Last edited:

Mike

XenForo developer
Staff member
This is fixed now. It involved specific conditions triggering a double FBML parse which led to Facebook's JS not sizing something correctly (not sure why in that case).
 

abdfahim

Well-known member
Hi @Mike, just to confirm, when you said it is fixed, was it fixed in 1.5.11? Because I checked in 1.5.10 and it was not.
 
Last edited:

abdfahim

Well-known member
Oh, thanks a lot for the confirmation.

(Btw, I tested in 1.5.10, not 1.5.7, edited last post to correct)
 
Top