Fire a click on a tweet or follow button with javascript

[phil_gilmore]

Hi everyone,

When you’re using a tweet intent, with the appropriate script tag included, is there a way to programatically fire the click event without requiring the user to actually click the link?

That sounds dodgy, but i have a specific use case which isn’t. We want to include tweet and follow buttons in email campaigns, redirect them to a web version of that campaign, then automatically bring up the popup without them having to click another button. That last point is crucial in terms of follow-up; we all know how annoying extra clicks are from a user perspective. And all this we want to be able to do with the use of the javascript callbacks provided by intents.

Unfortunately using jQuery to fire a click event on the anchor tag doesn’t actually seem to work. The twitter javascript seems to use a different kind of event listener, and i’m not sure how to make it fire. Any ideas?

Phil

P.S. Just to reassure everyone, yes my testing did use a public facing page, the event code was working fine. I just can’t find a way to simulate the click.

[roccVegas]

help me please

[roccVegas]

so can you help with my other problem as well pleez??

[phil_gilmore]

Sorry @ScottRocc, but i’m not really sure what you’re talking about. You appear to be in the wrong thread.

[kurrik]

I would consider being able to do this a bug. Most browsers will block popups that don’t occur in a user-initiated event handler. I’d suspect that the Javascript code which opens the intent popup relies on being called from such an event handler.

[phil_gilmore]

@kurrik - i’m not disagreeing with you, and i doubt it’s an accident that it’s written that way. I was just hoping that in a use case like mine there would be a way to circumvent it, since it is user-initiated.

[benward]

Hi Phil,

The reason triggering a click on the element won’t work is because once initialized, the Tweet Button is actually an <iframe. That’s sandboxed, of course, so you can’t script invocations (and as Arne says, it would trigger a browser’s pop up blocker in any case if you could.)

Putting aside the pop-up issue, the alternative way for you to achieve functionality like this is to sidestep our button products themselves, and instead use Web Intents directly. These are the pop-up interfaces triggered by the buttons that display the Tweet interface, and the mini user profile. So, you can use hyperlinks to http://twitter.com/intent/tweet?url=foo&text=bar and http://twitter.com/intent/follow?screen_name=benward respectively.

I think you’re still going to have pop-up blocker issues, but that’s how to use the Twitter component. Good luck!

[phil_gilmore]

Hi Ben,

As mentioned in the original post, I’m not using the Tweet Button, i’m using the tweet Intent directly as you’ve mentioned, for the advantages of custom styling. I’d already checked in the DOM to see how it renders post-initialisation, and there’s only the anchor tag. The pop-up blocker doesn’t come into it - i just can’t find a way to even start the process.

[kurrik]

I think what Ben was getting at was that the anchors for web intents should be able to be fired by sending a handmade click event to them (via jQuery or whatever). But you would still hit the popup blocker problem.

Since 1.) any popular browser will not allow a popup to be created without user interaction, and 2.) the web intent cannot be rendered inside of an iframe, I think the only possible approach involving intents would be to redirect the user’s entire window to the intent URL.

You might consider using an @anywhere Tweet box (https://dev.twitter.com/docs/anywhere/welcome#tweetbox) but that would require users to approve access to your @anywhere site instead of piggybacking entirely on the Twitter cookie like intents does. Since your stated goal was to remove any extraneous clicks, I don’t think that solution will be attractive to you.

[phil_gilmore]

Hi @kurrik,

Thanks for still engaging. That might be what Ben meant, but that’s exactly what i attempted (firing the click event on the anchor tag). All my registered events fire, but not the twitter ones (unless i actually click the link, which fires everything). And not a peep from the popup blocker.

As you say, chances are the popup blocker will object anyway. I hadn’t thought of that, because in my mind i’m working with a user-initiatied workflow (the click in the email client), but the browser isn’t to know that.

The problem with directing the user to the intent URL is then i lose the ability to register an intents callback, which is the whole point of using intents, as mentioned in the original post. You’re right about the @anywhere box - it would require extra clicks, which is what i’m hoping to avoid.

It’s sounding a lot like what i’m after is just impossible…

[kurrik]

Sorry, I had mentally ignored you stating that Yeah, I think the least amount of friction possible is to use an intents anchor and to require a single additional click.

[peabay]

Most popular browsers don’t block them. Facebook does it perfectly well without forcing developers to use anchors.

I would like this functionality so I don’t have to mess around with HTML too much. It would allow us to do almost everything with javascript, which makes code much simpler.

[Goldnetonline]

Actually, I tried using jquery + firefox + scratchpad to inject a fix on this, I got stuck on what to fire a click on, see my code below:

if i were to click on all the button

// that when the infinite load is triggered and the #timeline is modified,
//the script will still be active
$(document).on(“scroll”, function()) {
// The class name for all the buttons is .follow-button
$(document).find(“button.follow-button”).each(function(i,e) {
$(this).trigger(‘click’); //Trigger a click on all of them;
})


The above works perfectly but when you have already followed someone, it unfollow the person

to work around this i need a condition to skip such button;

$(document).scrollTop($("#timeline").height())
$(“document”).on(“scroll”, function() {
$(document).find(“button.follow-button)”).each(function(i,e) {
// alert("Triggered on " + i + " Element " + $(e).text());
// This is where the problem is, I dont know the condition to use, the button when
//inspected with js has the follow, following, pending, cancel and unfollow all in the same
//button. if I fire a click on the span.follow-text, it will not perform this action as it is not
//the button itself, please help no harm intended.

if ($(this).hasClass(".follow-combo")) { //fake condition
$(this).trigger(‘click’);
console.log($(this).offset.top + " from top");
// Scroll down a bit after each trigger
if (i > 6) {
$(document).scrollTop($(this).offset.top + 200)
}
}
})

})

please note that no harm intended, I just dont like clicking the follow button, wastes my time

[niall]

[andypiper]