Isolate FB.Event.subscribe 'edge.create' to single like button - facebook

This is my first stackoverflow question. yay.
Ok. I am attempting to splittest or a/b test copy for a featured facebook like button by using google analytics:
_gaq.push(['_trackEvent', 'facebook', 'click', 'amazing copy that hypnotizes user into clicking like']);
All fine and dandy so far.
To reign in the like/unlikes I found this snippet:
<script type="text/javascript">
<!--
FB.Event.subscribe('edge.create', function(href, widget) { _gaq.push(['_trackEvent', 'facebook', 'click', 'amazing copy that hypnotizes user into clicking like']); });
FB.Event.subscribe('edge.remove', function(href, widget) { _gaq.push(['_trackEvent', 'facebook', 'click', 'amazing copy that hypnotizes user into clicking like']); });
-->
</script>
Ok, everyone is with me so far? Now this (in theory) will give me like and unlikes for the featured experimental like button, but it will ALSO send data on other like buttons on the page, correct?
The question is: How do I isolate the edge.create callback (or whatever) to only fire when the desired like-button is clicked? Is there parrameters or arguments I can pass to the fb.event.subscribe that will check if the 'liked' url is the desired facebook page, maybe? or maybe if the liked url differs from the domain?
I am a total newb with js, jquery, and anything beyond basic php, html, or css. please help! :P

This is the actual documentation for FB.Event.subscribe.
I don't know where you got your snippet but the doc says it only returns 1 parameter in the callback.
FB.Event.subscribe('edge.create', function(response) {
alert('You liked the URL: ' + response);
});
If you want to separate like buttons, the answer is not in what you pass to the function, but what you receive from the callback.
After you receive the data in response, that is where you do the separate action you want with each URL to be liked. That 'data' in response is the URL that the user liked.
In that way of thinking, then you should:
FB.Event.subscribe('edge.create', function(response) {
if(response == "FULL-URL-YOU-WANT-SEPARATED"){
_gaq.push(['_trackEvent', 'facebook', 'click', 'amazing separate copy that hypnotizes user into clicking its own like button']);
}
});
If you want to detect if that URL is any link from a specific domain, you might wanna get the URL's domain and check if response startsWith it.
EDIT:
Try this and see if theres a pop-up box, only when your own like button is clicked.
FB.Event.subscribe('edge.create', function(response) {
if(response == "https://www.facebook.com/mysticpoliticsradio"){
alert("Your like button has been clicked.");
_gaq.push(['_trackEvent', 'facebook', 'click', 'amazing separate copy that hypnotizes user into clicking its own like button']);
}
});

Use it like
function(response,widget) {
if(widget.dom.id == "your fb_button_id"){
alert("Your like button has been clicked.");
_gaq.push(['_trackEvent', 'facebook', 'click', 'amazing separate copy that hypnotizes user into clicking its own like button']);
}
}
add your fb button like this
<div class="fb-like" data-send="false" data-layout="box_count" id="fb_button_id"></div>

Related

Facebook Pixel to track a click on a link

