Capture The Click Of The Twitter "tweet" Button Using Jquery
Solution 1:
You can't handle click events on this element, because it's in an iFrame, however twitter gives you the opportunity to bind events to the button.
Example: http://jsfiddle.net/ZwHBf/2/ Docs: https://dev.twitter.com/docs/intents/events
Code: HTML:
<divclass="social_button twitter_button"><divid="foo"><ahref="https://google.com"class="twitter-share-button"data-count="horizontal">
Tweet
</a></div><scripttype="text/javascript"src="//platform.twitter.com/widgets.js"></script><scripttype="text/javascript"charset="utf-8">window.twttr = (function (d, s, id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
returnwindow.twttr || (t = {
_e: [],
ready: function (f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
</script></div>
JS:
twttr.events.bind('click', function(event) {
console.log('clicked');
});
Solution 2:
Adding a customized Twitter button to your website is a lot easier than you might think.
<ahref="http://twitter.com/share">Tweet</a>
Yes, really, that's all it takes. Give your link some design love and tada! Your very own custom Twitter button.
Opening the Twitter Share Box in a popup window
To show the Twitter Share Box as a popup, simply add some lines of javascript to open the link in a new window. Here's an example using jQuery:
<aclass="twitter popup"href="http://twitter.com/share">Tweet</a><script>
$('.popup').click(function(event) {
var width = 575,
height = 400,
left = ($(window).width() - width) / 2,
top = ($(window).height() - height) / 2,
url = this.href,
opts = 'status=1' +
',width=' + width +
',height=' + height +
',top=' + top +
',left=' + left;
window.open(url, 'twitter', opts);
returnfalse;
});
</script>
Note: This is just an example. You'll probably want to put the javascript code in a .js file and call it on document ready.
$(document).ready(function() {
$('.popup').click(function(event) {
// and so on...
}
});
Setting a default message for the tweet
You can set a default text for the tweet adding a text parameter to the link:
<a class="twitter popup" href="http://twitter.com/share?text=This%20is%20so%20easy">Tweet</a>
Now when your users click on your Tweet link, the message "This is so easy" will appear in the tweet box by default. more..
Post a Comment for "Capture The Click Of The Twitter "tweet" Button Using Jquery"