Strange display of Facebook widget

The recent changes in the Jetpack have caused a terrible display of the box with faces etc. too much margin and passings have been added making t look bad. Any suggestions as to how to get it back to its previous state?

Hi,
are you experiencing my same issues?

The latest update has also broken the font used in the facebook widget.
It’s now font-family: Times
Can we have the old font back please?

My same issues?

Same issue on my 2 websites… :/

Same here.

Hope the JetPack team have a look at this issue.

Thanks.

I think I’m having the same problem. For no apparent reason, the Facebook Page Plugin now outputs the following items in a serif typeface instead of the sans-serif typeface used by Facebook:

• The page name
• “### likes”
• “You and # friends like this.”

Also, the display of faces has changed its layout. Previously, all face images were on one line. Now, the last face image in the group wraps onto a second line.

UPDATE: I looked at the image posted by giammy677, and I’m seeing the same errors on my site that he documents.

So I’m not the only one? It is even more absurd that the Jetpack team did not let us know anything then!

I was able to reproduce the issue, but I’m afraid I won’t be able to help much, as the content of the Facebook Page Plugin Widget is hosted on Facebook.com. Only Facebook developers have control over the style of what’s inside that widget.

You can reproduce the issue in Facebook’s Page Plugin generator as well:
https://developers.facebook.com/docs/plugins/page-plugin

The bug was already reported by other Facebook users, and the Facebook Developers are looking into it. You can follow their progress and subscribe to the issue here:
https://developers.facebook.com/bugs/641328559359597/

Jeremy, thanks for your reply.

I maintain a couple of WordPress sites which use the jetpack facebook plugin.
Both demonstrate the same problem.
The simpler site is https://www.georgebeckett.co.uk
You should be able to see the text in the facebook plugin panel in the right navbar displayed in a serif font (Times).
Before the latest Jetpack plugin update, the text was displayed in the facebook sans-serif font.

I test your advice to reproduce the problem by pasting the facebook page address https://www.facebook.com/George-Beckett-Nurseries-225168430831447/
into https://developers.facebook.com/docs/plugins/page-plugin

The Page Plugin does not reproduce my problem. It displays the text in a sans-serif typeface, the way it used to be before the latest jetpack facebook plugin update

Any other suggestions as to how to correct the problem?

=====added later=====
Looking into it further, I see that the widget content is displayed inside an iframe hosted on facebook, so you are probably right that the problem isn’t in the jetpack code.
What could have changed recently?
And was it a coincidence that users first noticed it after the latest jetpack update?

Jereny
Further investigation shows that the preview on the developers page at https://developers.facebook.com/docs/plugins/page-plugin
is showing the correct sans-serif font.

If I press the Get Code button I see a warning that
This app is in Development Mode and not available publicly.

If I go ahead and copy the generated iframe code this is what I get:
<iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGeorge-Beckett-Nurseries-225168430831447%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=233035673558482" width="340" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

If I open that URL in its own window, the text is displayed in Times again.

Looking at the HMTL source code for the preview section of the developers page led me to try a variant of the URL above:
https://www.facebook.com/v2.6/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGeorge-Beckett-Nurseries-225168430831447%2F&tabs=timeline&width=340&height=500&small_header=true&adapt_container_width=true&hide_cover=false&show_facepile=false&appId=233035673558482

With the addition of the v2.6 in the URL, it displays OK.

Could it be that the Jetpack facebook plugin was amended to use code generated by the developers page at https://developers.facebook.com/docs/plugins/page-plugin, despite the under development status?

If I press the Get Code button I see a warning that
This app is in Development Mode and not available publicly.

That’s because you use your own app to generate the code. The Page Plugin widget has been available for quite some time now, and is available for everyone.

As mentioned in the bug report I mentioned in my last post, the styling issue isn’t consistent, and things will sometimes work. For example, your page doesn’t work for me right now, in Chrome:
https://i.wpne.ws/gKME
In Firefox, however, it works:
https://i.wpne.ws/gKN9

At this point, there really isn’t much you and I can do about it, short of commenting on the Facebook bug report to let them know the problem happens to more and more people, and that it should be prioritized. Feel free to do so!

Jeremy
thanks for your comments.
I get slightly different results.

The preview panel of the developers page displays fine for me in both Chrome and Firefox.

Looking at the page https://www.georgebeckett.co.uk/ ,
the text displayed in Chrome is clearly wrong because it’s a serif font.
The Firefox display looks better because it uses a san-serif font.

Closer analysis with Web Inspector/Web Developer tools reveals that the text is unstyled.
It’s displayed in the browser’s default font which (on my system) is “Times” for Chrome and “sans-serif” for Firefox.

After adding v2.6 to the iframe URL (see previous post), the text displays correctly.
Web Inspector shows that it is using a css file from a facebook server which sets
font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;

I’ll add this to the facebook bug report.

I just noticed that the font and layout of the Facebook Page Widget is back to what it was before: sans-serif typeface, etc.

Within the last 12 hours, Facebook updated the bug report to say that “We have a fix for this issue and it will be pushed on or before our next weekly release (Tuesday afternoon PST)”.

They appear to deployed the fix already. My two sites which displayed the problem are now looking fine again.