I want to track each time someone clicks on a link on my web (this click makes a file to be downloaded) to optimise my Facebook Ads (pay per conversion). After including the Facebook pixel in the head section of my web, I have to track this event, for example as a "lead", so I'm using this piece of code at the beginning of the body:
<script type="text/javascript">
$( '#link' ).click(function() {
fbq('track', 'Lead');
});
</script>
Please note that "link" is the id I've set for the link:
<a id="link" href="/content/file.zip">press here</a>
However, I'm tracking a "PageView" (because of the first code in the head section), but I'm not tracking the lead event (the click on the link).
I've also tried this one:
<script type="text/javascript">
$("#link").on('click', function() {
fbq('track', 'Lead');
});
</script>
And I've also tried with an onclick event in the link, like this:
press here
<script type="text/javascript">
function fileDownloaded() {
fbq('track', 'Lead');
return true;
}
</script>
Nothing works for me (I've also put the code of the event at the end of the body section). What am I doing wrong?
Thanks a lot.
I've found a solution that works for me, in case is useful for someone else:
Instead of putting the link inside an href, I've moved the link to the javascript function.
I've used an onclick method to call the javascript function in which I first call the Facebook event to track, and then the download of the file starts.
The result is something like this for the HTML (the text I want to link):
<div onclick="fileDownloaded()">press here</div>
And something like this for the javascript function I want to track with Facebook pixel when someone clicks on the link (at the end of the body section):
<script>
function fileDownloaded() {
fbq('track', 'Lead');
window.open("/content/file.zip","_self")
}
</script>
Best regards.
If you put the URL inside javascript, the link will be "dead" for any visitor that doesn't have scripts enabled in their browser.
You can just put fbq() inside a function inside separate script tags like so:
//pixel code above
fbq('track', 'PageView');
</script>
<script>
function Lead(){ fbq('track','Lead'); }
</script>
<body>
Click tracked by FB!
I use this with image;
<a href="https://downloadurl">
<img src="target image" alt="xxx" onclick="fbq('track','Lead')"/>
</a>
this works if you have installed the fb pixel code in the website header.

Redirect in url after pressing like button

I have a fb application and i when i press the like button i want to refresh page or even redirect it to the same url.
I have this code:
<script type="text/javascript">
FB.Event.subscribe('edge.create',
function(response) {
window.top.location.href = "http://www.myurl.com";
}
</script>
Works perfectly in Firefox not in Chrome..
Any ideas?
Thanks in advance!

jqtouch go back after form submiting

I'm using jQtouch to build a page where the user can enter a kind of an ID and
get information (exam result) for this ID.
Because I take the results from the server, I used a form in the first page
with a text field and a submit button, and the action of this form send the user to the next page. Or at least, supposed to...
The problem is that also I'm being transferred to page with the results, and see the results properly, the Back button do nothing! BTW, in the address bar (above) I still see the name of the first page.
How can I go back to the "form" page? Thanks
<div class="current" id="byUserId">
<div class="toolbar">
<a class="back" id="goBack" > Back</a>
<h1> Exam Results</h1>
</div> ...
where the id="goBack" has a javascript:
$(function() {
$('#goBack').click(function() {
location.href = "enterId.jsp";
});
});
Using the regular back doesn;t work either:
<a class="back" href="#"> Back</a>
I now this is pretty late, but I had a similar frustrations and finally figured it out. The problem is that jQTouch intercepts all AJAX and form submit commands and safely send them itself. This isn't a problem except for when it's expecting some sort of callback, and there isn't one. In my case, I wanted to submit a form without a callback. To do this, look in the jqtouch.js library (around line 434) and comment out the following line:
if (href != '#') {
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data) {
**// var firstPage = insertPages(data, settings.animation);**
This basically just tells jQTouch to submit the AJAX call but do nothing afterwards (don't change div's, don't show any callbacks and don't do any animations). Hope this helps.

logout button in FaceBook SDK

I have this fb-login button on my website and it works pretty okay.
How can I implement an logout button? Below is my code for the login part.
<fb:login-button size="small" onlogin="RedirectLogon();" perms="email,user_birthday" autologoutlink="true">
<%=LanguageManager.Instance.Translate("root/facebook/login")%>
</fb:login-button>
If you want to implement such buttons into one multifunctional button, use this:
<fb:login-button autologoutlink="true"></fb:login-button>
Note that if you add any custom code to the above line, the button won't work.
You can do it by using the following HTML and javascript function.
<script>
function fbLogout() {
FB.logout(function (response) {
//Do what ever you want here when logged out like reloading the page
window.location.reload();
});
}
</script>
<span id="fbLogout" onclick="fbLogout()"><a class="fb_button fb_button_medium"><span class="fb_button_text">Logout</span></a></span>

jQTouch bind("pageAnimationEnd") when page is loaded dynamically

In jQTouch I am fetching a page dynamically from the server per the jQT demos per
The Page
It loads the HTML snippet into
<div id="page">
Normally I'd be able to do
$('#page').bind("pageAnimationEnd", ...)
to know when the page had finished loading, but it doesn't seem to work with dynamically loaded content. I've been trying to find a workaround but haven't been able to. I think that this question on SO is asking the same thing, but there didn't seem to be any conclusive answer.
If you have access to the "page", just put the javascript on that page and it will be executed when it is done loading. So in the page html you could just add ...
<script>
$(function() {
do something when im finished
});
</script>
$('#myid').live('pageAnimationStart', function(e, info){
//do something
}).bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
//do something
}
});