On a website, I have some social buttons (tweet, facebook like, google+1, ..). Most of them are inserted using an iframe.
The task is to track use interaction with those buttons: if someone +1'ed the content - and AJAX request should update my local statistics on the server.
However, with JS I can't access the contents of the iframe due to security restrictions: can't bind 'click' event.
How do I track clicks on those social buttons, then?
Possible solutions:
Bind 'click' to the iframe object itself: it does not work.
Add buttons inline, w/o an iframe. No go: I should also display the number of likes for every button.
Try to use Social Service APIs to insert without an iframe. Not all services support this.
You can't. If you could catch clicks on them you could also trigger clicks on them which would be pretty bad (imagine porn sites making you "like" them automatically).
The only thing you can do is using the APIs of the various sites to retrieve the number of people who liked/+1'd/etc. your site.
Most of the social buttons from the main companies enable your Javascript to detect when the button has been pressed. They usually do this via Javascript events.
In other words, they'll tell your code that they've been pressed, you don't have to detect it on your own.
Twitter
info on their javascript events
Facebook
You need to use the XFBML version of the button. From the Facebook Like button FAQ
How do I know when a user clicks a Like button?
If you are using the XFBML version of the button, you can subscribe to the 'edge.create' event through FB.Event.subscribe.
Google +1
See the callback parameter in their docs. See section +1 Tag Attributes. You provide a Javascript (JS) function to their button. Your JS is then called by them when the button is pushed. Easy!
Related
Is it possible to trigger an "Unlike" event of some specified Facebook fan pages via Javascript (or another language) after a button click, so the users can remove their "Like" from the Facebook fan pages that they want to unlike directly in my web page through a simple "Unlike Button" click ?
This would be the only option, but it does not seem to work for Pages: https://developers.facebook.com/docs/graph-api/reference/v2.5/object/likes#update
In other words, it´s not possible to remove Page likes with the API. You have to present Like Buttons for that.
I have tried adding a Deezer share button in my InApp by adding the dz-share class and the two data attributes like described in the demo InApp instructions:
<a class="dz-share" data-id="302127" data-type="album"></a>
However, nothing happens when I click my share link. I don't even see the click event listeners or the dz-btn dz-parsed dz-inapp dz-widget classes on my link like I see in the demo application. I suspect this is because my app page gets loaded dynamically, i.e. the button element is not initially there.
Is there any way to trigger the Deezer share dialog programmatically with javascript?
You can try DZ.framework.parse().
See the docs here.
Note that you will need your app to be in Deezer to make it work (meaning in the Deezer iframe)
I need to get the status of a twitter "follow" button on load, not on click.
I'm currently loading the button via ajax, and call twttr.widgets.load() to get the widjet.js to do it's magic.
I am aware of binding "follow" and "unfollow" to accept the callbacks from clicking the buttons, but how do I detect the current state of the button before any user interaction?
For instance, the page loads and the user is signed into twitter and currently following the target of the follow button, so it appears that they've already followed the user.
How do I detect this with javascript/jquery? I am not authorizing them through twitter at this point, so I can't check via their api.
Other attempts:
I've also tried getting the contents of the iframe via javascript,
since the twitter follow button iframe has a class specifying the
state of the button, but it doesn't seem to be possible due to CORS.
I expect the answer is you can't.
The twitter follow button is in an iframe expressly to prevent you from accessing it and obtaining information they don't want you to have.
Facebook operates similarly. The like button is in an iframe, and therefore you cannot use it to determine if a person has 'liked' a particular page. That information requires permission from the user.
Is there a way to catch the click event on the FourSquare follow button (https://foursquare.com/business/brands/offerings/followbutton) in order to add Google Analytics tracking with it?
Is there an API similar to the Twitter Tweet button and the Facebook Like button?
I couldn't find anything on the FourSquare site.
There doesn't appear to be comprehensive documentation of the Foursquare follow button, but I've been able to glean this much:
Unlike the Twitter and Facebook buttons, the Foursquare button is not in an iframe. That means you can capture clicks on it as you would clicks on any other element.
$("div[id^=fourSq_widget_id] a").click(function(){
_gaq.push(["_trackSocial", "Foursquare", "Click"]);
});
However, tracking this click doesn't mean anything; it doesn't tell you if the person followed through on the action of following, since that action takes place in a third party iframe.
There does appear to be an undocumented JavaScript API in the fourSq object for tracking the actual follow through on the action, but its not clear how to enable it.
It looks like it's something like:
fourSq.widget.Events.bind("follow", function(){
//do something
});
However, the only way I can seem to trigger it manually is with the accompanying trigger method. So, I'm not sure how to enable this undocumented JavaScript API so that it listens to actions taken in the modal window that pops up..
You could use Google Analytics Tracking feature, check this: http://code.google.com/intl/fi-FI/apis/analytics/docs/tracking/asyncUsageGuide.html
The description of the issue is, if we want to add tracking function to FB & Twitter button, we have to use XFBML method to develop the FB button(please refer to http://developers.facebook.com/docs/reference/plugins/like/ ), because only XFBML method is supported to use Facebook’s Api to catch the click event on facebook like button(no matter which method we use to develop the buttons, the buttons always will be put into an iframe in HTML, the elements in iframe are different domain from our site, so we are not able to control the element in iframe, Facebook & Twitter offer some Apis which can be used to develop and control the buttons, but these Apis only can be called by using XFBML method.), we try to use the Facebook api FB.Event.subscribe (please refer to http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/ see the detail) to catch the click event on facebook button and enable the tracking, it worked and the tracking value can be returned successfully, but our issue is: if we use article & gallery page (article & gallery contain FB & Twitter button),also use FB & Twitter button on NetworkHeader, like this:
If we click the button on header, it will call tracking function and send tracking value, but after clicking the button on header, then click the button in article or gallery, it won’t return any tracking value, our question is: we are not able to differentiate the relative tracking value on header or article, which mean if we click the button on header, it will call FB.Event.subscribe and enable tracking function, but in the same HTML, the button on article also will run the FB.Event.subscribe, although we use independent JS file which is only for FB & Twitter button on header, we are not able to control or modify the Api from Facebook or Twitter, no matter which button(in article or on header) we click, it always will call the first JS file loaded which contains FB.Event.subscribe function, the other Facebook button in the same HTML also will run the function, that mean if we click the other FB & Twitter button in article or gallery, the tracking value is wrong, it will return header button’s tracking value.
Are you able to do me a favor if there is any way to resolve this issue?
Thanks,
Ivan
I've needed to do something similar on a project I've worked on, and this is how I did it.
Firstly the XFBML implementation of Facebook's social plugins isn't the only type that will fire events - the HTML5 version will also. I'd suggest using that version as..well HTML5 is just better markup.
So, the trick here is to provide a ref attribute as part of your element, such as:
<div class="fb-like"
data-href="https://www.facebook.com/"
data-send="false"
data-action="like"
data-layout="button_count"
data-width="150"
data-show-faces="false"
data-font="arial"
data-ref="header">
</div>
Then from within your FB.Event.subscribe function you can do the following:
FB.Event.subscribe('edge.create', function(targetUrl, elm) {
switch(elm._attr.ref) {
case 'header':
// tracking code
break;
case // ... etc
}
});