I am looking on the Facebook Developers Documentation to locate some sample code that would allow me to capture a click event on the "Like" button. It states:
If you are using the XFBML version of the button, you can subscribe to
the 'edge.create' event through FB.Event.subscribe.
I am not using XFBML however, this is my code:
<div class="social_net_button facebook_button">
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
FB.Event.subscribe('edge.create',
function(response) {
alert('You liked the URL: ' + response);
}
);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like" data-href="http://www.facebook.com/pages/Ayrshire-Minis/160330240663397" data-send="false" data-layout="button_count" data-width="70" data-show-faces="false" data-action="recommend"></div>
</div>
Can a click of the 'Like' button be captured by jQuery?
You could try this.
http://jsfiddle.net/qkyAe/
Docs: http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
FB.Event.subscribe('edge.create', function(response) {
console.log('clicked');
});
I think this one only counts if user clicks AND it increaes the like count (logged in users only) Since I don't have an FB-Account I couldn't try it.
Please tell me, if it works :)
Update:
The FB object comes from the script you're already embedding.
The solution, it would appear, is sending the request asynchronously. This code below works when placed after my fb-like div class:
<script>
window.fbAsyncInit = function() {
FB.init({
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true // parse XFBML
});
};
</script>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',
function(response) {
_gaq.push(['_trackSocial', 'facebook', 'like', document.location.href]);
}
);
};
</script>
This code REALLY works :)
<script type='text/javascript'>//<![CDATA[
window.addEvent('load', function() {
window.fbAsyncInit = function() {
FB.init({
appId: '42424242424242',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
};
(function(d) {
var js, id = 'facebook-jssdk';
if (d.getElementById(id)) {
return;
}
js = d.createElement('script');
js.id = id;
js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
});//]]>
</script>
<div id="fb-root"></div>
<div class="box">
<p>First a Like Box of a facebook page</p>
<p class="info">edge.create is not called</p>
<div class="fb-like-box" data-href="http://www.facebook.com/jsfiddle" data-width="292" data-show-faces="true" data-stream="false" data-header="true"></div>
</div>
<div class="box">
<p>Like Button of a website</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://jsfiddle.net" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div class="box">
<p>Like Button of a Facebook Page</p>
<p class="info">here you can see the edge.create fire</p>
<div class="fb-like" data-href="http://www.facebook.com/jsfiddle" data-send="false" data-width="150" data-show-faces="true"></div>
</div>
<div style="clear:both;"></div>
Make sure the FB.Event.subscribe('edge.create') call is right after the init (within the window.fbAsyncInit function and not outside of it)
Example
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID', // App ID
channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/* Additional initialization code here
******************************************************/
};
...then load the SDK Asynchronously!
Related
I have to put facebook comment social plugin in my father's personal website.
Main problem is that website is in html (no asp or php).
Problem: I had to find a way to put the current page url in facebook plugin. i solved reading many solutions with jquery, but it seems to work only after the second page refresh (the first time comment box is loaded... but comments are not published on author timeline..)
this is my code:
in the head section:
<script>
$(document).ready(function() {
$('.fb-comments').attr("data-href", document.URL);
});
</script>
in body:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MY_APP_ID',
xfbml : true,
version : 'v2.1'
});
};
<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/it_IT/sdk.js#xfbml=1&appId=MY_APP_ID&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
FB.Event.subscribe('comment.create', function(response) {
alert('comment created: ' + response);
$(document).load('mail.php?response='+response);
});
</script>
at the end of the page, the comments box (it has not data-href because is pushed by jquery):
<div class="fb-comments" id="fb-comments" data-numposts="5" data-colorscheme="light"></div>
Why it's not working every time?
is code for async loading correct?
example url: http://www.lemiecime.it/cime/fancy.htm (it's a demo page.. you can put comments)
many thanks
hello im having a small issue of where to exactly place the appID from facebook for the share function to work. I get the error. "The parameter app_id is required"
edit: sorry i forgot to mention how i want it to work. i need it to grab to the current url to share on facebook for multiple products.
EDIT2: reupdated the code but still am getting an error
<h4>SHARE THIS!</h4>
<div class="addthis_sharing_toolbox"></div>
<a class="social gp" href="#">google+</a>
<a class="social pt" href="#">pintrest</a>
<a class="social fb" id="fb" href="#" >facebook</a>
<script>
window.fbAsyncInit = function() {
FB.init({appId:'2**************', status: true, cookie: true, xfbml: true,});
};
</script>
<script>
document.getElementById('fb').onclick = function() {
FB.ui({
display: 'popup',
method: 'share',
href: 'window.location.href',
}, function(response){});
}
</script>
<a class="social tw" href="#">twitter</a>
<a class="social ig" href="#">instagram</a>
If you are just looking for the basic JavaScript SDK setup, it should go directly under the opening body tag (along with the snippet to asynchronously load the SDK) like so:
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
xfbml : true,
version : 'v2.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 = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- Your code here -->
</body>
Here's where it's described in their quickstart guide: https://developers.facebook.com/docs/javascript/quickstart/v2.1.
Then, later, you should just be able to use the share dialogue wherever you need it:
FB.ui({
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
Here's where that's described: https://developers.facebook.com/docs/sharing/reference/share-dialog
I'm trying to שמ IFRAME TAB on the Facebook page with fans gate page
The TAB works with link directly to the server, i put the button like plugin to when users clicked on the like the gate dropped and fans will place in the page. The problem is that when you click on the Like (of the Flagain), page does not get the command to refresh itself and nothing happens ... after searching several places on the net I found this function
<body class="body">
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
appId :'208195102528120',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://www.drinkin.co.il/ginger/coupon/coupon_ginger.html', // channel.html file
oauth : true // enable OAuth 2.0
});
</script>
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload();
if (top.location!= self.location) {
top.window.location.href = "https://www.facebook.com/gingereilat/app_208195102528120";
}
});
</script>
<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/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<img src="https://www.drinkin.co.il/ginger/coupon/coupon_ginger_gate.jpg" width= "810" height= "1200" />
<div id="fb">
<div class="fb-like"><fb:like href="https://www.facebook.com/gingereilat" send="false" layout="button_count" width="200" show_faces="false"></fb:like></div>
</div>
</body>
</html>
It's good I think but it just does not work on FF & Chrome...
Try this:
window.top.location.replace("URL");
update:
<script>
FB.Event.subscribe('edge.create', function(href, widget) {
window.location.reload(); //Remove it
if (top.location!= self.location) {
window.top.location.replace("https://www.facebook.com/gingereilat/app_208195102528120");
}
});
</script>
i am working on a web application and i have added fb like button and share button. like button is woring fine but i have read the hyperarts tutorial from this SE question http://www.hyperarts.com/blog/tutorial-add-share-button-iframe-tab-applications/ . but i have done the same procedure for sharing a particular div but i dono where i make a mistake . can anybody help me or can give suggestions. i have even fiddle it but does not work in my app . http://jsfiddle.net/EZyaF/
Here is the like code:
<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_GB/all.js#xfbml=1&appId=425369200906567";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like"
data-href="https://www.facebook.com/weatherappproj" data-width="450"
data-show-faces="false" data-send="false"></div>
and here is the Share a particular div code:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '4x5x6x2x0x0x5x7',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript">>
$(document).load(function(){
$('#shareonfb').live('click', function(e){
e.preventDefault();
FB.ui(
{
method: 'feed',
name: 'Weather App',
picture: 'images/weatherapp.jpg',
caption: 'My current position and its weather',
description: 'Weather App Facebook',
message: ''
});
});
});
</script>
<img src="images/share-on-facebook-button.gif" id="shareonfb">
This is making me crazy - I can't get the facebook comment.create event to fire on mobile devices (not that I tested work). login event is working fine (auth.authResponseChange)
<html>
<head></head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'MYAPPID', // App ID
channelUrl : '//WWW.MYAPPURL.COM/channel.html', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
FB.Event.subscribe('comment.create', function(response) { alert("1"); });
// FB.Event.subscribe('auth.authResponseChange', function(response) {alert("1"); });
};
// Load the SDK asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "http://connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<fb:login-button show-faces="true" width="200" max-rows="1"></fb:login-button>
comments
<div class="fb-comments" data-notify="true" data-href="http://test/test.htm" data-width="470" data-num-posts="10"></div>
</body>
</html>
Please note that this is still an ongoing FB bug