Add amp-facebook element for Facebook posts and videos

[mkhatib]

I posted some of the decisions I made here in #979 but for ease of access, re-posting here:

I went the amp-twitter approach few exceptions. One is that the only way I got FB SDK to render posts correctly when there are multiple amp-facebook elements on the page is to actually load the SDK script in every amp-facebook iframe.

Before that, following amp-twitter approach and only loading it once FB would only render the post that included the SDK correctly and the rest failed to fetch or render at all until I started to manually calling parse FB.XFBML.parse(parentElement) which would successfully fetch the posts but fails to render the post with the correct height and width and instead renders a 0px by 0px posts and throws an error fb-post failed to resize in 45s.

As I mentioned the only way I got this to work and render sizes correctly is by including the sdk and calling FB.init in every amp-facebook iframe.

Another issue that I bumped into early on was the inability to access contentWindow for the FB post iframe to listen to resize event, I am not entirely sure but I think that's the expected behavior for iframes that are loaded from a different domain (In comparison, twitter's iframe doesn't actually have a src).

Luckily FB SDK has an alternative for contentWindow.resize. FB.Event.subscribe allows us to listen to xfbml.resize event that the SDK fires which also sends the height and width of the resize event - I use that to fire the embed-size event to allow the parent iframe to resize itself. The only concern I have here is that FB doesn't seem to document xfbml.resize event anywhere in their documentation, I had to do some debugging to see what kind of events FB is firing. So not sure if this is a safe approach for now.

Over all, FB SDK lack of a twitter-like programatic way to create posts createTweet was a bit painful. And I am hoping once we get FB devs input on this we can improve the implementation by removing the multiple inclusions of the SDK.

[cramforce]

Probably not a good name anymore, since this does not re-render. Might be best to just inline the function

[mkhatib]

Inlined.

[cramforce]

Looks great. I think sharing the script is not as crucial as with tweets as it is not so common to have many of these posts on the same page (I think).

[cramforce]

I prefer something stupid like two comparisons with a || in between :)

[cramforce]

Looks great. Some style nits. Will merge after fixing.

[mkhatib]

Fixed and squashed! Thanks for the review!

[cramforce]

Thanks!

LGTM