I need to embed a Facebook video on a website, and my aim is to load a thumbnail and to only load the embed when the visitor clicks the thumbnail. This reduces up-front load time which is better for overall site performance.
I tried using a script that detects when parent element (“.bbfb-video”) is clicked and inserts the embedded video.
Note: jQuery is in use.
<div class="video bbfb-video" id="10154009776186729" data-link="https://www.facebook.com/facebook/videos/10154009776186729/">
<img class="bbfb-thumb" src="https://via.placeholder.com/640x360?text=video" alt="thumbnail"/>
</div>
<script>
(function() {
if ($('.bbfb-video').length === 0) return;
$('.bbfb-video').each(function() {
var fb = this,
id = this.id;
$(fb).click( function() {
var href = $(this).attr('data-link');
$(this).empty();
$(this).append('<div class="fb-video" data-allowfullscreen="true" data-href="'+href+'" data-width="500" data-show-text="false"></div>');
//Re-parse the parent
FB.XFBML.parse(document.getElementById(id));
//Autoplay
FB.Event.subscribe('xfbml.ready', function(msg) {
if (msg.type === 'video') {
msg.instance.play();
}
});
});
});
})();
</script>
This creates new div <div class="fb-video" data-allowfullscreen="true" data-href="https://www.facebook.com/facebook/videos/10154009776186729/" data-width="500" data-show-text="false"></div> , no video is shown.
Error is Uncaught ReferenceError: FB is not defined
Your code works for me: link.
Maybe you are not initializing the facebook API correctly?
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
};
(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 = "https://connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
Related
when trying to analyse my page speed using Google page speed analytics.
I see that FB messenger load a lot of js files.
so, I decided to delay FB script using setTimeOut() method.
<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script defer>
jQuery(window).load(function(){
function load_fb_chat(){
window.fbAsyncInit = function() {
FB.init({
appId : 'myappid',
autoLogAppEvents : true,
xfbml : true,
version : 'v7.0'
});
};
(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 = 'https://connect.facebook.net/en_US/sdk/xfbml.customerchat.js';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
};
window.setTimeout( load_fb_chat, 2000 ); //or 500ms
})
</script>
but I am not sure if it's a good practice.
I would like, as a javascript newbie, update Facebook's customer chat plugin with some custom parameter in the ref field (actually cookie of the user to which I show the plugin). I cannot seem to be able to override the default that I set. Why is that? I've been stuck on this forever. I always receive the ref parameter default_ref.
Any help will be appreciated. Thanks
<!DOCTYPE html>
<head>
</head>
<script>
function updateRef(){
console.log("updating ref");
document.getElementById("chat").ref="update_ref";
console.log("tried to update ref;")
}
window.fbAsyncInit = function() {
FB.init({
appId : 'xxxxxxxx',
autoLogAppEvents : true,
xfbml : true,
version : 'v3.0'
});
};
(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 = "https://connect.facebook.net/cs_CZ/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
console.log("customer chatloading");
document.getElementById("chat").ref = "test_work_please";
console.log("finished loading chat");
console.log("ref is " + document.getElementById("chat").ref);
</script>
<body>
<div id="chat" class="fb-customerchat"
messenger_app_id="xxxxxxxxxx"
logged_in_greeting="yyyyyyy
logged_out_greeting="zzzzz"
greeting_dialog_display="fade"
ref="default_ref"
page_id="xxxxxxxxxxxx">
</div>
</body>
In a process of hiding piece of content for people who didn't like our page yet. Using Facebook SDK for the first time. The idea is to have a call to action text and button. Once button is clicked, if user already likes our page- it shows a piece of content. If not- shows a like button and shows piece of content after it's clicked.
Here is connecting SDK
window.fbAsyncInit = function() {
FB.init({
appId : '348511868693215',
xfbml : true,
version : 'v2.8'
});
FB.AppEvents.logPageView();
};
(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'));
And here is actual code for checking
FB.api({
method: "pages.isFan",
page_id: page_id,
}, function(response) {
console.log(response);
if(response){
//if liked
$(".show-poll").click(function(){
$(".actualpoll").show();
});
} else {
$(".show-poll").click(function(){
$(".likepage").show();
});
}
}
);
Your code "for checking" is executed before the SDK is loaded, i.e. before FB is available. Move the code inside the window.fbAsyncInit function. That function is called once the SDK is available.
I need to get facebook like click button on a new window that my website will open.
When click on the like button I want to show a thank you message.
I try:
<script>
function openWin() {
myWindow = window.open("https://www.facebook.com/permalink.php?story_fbid=ID", "myWindow", "width=200, height=100");
}
FB.Event.subscribe('edge.create', function(response) {
alert("thank you for like");
});
</script>
<button onclick="openWin()">Open facebook to like post</button>
but it is not working. what is wrong?
Make sure the JavaScript SDK is loaded correctly BEFORE using FB.Event.subscribe: https://developers.facebook.com/docs/javascript/quickstart/v2.4
For example:
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.4'
});
FB.Event.subscribe('edge.create', function(response) {
alert("thank you for like");
});
};
(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>
I'm trying really hard to learn how to do this but I keep running into problems.
FB.ui works for posting but every time I use FB.api it comes up as undefined and I get a random picture. What am I doing wrong?
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'numbers', // App ID
channelUrl : '/channel.php', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
// Load the SDK Asynchronously
(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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
You need to call FB.login before making the API call. I guess, thats what you are missing.