This is my script to like my facebook page on my website.
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-href="http://www.facebook.com/#!/ConcessionnaireCaronMazda" data-width="300" data-height="100" data-show-faces="false" data-stream="false" data-header="false"></div>
<div id="fb-root"></div>
How can i make an alert when the button is clicked ??
You should use FB.Event.subscribe to subscribe to edge.create event (it's working for HTML5 and XFBML versions of Like Box Social Plugin.
FB.Event.subscribe('edge.create', function(pageURL){
alert('User liked page: ' + pageURL);
});
NOTE: you can use FB.Event.subscribe only then Facebook JS-SDK is fully loaded on page, to ensure it's loaded you may use window.fbAsyncInit function:
window.fbAsyncInit = function() {
// Here Facebook JS-SDK is loaded and you may use it.
// FB.init call should be placed here if you use it...
// Otherwise you should use next JS-SDK URL
// `//connect.facebook.net/en_US/all.js#xfbml=1&appId=APPLICATION_ID`
// Subscribe to event
FB.Event.subscribe('edge.create', function(pageURL){
alert('User liked page: ' + pageURL);
});
}
Update:
Just double checked and it seems that you required to use application to be able to subscribe to events and you only may do so on URL's that are within your Site/Canvas URL, otherwise next error will be thrown:
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the Application configuration. It must match one of the Connect or Canvas URLs or domain must be the same as or a subdomain of one of the Application's base domains.
It looks like you might need to use the XFMBL version then you can use the FB.Event.subscribe method, edge.create.
Like Box documentation - http://developers.facebook.com/docs/reference/plugins/like-box/
FB.Event.subscribe - http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
Related
I'm trying to get the facebook video player instance in order to subscribe to different player events.
In the desktop browser, it just works fine and I'm able to get player instance on the xfbml.ready function call but on mobile, it just won't fire.
Here's my code.
window.fbAsyncInit = function() {
// Get Embedded Video Player API Instance
var my_video_player;
FB.Event.subscribe('xfbml.ready', function(msg) {
alert("ready");
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 = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
if anyone want to tryout the code it is here: http://milracle.github.io/fbPlayer.html
The same code was working a day ago and now it just stopped working in mobile browsers. Does anyone know about any changes made to the video player itself? I googled it but found nothing. I believe the Stack Overflow community can help as always!
I am also looking for a solution to this issue - I am also pretty sure this has just stopped working recently - I can replicate the issue in chrome dev tools using the mobile device mode.
This issue has been fixed by facebook developer team. review thread at: https://developers.facebook.com/bugs/338091156930372/?legacy_version=true
I have an issue with the existing Facebook Callback JavaScript codes that i used.
Every time i go to the page (the page where my Facebook button is) and press the "Like" button from Facebook, i get a pop-up dialog that gives me the option to Like the page or cancel/close the pop-up.
But once i press "Like", the callbacks does not work. The callback will only work if i click on "Like"(or "Dislike") the second time and onward.
This is the code i am using.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APPID',
autoLogAppEvents : true,
xfbml : true,
version : 'v2.12'
});
FB.Event.subscribe('edge.create', function (response) {
console.log('Liked: ' + response);
});
FB.Event.subscribe('edge.remove', function (response) {
console.log('DisLiked: ' + response)
});
};
(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#xfbml=1&version=v2.12&appId=MY_APPID&autoLogAppEvents=1';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div><div class="fb-like" data-href="https://www.facebook.com/MyURL" data-layout="standard" data-action="like" data-size="large" data-show-faces="true"></div>
I checked similar questions here in StackOverflow, but it seems like most if not all is out dated. Hope anyone can help me with this.
a client wants me to have a function where visitors/users of the website needs to press the Like button to get a specific amount of points.
Then please tell your client that what they are asking for is absolutely not allowed.
https://developers.facebook.com/policy#properuse, point 4.4:
Only incentivize a person to log into your app, enter a promotion on your app’s Page, check-in at a place, or to use Messenger to communicate with your business. Don’t incentivize other actions.
See also https://developers.facebook.com/docs/apps/examples-platform-policy-4.4 for more examples of what exactly is and isn’t allowed.
I am trying to make a share button that alerts a nice and cool msg after sharing but no luck yet. FB documentation says that FB.ui() function must be included after FB.init() function. But the problem is when i do this it automatically pops up a window with fb share window but I want that it appears after the share button is clicked.
here is my code
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1404714646487865',
xfbml : true,
version : 'v2.2'
});
FB.ui({
method:'share',
href:'http://umovietube.com/'
,},
function(response){if(response &&!response.error_code){
alert('Posting completed.');}else{
alert('Error while posting.');}});
};
(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>
And here is the code I am using to display
share button
<div class="fb-share-button" data-href="http://umovietube.com" data-layout="box_count"></div>
I discovered that the FB.ui () function is in side the window.fbAsyncInit = function(){} function just after FB.init() function. which causes the unexpected popup window as soon as the page loads.
So where to put that FB.ui function to invoke and to get to my desired action from Facebook share button? I am using default share button code provided by Facebook that is quoted above.
What you could do is put the FB.ui() in a click handler.
E.g.
$('.share-button').click(function() {
FB.ui({
method:'share',
href:'http://umovietube.com/'
,},
function(response){if(response &&!response.error_code){
alert('Posting completed.');}else{
alert('Error while posting.');}});
};
});
and then call this .share-button at the appropriate place via a class in the view.
Hope it helps!
I have a problem where the subscribe event for my Like-box never fires. I've been searching a bit around, and I see people saying that there is a known issue that the event does not fire if the user is not logged in when he/she clicks the button. In my case, the event NEVER fires.
Here's my code:
<script>
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(response) {
console.log('event did fire');
});
};
(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/sv_SE/all.js#xfbml=1&appId=161828577334444";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-boxdgdghgh"><fb:like-box href="http://www.facebook.com/myurlgoeshere" width="292" height="200" show_faces="true" stream="false" show_border="false" header="false"></fb:like-box></div>
What is really weird is that if I change the xfbml to be the like-button instead of the like-box, the event fires.
Does anyone have any clue as to why this is happening? I've done just like the docs says and as I said, having a like-button instead of a like-box works like a charm.
You might want to refer and track this bug on Facebook Developers.
https://developers.facebook.com/bugs/508219649233845
In my htmlpage there is an script tag
Something like this
<script id="loadmenu"></script>
The "src" attribute for the above script element depends on the enviornment in which the web application is hosted.
So I wrote something like this
$(document).ready(function(){
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
});
The script is being loaded fine from the specified source. But the script is loaded only after the document is being parsed and loaded in the browser.
Since I am using $(document).ready().
As the document is finished parsing, the script is not getting executed after being loaded. Is there any way I can execute the specific <script> tag
after the
web page is being parsed and loaded in browser?
It seems you jquery selector is not correct. It should be
$("#loadmenu").attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
Insert script tag instead:
$(document).ready(function(){
var scriptTag = $("<script/>");
scriptTag.attr("src",SRConfig.WESHost + "/webapp/" + SRConfig.WESApp+ "/servlet/WPSNav?mod=iwswps&idkey=displayhome");
$("head").append(scriptTag);
});
or use a similar code of facebook.
(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 = "Your URL";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'loadmenu'));
Take a look at Detect if page has finished loading if it helps you.
Basically you can use .load function with window to see if it's fully loaded and trigger your script after that.
Documentation:
http://api.jquery.com/load-event/
Is there a reason you are modifying the src attribute in javascript ?
If the script path to load is determined by the hosted web application, I'm guessing you could simply do something like:
<script id="loadmenu" src="${SRConfig.WESHost}/webapp/${SRConfig.WESApp}/servlet/WPSNav?mod=iwswps&idkey=displayhome"></script>
The ${} being replaced in your html template by your server side app.
I'm not familiar with the technology behind theses SRConfig.* so I could be totally wrong.