I have a situation where I need to include a Twitter profile widget and a Tweet button on the same page. Take the following testing example:
<head>
<title></title>
</head>
<body>
<div class="jb-twitter">
<script src="http://widgets.twimg.com/j/2/widget.js" type="text/javascript"></script>
<script type="text/javascript">
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 4000,
width: 285,
height: 260,
theme: {
shell: {
background: '#ccc',
color: '#333333'
},
tweets: {
background: '#ffffff',
color: '#3d3d3d',
links: '#0066CC'
}
},
features: {
scrollbar: true,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser('westlywright').start();
//Twitter JS Func for sharing
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 = "https://platform.twitter.com/widgets.js";
fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = {
_e: [],
ready: function (f) {
t._e.push(f)
}
});
}(document, "script", "twitter-wjs"));
twttr.ready(function (twttr) {
twttr.events.bind('click', function () {
//some jquery here
});
});
</script>
<a href="https://twitter.com/share" class="twitter-share-button" data-lang="en">Tweet</a>
</div>
</body>
I am getting the following error I am guessing because the two widget.js files are conflicting:
Uncaught TypeError: Object # has no method 'ready'
Does anyone know how to resolve this?
EDIT: Part of the intent of this is to use the Twitter button callback functionality (twttr.events.bind) so that I can track clicks of the button.
Got it working.
The problem was that you needed to reference JQuery and use the JQuery syntax to bind events.