I followed the instructions at https://developers.facebook.com/docs/instant-articles/reference/social
and relatedly
https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually
To embed facebook video in an instant article. Here is what I ended up with for my embed, but unfortunately when I preview the page I get a brief gray flash where the video should be and then no video.
<!-- Article body goes here --><figure class="op-social">
<iframe>
<!-- Include Facebook embed code here. Your Facebook embed code should contain both the "JavaScript SDK" and the "Embedded Post Tag" parts described at https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually -->
<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.6&appId=906632809405090";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-post" data-href="https://www.facebook.com/PopSugarCelebrity/videos/10154334075529824/0506729/" data-width="300" data-show-text="true"></div>
</iframe>
</figure>
<p>Ernestine Shepherd, one of the world's oldest bodybuilders, turned 80 this month—and she's making us all want to hit the gym. While we're not about to join her for 3 a.m. workouts or 10-mile runs (did we mention she's a badass?), Shepherd's story is a great reminder that it's never too late to adopt healthy habits. She didn't start exercising until she was 56! </p>
I've successfully embedded youtube, twitter and instagram into our various FBIA pages so I thought fb videos should be a snap, but no such luck. Does anyone who has had success embedding FB videos on FBIA pages have some tips on where I went wrong with the above code?
I've had success using the iframe embed code from FB's configurator. The tool should give you the option to choose an 'iFrame' code snippet (at the top).
Here's an example of an iframe embed that would work in instant article markup (be sure to update the URL and AppID).
<figure class="op-interactive">
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&appId=906632809405090&height=281" width="500" height="281" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</figure>
Related
How is it possible to put the Youtube Live Chat into an Iframe?
I have this URL, but for me it does not work:
<iframe allowfullscreen="" frameborder="0" height="270" src="https://www.youtube.com/live_chat?v={VIDEO_ID}&embed_domain={MY_DOMAIN}" width="480"></iframe>
If I open the URL normally in the Browser, I get the chat, but in the Iframe i get nothing.
Please help. Thx :)
You may need to have embedding enabled first, you can check the status of your account at this link after you're logged in the youtube account: https://www.youtube.com/features
Also the domain part (MY_DOMAIN) needs to be without the 'https://' or 'http://' and port numbers like ':3000'
It says it's possible, but only on Desktop browsers:
Note: embedding live chat isn't available on mobile web.
During a live stream, you can embed live chat on your own site by
using an iframe.
Get the video ID for the live stream. You can get the video ID from the watch page URL (youtube.com/watch?v=12345). In this case, the video ID is ‘12345’. If you chose "Stream now," right-click on the player and select Copy video URL to get the video URL.
Get the domain URL for the site you want to embed chat on. If you're embedding chat on www.example.com/youtube_chat, your embedding domain is "www.example.com."
Combine the embedded URL in the following way: https://www.youtube.com/live_chat?v=12345&embed_domain=www.example.com
This is the URL for your iframe. Note the embed_domain must match the URL of the page you’re embedding the chat on. If they are different, the embedded chat will not load.
https://support.google.com/youtube/answer/2524549?hl=en
I made an example with:
<iframe width="560" height="315" src="https://www.youtube.com/embed/5qap5aO4i9A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="185" height="315" src="https://www.youtube.com/live_chat?v=5qap5aO4i9A&embed_domain=fiddle.jshell.net" frameborder="0"></iframe>
Which looks like this:
View the working demo here:
https://jsfiddle.net/kmturley/9Lmbdgn2/8/
I'm working on WordPress site, and have programmatically integrated Video.js player in it. The screen is black and i can hear the audios. Most probably, it's due of bandwidth (as shown in screenshot attached).
Sometimes i'm able to watch videos, but most of the times, its black screen.
How to fix this issue. My code is as:
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
</head>
<body>
<?php
$var_value = $_GET['video_id'];
?>
<video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268" data-setup='{}'>
<source src="https://d3eykkkvwlu40v.cloudfront.net/v2/hls/<?php echo $var_value?>/<?php echo $var_value?>.m3u8" type="application/x-mpegURL">
</video>
<script src="http://static.jsbin.com/js/render/edit.js?4.0.4"></script>
Please guide. Thanks.
The Media Source Extension (MSE) in browsers don't support that you dynamically switch between an audio/video and an audio-only stream or vice versa. So if the player starts with the audio-only variant it won't be able to switch up at all or just plays the audio of that variant.
Theoretically it would be possible for a player to switch between those variants by re-initializing the MSE for every such switch. But I don't know if any player supporting this, for good reasons:
the switch would not be completely seamless
the buffered data would be deleted by the browser
This would be a bad user experience.
So I think there are three options: live with it, remove the audio-only variant or find/build a player that supports this. I'd go for the removal.
Situation
I've been using a plugin to display the fan count of my facebook-page on my wordpress-blog. A few months ago this plugin (and apparently all similar ones) stopped working. I suppose this happened because facebook changed their api.
Now I'm trying to do this manually.
Display the fan count of my facebook-page, nothing more.
So no like-button next to it, no wrapper around it.
Steps taken
I've included the facebook SDK like this:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXXXXXXXXXXXX',
xfbml : true,
version : 'v2.4'
});
};
(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>
After that I did a quick test, to see if everything works with this:
<div
class="fb-like"
data-share="true"
data-width="450"
data-show-faces="true">
</div>
This works as expected and a basic like-box is displayed.
Problem
Now I've been through the docs to figure out how to just display the page-fan-count instead of the like box. Unfortunately this confused me more than it did help.
I understand that I can't just use something like this:
<div
class="fb-fans"
data-width="450">
</div>
The whole thing seems like such a simple thing to do, but I can't make sense of it all. Am I aproaching this completely wrong?
Thanks a lot for any kind of help!
Not sure why you can't use the standard like button, e.g. in box_count mode.
https://developers.facebook.com/docs/plugins/like-button
If you specify the URL of your Facebook page as "URL to Like", then it show you the actual page likes:
Downside is that you can't really customize it, and that for larger numbers the counts are abbreviated...
It is not THAT simple, unfortunately. There is no plugin for that, so you have to create an App and use the Graph API to get the like count. But you do not need any authorization, you can just use an App Access Token. This would be the API call (use file_get_contents or CURL):
https://graph.facebook.com/page.id?fields=name,likes&access_token=APP-ID|APP-SECRET
More information: https://developers.facebook.com/docs/graph-api/reference/page#Reading
About Access Tokens in general:
https://developers.facebook.com/docs/facebook-login/access-tokens
http://www.devils-heaven.com/facebook-access-tokens/
If you don´t want to create an App and deal with the Graph API, you can also just use a platform like SharedCount, they offer a good amount of free calls per day: http://www.sharedcount.com/
Does anybody knows why this code is no more showing the Google Map?
It is on a Wordpress widget. It has worked before now.
<div class="Flexible-container clearfix">
<div class="textwidget">
Versione ingrandita della mappa</div>
</div>
Otherwise if you put the map URL on a browser you can see the map regularly
Thanks, bye
I think the correct way to do that now is to use the iframe approach, aka Google Maps Embed API.
With which you use:
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=API_KEY
&q=Space+Needle,Seattle+WA" allowfullscreen>
</iframe>
this to embed your maps onto your page.
Note that you need an API key and you can get it from the Google Developers Console.
I couldn't find any solutions on google which can make the newly introduced facebook posts embed to responsive. Does anyone got a solution or tricks? Thanks
<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 = "http://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/notes/facebook-security/national-cyber-security-awareness-month/10151630123500766" ><div class="fb-xfbml-parse-ignore">Post by Facebook Security.</div></div>
Set data-width to auto to use fluid width:
<div class="fb-post" data-href="url" data-width="auto"></div>
I've created a small jQuery plugin to fix this. Since the Facebook Embedded Posts plugin renders the correct width when using the data-width attribute, we can listen for width changes on our page, update the data-width attributes and then re-render the plugins.
See http://jsfiddle.net/brohde/GRcen/
Usage: $('#post').autoResizeFbPost();
Plugin logic:
On document ready:
Save original HTML of $('#post') to preserve any <div class="fb-post"> elements – the Facebook SDK removes this from the DOM.
The Fix: Update all <div class="fb-post"> elements with the correct data-width attribute (Uses $('#post').width() ).
On window resize, run The Fix again and also call FB.XFBML.parse(); to render the Facebook plugin(s). The plugin will wait 1 second after the last window resize to avoid multiple DOM updates and FB.XFBML.parse(); calls.
If you mean "responsive" as in "responsive design", you can't. Facebook uses a cross-domain iframe for JS/CSS isolation and session security, and it generates the iframe dimensions dynamically based on contents using privileged cross-domain communication, so you can't just play around with CSS to get things how you want them. See this section on official page for the social plugin:
Can I customize how the post is displayed on my web page?
Currently, you cannot customize how Embedded Posts are displayed on your page. The size of the post is fixed to the same dimensions as it's shown on Facebook.
If you mean that the plugin is not displaying properly, you should follow the instructions with the Get Code button on the official page for the social plugin.
Details:
Your markup is missing an app ID. Where did you find this markup? You need to specify an app ID. If you load the JS SDK manually, that means adding it to the parameters of FB.init as seen here. In your case, you are using the shortened URL-based init, where the SDK URL has parameters in its fragment: #xfbml=1 in your example. You will need to change it so it is more like #xfbml=1&appId=1234567890.
Update: You should use the console in your browser's built-in developer tools (or Firebug, etc.) to see info about errors with the JS SDK. When I tried your code on an https:// site, I got this error:
[blocked] The page at https:// ran insecure content from http://connect.facebook.net/en_US/all.js.
so I changed the URL from http://connect.facebook.net/... to a protocol-relative URL: //connect.facebook.net/...
Another option would have been to just try on an http:// site only. At that point, I got the following errors:
Invalid App Id: Must be a number or numeric string representing the application id.
FB.getLoginStatus() called before calling FB.init().
This confirms my suspicion -- you need an app ID. I added an app ID and it works.
Found it frustrating I couldn't find anything more elegant than utilizing overflow and max-width 100% to force a horizontal scrollbar.
Added - style="overflow-x: auto; max-width: 100%;"
To result in the following fb-post portion of the embed;
<div class="fb-post" style="overflow-x: auto; max-width: 100%;" data-href="https://www.facebook.com/photo.php?fbid=406800492780796&set=a.202870829840431.42585.202866106507570&type=1" data-width="550">
If you want a little more elegance can always implement styling on the scrollbar.
CSS Webkit Scrollbars - http://css-tricks.com/custom-scrollbars-in-webkit/
jQuery Tiny Scrollbar - http://baijs.nl/tinyscrollbar/
Hope someone finds this useful.
If yours posts are video, you can use Embed Videos instead of Embed Posts, they are responsive. You can get all others datas from open graph and create your own design.
https://developers.facebook.com/docs/plugins/embedded-video-player