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!
Related
I am trying this for the sharing of post on the facebook:
<div id="shareBtn" class="btn btn-success clearfix">Share Dialog</div>
<p>The Share Dialog enables you to share links to a person's profile without them having to use Facebook Login. Read our Share Dialog guide to learn more about how it works.</p>
<script>
document.getElementById('shareBtn').onclick = function() {
FB.ui({
display: 'popup',
method: 'share',
href: 'https://developers.facebook.com/docs/',
}, function(response){});
}
</script>
I want to know what is missing owing to which my application is not getting the sharing dialog.
Here is the console error I found:
(index):292 Uncaught ReferenceError: FB is not defined
at HTMLDivElement.document.getElementById.onclick ((index):292)
You have to load the JavaScript SDK:
window.fbAsyncInit = function() {
//SDK loaded, initialize it
FB.init({
appId : 'your-app-id',
xfbml : true,
version : 'v2.10'
});
//now FB is available
};
//load the JavaScript 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.com/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
More information:
https://developers.facebook.com/docs/javascript/quickstart/
http://www.devils-heaven.com/facebook-javascript-sdk-login/
I built module which displays FB like button on site. It works fine excepting when there is <script src="https://connect.facebook.net/en_US/all.js"></script> loaded before on the same page. If all.js is loaded before, fbAsyncIniti will never be triggered.
My code:
<div id="fb-root"></div>
<li class="fbLike">
<div data-share="false" data-show-faces="false" data-layout="box_count" data-href="<?php echo $share_url?>" data-action="like" class="fb-like"></div>
</li>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'APP_ID',
xfbml : true,
version : 'v2.1'
});
};
(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>
It will work if I remove window.fbAsyncInit = function() { from the code. But this is not solution because I don't know if customer have all.js loaded before or not. I could check with jQuery if this script is already inside DOM, but this is still not proper solution because script can be inside DOM but not loaded yet.
What would be proper method to check if all.js was loaded before so I can remove window.fbAsyncInit = function() { only in such case? Or is there any other solution?
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){});
}
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
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.