Facebook Embeds No Longer Work on WordPress?
-
Over the past week, I’ve noticed that Facebook embeds are no longer rending correctly on WordPress starting on or about March 24.
A Facebook embed after the 24th now only shows a hyperlinked “Post by [Page / Profile]”.
This is not just on my site. It’s also happening with my competitors and colleagues who are running different sites on different servers – all WordPress-based.
Looking at a post of mine from March 14 – the Facebook embeds work fine. Then when I go to a post on March 24, the embed fails to render….
On my site, I drop the embed code while in text (formerly HTML) mode. I’ve also done the URL on a single line method with the lines above and below clear of all text and that too fails out since March 24.
-
Where exactly are you getting the embed code from?
Also, would you please give us specific links to a post where the embed works, and a post where the embed fails?
If you look at this post:
http://us4palin.com/happy-77th-birthday-chuck-heath-sr/
I embedded the Facebook and it shows post by and that’s it. This was on March 24 when the problem started.
Now…if we go to this post….
http://us4palin.com/bristol-palin-dakota-meyer-engaged/
All the Facebook embeds work just fine. This is March 14.
I’m getting the embeds straight from Facebook. I copy the code and paste it in text / html mode.
On the failed posts, I also tried the URL on the blank line – with a clean line above and below – and it would not even embed.
Facebook changed their API.
Here’s the code for the post that failed….
<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.0"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sarahpalin/posts/10153196675008588" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/sarahpalin/posts/10153196675008588">Post</a> by <a href="https://www.facebook.com/sarahpalin">Sarah Palin</a>.</div></div>Here’s code from the first embed on the March 14 post that worked…
<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/SgtDakotaMeyer/posts/928241257215716" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/SgtDakotaMeyer/posts/928241257215716">Post</a> by <a href="https://www.facebook.com/SgtDakotaMeyer">Dakota Meyer</a>.</div></div>I tested a new embed in an unpublished post and previewed and it’s still failing out.
My competition has started using plugins to kludge the embeds with proprietary shortcodes. I don’t want to go there when WordPress was supporting these embeds native without the need for a plugin.
Well, there’s a difference in terminology first. If you need to use full embed code, then WordPress doesn’t support the embeds natively.
An embed code is supposed to work anywhere, regardless of support, it’s HTML that injects the content.
A native WordPress embed, specifically these https://codex.wordpress.org/Embeds , allows you to just enter the URL of the content to embed, and WordPress takes care of the rest.
Facebook has never been a native embed under WordPress.
Basically, Facebook is in total control of their embeds in this case. They provide the HTML of the content to inject, and you paste it in. It should be that simple, the HTML they give you should work.
I just tried both myself, and the Sarah Palin one does indeed fail for me too, and Chrome’s JavaScript console reports an error coming from Facebook’s embed code:
Uncaught Error: invalid version specifiedsdk.js:105 window.FB.j.assertValidVersionsdk.js:131 rsdk.js:131 (anonymous function)sdk.js:37 wsdk.js:131 (anonymous function)I compared the two and noticed that Sarah Palin has:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0Whereas Dakota Meyer has:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"If I swap that with Sarah Palin’s, resulting in this:
<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/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/sarahpalin/posts/10153196675008588" data-width="466"><div class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/sarahpalin/posts/10153196675008588">Post</a> by <a href="https://www.facebook.com/sarahpalin">Sarah Palin</a>.</div></div>It works perfectly.
I suspect Facebook has fouled something up in their new embed code, this definitely a Facebook problem and not a WordPress problem, and I recommend contacting Facebook about this.
James,
Thank you for clarifying and explaining that. Per your recommendation, I have just contacted Facebook. I would like to leave this open since it is a matter of how their embed code interacts with WordPress.
It would be a matter of how their debug code interacts anything, that code would fail on Drupal, Joomla, Ghost, even a static HTML site.
There is no problem with WordPress here.
When you paste code like that, it’s the browser that renders it. WordPress does not touch, modify, or interact with it in any way.
I solved it….I can’t speak for Joomla, Drupal, etc. but here is how the new FB embed works with WordPress.
You must put this script…
<script>window.fbAsyncInit = function() { FB.init({ xfbml : true, version : 'v2.3' }); }; (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"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>In the HEADER for your Pages and Single Post template on your Theme….or you can manually put it in HTML on your post. Generally, JavaScripts should be loaded in the footer, because head loading slows the server down, but with this script it will fail in the footer. It must be in the head.
I have placed the script in my theme template and if you go to the March 24th post above, it now works correctly.
You do not need a plugin for Facebook embeds. Load the JDK script as described above.
That script should be inserted by the javascript called in Facebook’s embed, otherwise you’re saying that Facebook expects every WordPress user to add that script to their themes in order to embed Facebook’s content, which would be incredibly pretentious on their part.
Also, inserting that in a theme will execute the script on every pageload, whether an embed is present or not.
Have you talked to Facebook about this yet? The problem is definitely theirs to fix.
Really, this is something Facebook can and should fix in a matter of minutes without you having to add anything extra to your theme.
I have contacted Facebook, but they have not responded to my support request.
The script can be inserted on a per-story basis – in the HTML at the top of the page – but that requires keeping it in a text file and remembering to drop it in each time…but that saves you from having to load it into the theme and having it execute on each page load.
Are you continuing to have this problem with new fresh embeds, with grabbed today for example?
As long as I put that script either in the theme or per story, the embed loads. Take the script out – the embed fails. Right now, I have the embed for single posts and pages – but not the home page, since the home is only photos and excerpts.
And that’s for all embeds since, like any embed you would generate from a new story today, not just the same Palin one from above?
Edit: Never mind, I just tried one, and it similarly failed:
<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.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script><div class="fb-post" data-href="https://www.facebook.com/WhiteHouse/posts/10153353113559238:0" data-width="500"><div class="fb-xfbml-parse-ignore"><blockquote cite="https://www.facebook.com/WhiteHouse/posts/10153353113559238:0"><p>120,915 Americans signed a We The People petition calling for a ban on conversion therapy for minors. We agree.Read...</p>Posted by <a href="https://www.facebook.com/WhiteHouse">The White House</a> on <a href="https://www.facebook.com/WhiteHouse/posts/10153353113559238:0">Wednesday, April 8, 2015</a></blockquote></div></div>Console again reported the same “Uncaught Error: invalid version specified”.
Similar to above, if I replace:
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.3"with:
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"it works just fine.
Sounds like Facebook needs to work out some bugs with it’s new v2.x sdk.js. I hope they notice your support request soon.
Add us to that list. Identtical problem began happening with us in that same timeframe. Devitor, I did use your script fix and it has given a temporary workaround for now. But agree, hope FB fixes this soon. We embed all of the time from our social pages and others that we work with.
TI’ve been having the same problem lately. Old posts had embedded Facebook posts that worked. New ones refused to work.
I noticed that if I pasted the new facebook under the code from old, both worked. So I presumed that some code in the old one was required to be there – and narrowed down to the same difference noted in above comments:
If I replace sdk.js#xfbml=1&version=v2.3 with all.js#xfbml=1 it works perfectly.
I do have to note that I have an old version of WordPress – 3.6. (Over a year ago when we tried to update it, it screwed up the AdRotate plugin and all my ads and data were lost. So we went back to older version. I’ve been afraid to update it since.)
I wonder if others having the issue also have an older version of WordPress.
The WordPress version is irrelevant, as the issue is on Facebook’s end, specifically with the JS they’re now providing with their embeds.
However, I do hope you can upgrade from 3.6 soon, as it has its fair share of publicly known security vulnerabilities. If you want to stay close to 3.6, at least consider upgrading to 3.7.8.
With that said though, AdRotate now requires 3.8, and is compatible with 4.2.2 (the latest release), so maybe it’s time to make the jump: https://wordpress.org/plugins/adrotate/
I run Google ads and I don’t use a plugin. I load the scripts right into a widget and drop them where I want them appear. The ad that appears center of my home page is hard-coded into the theme via a custom CSS file.
Back to Facebook embeds. Facebook never answered my inquiry. But, it is clear to me, the new Facebook embed does require their SDK script to be loaded either on the page or hard-coded into the HTML head on every page on your site. I tested this on a raw HTML page. As the mods here said, it’s not a WordPress issue.
Pinterest works the same way – you can embed a Pin or a Board, but you have to run a script – one time per page – or the embed absolutely will not work. So, basically Facebook has become like Pinterest in terms of embedding posts.
I have my script hard-coded into the header and the impact on my site’s speed is negligible – but I’m also running a dedicated server with a GigE uplink and using CloudFlare and MaxCDN. I don’t run any resource-consuming widgets and I keep my plugin stack very minimal.
Given the choice between coding the script into your header or using a plugin, I’d code the script into the head and forget about it. A plugin is going to load the script anyway plus have to run its own code – and then you’re running a non-standard configuration. If the plugin is sunset, you have to go back through all your posts where you used it and do them over again.
If you don’t want to hardcode on every page, then keep the SDK in a notepad file and drop it in per post where you embed.
However you do it, the embed requires the SDK or it won’t work.
- The topic ‘Facebook Embeds No Longer Work on WordPress?’ is closed to new replies.