Add Facebook oEmbed support

[pento]

Facebook are in the process of releasing their oEmbed support - ​documentation has been written, it's really just the announcement that needs to be made.

[pento]

This is currently blocked by #34698.

@wonderboymusic: I know it's a bit late, but assuming that bug is fixed before RC 1, how do you feel about this landing in 4.4?

[pento]

Let's git r done.

[GaryJ]

I think those regexes need checking. For instance, I don't think:

https?://www\.facebook\.com/.*/video(s/|.php).*

will match the last two of (from FB documentation):

https://www.facebook.com/{page-name}/videos/{video-id}/
https://www.facebook.com/{username}/videos/{video-id}/
https://www.facebook.com/video.php?id={video-id}
https://www.facebook.com/video.php?v={video-id}

...due to there being an extra / before video. i.e. I think it should be something like:

https?://www\.facebook\.com/.*video(s/|.php).*

although that would need refining further as it would also capture something like http://www.facebook.com/wp-tutorial-videos/

[swissspidy]

Facebook is not exactly known for keeping things in a backwards-compatible way. The Graph API is always changing, the WordPress plugin isn't supported anymore, .... Will the oEmbed endpoint still be available two years from now?

Besides that, Facebook's oEmbed response is not compliant with the specification:

• There's an additional success property
• The height property is sometimes null
• The width property is 100% by default instead of a unit-less number

See ​https://make.wordpress.org/core/handbook/contribute/design-decisions/#whitelisting-oembed-providers

[DrewAPicture]

-1 on pushing this in the back door for 4.4. I don't see why this shouldn't go through the normal paces of any other provider we add to the list.

It doesn't seem like the endpoint is well-enough established yet and @swissspidy raises some valid concerns in comment:4.

[helen]

I am not okay with doing this in 4.4 - oEmbed changes are indeed small, but they still need to be tested, vetted, and established. This is not "established", and all of @swissspidy's points are valid and important.

[pento]

Good catch, @GaryJ - 34737.2.diff​ updates the regex patterns.

@swissspidy makes some good points. Some Automattic folks are working with Facebook on this, they're going to pass this ticket along, so the problems can hopefully be addressed.

[swissspidy]

Current status:

• It seems they don't use width: 100% anymore and instead use a default width of 500 (pixels).
• height is still null in some cases.

I think we could integrate it once the height bug is resolved. I can live with there being an unneeded success property in the response.

[khromov]

oEmbed support was released publicly a few days ago:
​http://media.fb.com/2015/12/14/improved-embedding-tools-embedded-video-player-api-and-oembed-support/

[swissspidy]

height is still null in some cases.

To clarify: height is only null in the posts endpoint; videos are fine.

[swissspidy]

Still the same problem with the height property for posts.

@pento Do you know if there are still some Automattic folks working with Facebook on embeds? Do Facebook embeds work on WordPress.com?

[pento]

I don't think the height thing is an issue. It's contrary to the oembed spec, but Instagram does the same thing, and that doesn't cause problems.

Facebook embeds work correctly on WordPress.com.

[pento]

I think we're at a point where we can only decide if this is going in or not. The URLs that Facebook originally defined haven't changed, so I think we can call it established, or stable.

I doubt they'd be willing to change the height property that they return, their JS handles all of that magic.

The patch needs some updates:

• the .php parts of the regexes need to be changed to \.php
• I'm inclined to start adding unit tests for all our trusted oEmbed providers - if their output changes, we should know about it. Building those tests (with Facebook as the first provider) may be out of scope of this ticket, though.

I'm +1 on commit, though I'd like to hear arguments either way.

[swissspidy]

Yeah probably for the best to include this in 4.7. It's only a minor issue and shouldn't stop us from improving the experience for users.

There's #32360 for oEmbed unit tests. See also #28507.

Happy to work on both refreshing this patch and adding the tests.

[johnbillion]

In 38367:

Embeds: Add support for embedding Facebook posts and videos via oEmbed.

Fixes #34737
Props pento, GaryJ

[johnbillion]

In 38368:

Embeds: Add a missing regex delimiter for Facebook URLs.

See #34737

[ocean90]

In 38691:

Embeds: Add support for embedding Facebook photos of a user/page.

See #34737.

[josephvb10]

For some reason with this Facebook oEmbed is being returned in arabic language. Could this be a problem in Facebook's end (maybe by misidentifying the server's IP)?

[miraclemaker]

There's an issue with Facebook single post embeds.

The following url should embed a single post from the Wordpress account on Facebook:

​https://www.facebook.com/WordPress/posts/10154412148282911

What I'm actually getting on 4.6.1 is a feed of *all* posts from that account.
You can see the correct behaviour here:

​http://embed.ly/code?url=https%3A%2F%2Fwww.facebook.com%2FWordPress%2Fposts%2F10154412148282911

[swissspidy]

@miraclemaker This change here is for WordPress 4.7, not 4.6.1. In 4.6.1, auto-discovery will kick in. There, Facebook provides the embed code you're seeing now. So that's expected. If you use the latest nightly build, everything works fine.

[miraclemaker]

@swissspidy Got it, thanks for taking the time to clear that up.

[pareshradadiya]

$wp_embed->autoembed( $content ) doesn't appears to be working for the Facebook embed

[swissspidy]

@pareshradadiya Sounds unlikely. Perhaps no connection could be made to their servers or something. Could you share some code to reproduce it?

[pareshradadiya]

@swissspidy 

Add these two links in your post content from the admin dashboard

​https://youtu.be/fLoRXpvEWDo
​https://www.facebook.com/aheneghana/videos/10153867925655496/

Try to access this post from frontend, you will see the embed for youtube video but not for the facebook video

[swissspidy]

@pareshradadiya Embedding the video by pasting the URL works for me. Screenshot: ​https://cloudup.com/cVXvtICBYvI

[pareshradadiya]

@swissspidy

Embedding the video by pasting the URL does not works for me.

Here is a screenshot for reference!

​http://prntscr.com/d6d0j6
​http://prntscr.com/d6d1pu

[swissspidy]

@pareshradadiya That second video works well on my install as well. Which version of WordPress are you using? Do you see any errors in the browser's developer console? What meta data is stored for this post in the database?

[mattla93]

Does anyone has problems with the facebook oembed api? When calling the API from local browser we've no issues, but calling from php and the wordpress causes timeouts on the facebook-api or "unsupported browser" issues.

the ajax-call always returns

{"success":false,"data":{"type":"not-embeddable","message":"<code>https:\/\/www.facebook.com\/burgerphilipp\/posts\/2231509943565310<\/code> konnte nicht eingebunden werden."}}

[swissspidy]

@mattla93 Please do not change keywords on a 3-year old closed ticket to indicate that it's not working for you. If there's a reproducible issue with Facebook oEmbeds in WordPress, I recommend opening a new ticket for it with as much details as possible.

To me, it sounds like Facebook has done something on their end that breaks external access. For example, when I run wp eval "print_r( wp_remote_get( 'https://www.facebook.com/burgerphilipp/posts/2231509943565310' ) );" on a local site, I get timeouts as well. So this is not an issue with embeds specifically, but with Facebook blocking requests generally.