In order to speedup page loading I would like to download Facebook SDK.
<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.5&appId=1187326234648590";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count"></div>
How I Can download the complete library and use it from JavaScript source file?
(function() {
"use strict";
var URLS = {
facebookInit: "//connect.facebook.net/en_US/sdk.js"
};
myApp.initializeFbSdk = function(appId, version) {
$.getScript(URLS.facebookInit, function() {
FB.init({
appId: appId,
version: version
});
});
};
myApp.createFbSharePopup = function(url) {
FB.ui({
method: "share",
href: url
});
};
// other methods if needed
})();
$(document).ready(function() {
myApp.initializeFbSdk(fbAppId, fbSdkVersion);
//...
myApp.createFbSharePopup("www.mysite.org");
});
Related
I just want to implement a Facebook customer chat feature with my vuejs application.
This is my full code in the index.html file.
<body>
<div id="app" page_id="PAGE_ID" minimized="false" class="fb-customerchat"></div>
<!-- Include after Vue (before closing body) -->
<script src="https://unpkg.com/vue-fullpage.js/dist/vue-fullpage.min.js"></script>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.11'
});
};
(function(d, s, id){
console.log('d',d,'s',s,'id',d)
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'));
</script>
<!-- built files will be auto injected -->
</body>
I am sure that my page_id and app_id is correct.
I don't know what's wrong with the code. I can't see any error in the console log also.
I implement exact same thing in a normal html file. It works 100%
<body>
<div
class="fb-customerchat"
page_id="PAGE_ID"
minimized="false"
></div>
<script>
window.fbAsyncInit = function () {
FB.init({
appId: 'APP_ID',
autoLogAppEvents: true,
xfbml: true,
version: 'v2.11',
});
};
(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');
</script>
</body>
I don't know why this is not working with the vue.js.
Is that something with webpack building or something else?
I am new to Javascript and am try to follow the Facebook steps to display fan_count (likes) on my webpage. I have done the following but for the life of me can't work out how the count is displayed.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '231179987472162',
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/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<h1>Hello, world!</h1>
<script>
FB.api(
'/cityviewshopping',
'GET',
{"fields":"fan_count"},
function(response) {
// Insert your code here
}
);
</script>
I do include facebook snippet like so
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'someAppId',
cookie : true,
xfbml : true,
version : 'v2.8'
});
};
(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>
Then, somewhere in my code, i will be doing something like
FB.foo.bar();
How i know when the script has done loading and therefore the FB object does exists?
That is what window.fbAsyncInit is for, the JavaScript SDK is loaded when you hit that callback function. You can use FB right after FB.init.
I try to trigger an facebook video error in javascript , I have this error in the player ( 'Unavailable
This video can't be embedded.' )
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'XXXXXXXXXX',
xfbml: true,
version: 'v2.5'
});
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
if(msg.type === 'video') {
my_video_player = msg.instance;
}
});
};
(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>
<div
class="fb-video"
data-href="https://www.facebook.com/businessinsider/videos/10153852489789071/"
data-width="500"
data-allowfullscreen="true"></div>
How can I trigger when a video can't be play ?
In your facebook app dashboard, go to App review and make it public.
I have this script to get users to share my website in return for a coupon code to use in the shop.
I'm sure it was working fine. Now on some pages it wont execute until the page is refreshed.
It may not even be a script issue but I can't work it out.
Any ideas?
Here is my code.
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<div id="fb-root"></div>
<script type="text/javascript">
$(document).ready(function() {
window.fbAsyncInit = function() {
FB.init({
appId : 'XXXXXX',
xfbml : true,
version : 'v2.5'
});
$('#ShareForcouponcode').on('click',function(e) {
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'XXX',
link: 'XXX'
},
function(response) {
if (response && response.post_id) {
// the download link will be activated
$('#ShareForcouponcode').fadeOut();
$('#infotext').fadeOut();
$('#couponcode').fadeIn();
} else {
// do nothing or ask the user to share it
}
}
);
});
};
});
// Load the SDK
(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>