I'm integrating the Facebook Send button to our site and I'm trying to run some javascript as soon as the user sends the page to someone. With the Facebook Like button you can subscribe via javascript to the edge.create event which fires when the user Likes the page. Is there an equivalent for the Facebook Send button? I tested it and the edge.create doesn't catch the Send button.
So basically, is there any javascript event handler for the Facebook Send button?
The event you're looking for is "message.send" according to https://developers.facebook.com/docs/reference/plugins/send/
You should be able to add your own listeners by directly subscribing them to the classes prototype.
For example, we use this to reposition the Like/Send menus accordingly once rendered:
var Like = FB.CLASSES['XFBML.Like'];
Like.prototype.subscribe('xd.presentEdgeCommentDialog', function(a){
setTimeout(function(){
var el = $('#like-btn > span.fb_edge_comment_widget');
// console.log(a);
// console.log(el);
el.css('left', '-200px');
el.css('top', '20px');
}, 500);
})
The exact events you can subscribe depend on the class. You'll need to research this by looking to the JS SDK and then backtracking which events are being fired.
Good luck.
Hmm, have you tried to add a function that looks for the send button and adds your own click listener to it when it gets added?
You won't be able to get any information like response.session, but you can tally how many people click the button.
I can see why they didn't include anything to subscribe to with FB.event.subscribe. When they like your page, connect elements on your page are populated with their information when the page reloads (you may reload the page in your method that gets fired). They can send your page to someone without liking you.
Related
I have a web page that shows remote asset data (for example weather station data) and that does background XMLHttpRequest()'s every 5 seconds to our server and reloads the page if new data from the remote asset has been received. This has all been working fine for years.
The page also has numerous links and submit buttons that can be used to go to other pages or submit commands to the server (which then sends a command to the asset). Issue I'm having is that some of the commands the server then executes involve calls to 3rd party web services, some of which can occasionally take up to 30 seconds to return or time out. But in the meantime if new data came in from the asset the background JS function reloads the page, thereby interrupting and cancelling the new http request that the user initiated.
I could probably work around this by adding onclick or onsubmit tags to every link and submit button to call a function to disable the timer, but as there can be dozens of links on the page I am hoping there might be a simpler, more elegant way where one simple function can tell me if the user clicked on something and thereby initiated a new active http session.
I enable my script by doing a setTimeout('myCheckServerFunction("'+url+'")',5000); from the html head. If the server then tells it there is new data it does a setTimeout(function(){location.reload();},5000);
So I'd like to disable the JS timer and prevent any reload if the user has clicked any link or button and thus if a new http session is active. Does there exist a function like this? eg. something like "window.isNewHttpRequestActive()" ? Or maybe there's a way I can check if the window.location changed? (not sure if that would get updated before the new http request is complete.)
Otherwise I could maybe attach a addEventListener() to every link and submit button on the page but I'm a PHP dev not JS so if anyone could recommend the best way to parse the DOM and attach a listener to every link and submit button that would work too.
I did try looking for events that "bubble" up to higher layers eg. the body element and that will catch link clicks but also catches any click even just a click on any blank area, So not sure how well that would work as I'd still need to filter that event to determine if it actually came from a link or button. Thank you.
Listening to all click events on body isn't necessarily a bad idea.
EDIT: As gre_gor pointed out in comment, it might be. The perceived target of the click is not always the link or button if other elements are inside of them.
So my original method, which was using event.target.tagName is to be avoided.
The following code would add an event listener for click on every a element of the document, and let you cancel the timer if it is set :
for (let element of document.getElementsByTagName("a") {
element.addEventListener("click", (event) => {
if (relocationTimeout !== undefined) {
clearTimeout(relocationTimeout);
relocationTimeout = undefined;
}
});
}
Up to you to adapt the selector in the loop to fit your needs.
Of course don't forget to store the timeout reference in a variable when you set it :
let relocationTimeout = setTimeout(function(){location.reload();},5000)
My website, as most websites today, uses the same template for most of its pages and I am building a system that allows for ajax to load only page content without reloading the whole template. For the purpose I'm looking for a method that fires before the browser is redirected to another page. Something like onbeforeunload but I also need to know the location of the redirect, is there such a thing?
I need to catch link clicks, back button clicks, forward button clicks as well as manual redirects like window.location = url
There is no direct way to find out what URL the user is leaving the page for.
You would need to bind event handlers to the various different things that the user can use to leave the current page.
For links, you can bind a click event handler and then examine the href attribute.
For forms, you can bind a submit event handler and then collect the form data and examine the action and method.
For the back button you can bind a popstate event handler (which you could use in conjunction with pushState and friends).
You, obviously, couldn't detect where the user was going if they used a bookmark or just typed a new address into the address bar.
I'm using the AddThis widget to enable the sharing of site content towards Twitter, Facebook and Google+. I have signed in users on my website and am looking into making an association between the signed user and his sharing behavior.
For this I need to listen to the callback of the Addthis widget, here's the direct example from their website:
function shareEventHandler(evt) {
if (evt.type == 'addthis.menu.share') {
alert(typeof(evt.data)); // evt.data is an object hash containing all event data
alert(evt.data.service); // evt.data.service is specific to the "addthis.menu.share" event
}
}
// Listen for the share event
addthis.addEventListener('addthis.menu.share', shareEventHandler);
The problem with this event is that it is triggered before actually sharing something. For example, a user clicks the "Tweet" buttton, this script is triggered, the Tweet dialog is launched, and the user either moves forward or cancels the sharing in that dialog.
Ideally, the event handler is triggered once the actual sharing was done successfully, and not when the user cancels it. It doesn't seem possible from the official documentation, but I wanted to try nevertheless if anyone has a creative workaround?
possible workaround:
i'm assuming that post sharing the addthis content box is altered...do a check for this element (probably a class(es)) to ensure sharing success
Is there an event that fires when a user shares something on their wall?
I'm successfully capturing the subscribe event when they click "Like", but I want one when they share it in the drop down box that shows up when you click the Like button.
I can't find any documentation on this, so I'm wondering if this exists or not.
it looks like you need to listen for the comment.create (instead of the edge.create) event in the FB callback...
http://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/
I haven't tried it, but I suspect it works.
I am trying to alert the user when they leave the shopping page with cart filled up. And also get feedback or the reason for their exit.
I need to get event source id because to know whether they exit my site or navigate by clicking a link in my page.
Any one help me on this...
It's not possible. You should be able to catch if the user clicked a link to leave the page by manually setting up a listener event on each of them, but the browser does not give you any information about what led to the unload event. If it was an event ouside the document ("Back" button etc.), you're out of luck.