I've got like button on page and I'm catching events edge.create and edge.remove.
I'm using this code from Facebook developers page:
<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'));
window.fbAsyncInit = function() {
FB.Event.subscribe("edge.create", function(targetUrl) {
console.log("liked");
});
FB.Event.subscribe("edge.remove", function(targetUrl) {
console.log("removed");
});
}
</script>
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="false"></div>
But I can't find a way to catch events when user clicks "close" or "add a comment" button in popup.
I tried with "comment.create" and "message.send" and it didn't work.
Is there any way to catch these events?
See Marc Witteveen's answer and my answer at Catching the close or post to Facebook event of the Facebook comment box for polling for the height of the comment dialog. This is working for me.
Related
I am adding the facebook comments plugin to my website and have little coding knowledge.
I have added the following after the opening body tag:
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
And the following where I want the comments to display:
<div class="fb-comments" data-href="https://www.bbuboxing.co.uk/featherweight.html" width="100%" data-width="100%" data-numposts="5">
If I or a visitor is not logged in to Facebook, the plugin displays a button saying log in to post but I can't click it to log in, the button isn't clickable.
How do I make it so that I(or a visitor) can click this button to log in?
you're missing your app id which needs to be appended to the end of the src property in the sdk script tag like this:
<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 = 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.11&appId=XXXX';
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
replacing the XXXX with your registered facebook app id. if you haven't registered an app yet visit https://developers.facebook.com/ and go through the registration and signup process.
I want to use jquery/js to simulate the click on original fb share button when I click my custom button.
This is what I've got:
<script>
$(function(){
// initialize fb sdk
window.fbAsyncInit = function() {
FB.init({
appId : '830561340319450',
xfbml : true,
version : 'v2.2'
});
};
(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-share-button" data-href="www.myweb.com/topic/hello_world" data-layout="button"></div>
<button class="my_own">Lets share</button>
I want when I click on my_own, the facebook stock button also get clicked. Any idea how to do that?
Remove the Facebook share button. Trying to trigger a click on it is not the way to go; it might even trigger measures they have in place to prevent click-jacking, and as a result get your app blocked by FB.
Implement the call to the Share dialog when the user clicks your own button:
HTML:
<button class="my_own" type="button" onclick="share();">Lets share</button>
JavaScript:
function share() {
FB.ui({
method: 'share',
href: 'http://www.myweb.com/topic/hello_world',
}, function(response){});
}
is there a way , I can track facebook like with help of event tracking in google analystics
ie. i want to use
ga('send', 'event', 'button', 'click', 'nav buttons', 4) ant not this code : ga('send', 'social', 'facebook', 'like', 'http://mycoolpage.com');
Ok ..this is how we can implement Google analystics in facebook
1) Facebook like is added via its social plugin and Facebook provide events to handle like button
for this put code like this in your jsp page .
2) Facebook provide window.fbAsyncInit method and any event provided by Facebook can be written into it .
3) more information can be obtained from
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',function(href,widget) {
ga('send', 'social', 'facebook', 'like', 'your facebook page link');
});
};
</script>
<script type="text/javascript">
(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&appId=0000000000000";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like-box" data-href="http://www.facebook.com/xxxxxxxxxxxx"
data-width="450" data-height="590" data-show-faces="true"
data-stream="true" data-header="true"></div>
</div>
I am unable to inspect the "Like" button as I can't find it (assuming your site is mycoolpage.com), but you can do something like this, by attaching an onclick handler:
Facebook Like!
Can someone give me a step by step how to implement Facebook's login plugin onto a weebly site? Where does the SDK go in HTML/CSS? Or does it all go in an embedded code? I have been stuck on this trying everything please show me what code goes where. I have done research and it seems using the javascript is the only way to go. Thank you!
Yes I have tried the steps on facebook right now I have this. This is entered in the splash.html page in Html/CSS.
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '{myappID}',
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>
Then I have this in an embedded code on the actual splash page content:
<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&appId=246238232244147&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="false"></div>
This is for the button, but the button only shows up when I am designing or building the page and not when I publish it. Thank you!
If you go to here you will see a facepile half way down the page:
http://www.flirtwithme.co/main.php#home
Then if you click on another tab (across the top) like profile or mail and then go back to the 'Home Tab' the facepile doesn't appear again.
The page is using AJAX to replace the middle DIV.
This is the facepile code that is on the DIV that is being replaced:
<div id="fb-root"><fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box></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&appId=192869610731913";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Can anyone give me advise on how to get the facepile to appear after I move between Tabs/DIV's.
thankyou
this is the code that worked:
$(document).ajaxComplete(function(){
try{
FB.XFBML.parse();
}catch(ex){}
});
Hum .. Maybe you should insert the FB script and the #fb-root div on your main page (with no ajax) :
<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&appId=192869610731913";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>
And then add the likebox in your ajax content.
<fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box>
To be honest, I haven't tested this, so I don't know if it'll work but I think it could be a solution or at least a way to the solution.
(you don't have to put your like-box in the #fb-root div. It'll just be used to load stuff from facebook.)