ReferenceError: "twttr not defined" even when using twttr.ready ()

Question

Firebug console throws an error. It states that the code I'm trying to use to track social events is used before //platform.twitter.com/widgets.js completes the download asynchronously.

ReferenceError: twttr undefined twttr.ready (function (twttr) {

However, I followed the Twitter documentation ( https://dev.twitter.com/web/javascript/events ) and wrapped it around twttr.ready (), just like with the events on Facebook.

<script type="text/javascript"> //load social sharing buttons async (function(w, d, s) { function go(){ var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) { if (d.getElementById(id)) {return;} js = d.createElement(s); js.src = url; js.id = id; fjs.parentNode.insertBefore(js, fjs); }; load('//connect.facebook.net/en_US/all.js#appId=1111111111111111&xfbml=1', 'fbjssdk'); load('https://apis.google.com/js/plusone.js', 'gplus1js'); load('//platform.twitter.com/widgets.js', 'tweetjs'); } if (w.addEventListener) { w.addEventListener("load", go, false); } else if (w.attachEvent) { w.attachEvent("onload",go); } }(window, document, 'script')); </script> <script type="text/javascript"> window.fbAsyncInit = function() { FB.Event.subscribe('edge.create', function(targetUrl) { ga('send', 'social', 'facebook', 'like', targetUrl); }); FB.Event.subscribe('edge.remove', function(targetUrl) { ga('send', 'social', 'facebook', 'unlike', targetUrl); }); } twttr.ready(function (twttr) { twttr.events.bind('tweet', function(e){ if(!e) return; ga('send', 'social', 'twitter', 'tweet', theURL); }) }); </script> 

Any clues?

Answer 1

It looks like twttr is not yet initialized. Make sure the script ( //platform.twitter.com/widgets.js ) loads before the code block that you have.

That is why you get undefined (twttr).

After viewing your changes, it’s very clear what is happening. Your scripts add a head and load scripts after the page loads. Right after you execute the code, which depends on what you put in your head and is still loading, so twttr is not yet initialized.

Try this code below:

 window.addEventListener("load", function() { window.fbAsyncInit = function() { FB.Event.subscribe('edge.create', function(targetUrl) { ga('send', 'social', 'facebook', 'like', targetUrl); }); FB.Event.subscribe('edge.remove', function(targetUrl) { ga('send', 'social', 'facebook', 'unlike', targetUrl); }); } document.getElementById('tweetjs').addEventListener('load', function() { twttr.ready(function (twttr) { twttr.events.bind('tweet', function(e){ if(!e) return; ga('send', 'social', 'twitter', 'tweet', theURL); }) }); }, false); }, false); 

If you need cross-browser support, you can follow what they did in their function to check window.addEventListener first and then go back to window.attachEvent for older browsers.

Answer 2

For those who are having problems with "twttr is undefined", the following solution is for me ...

Include this script after opening the body and make sure that you remove the widget.js scripts from your button if they are copied and pasted.

 window.twttr = (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], t = window.twttr || {}; if (d.getElementById(id)) return t; js = d.createElement(s); js.id = id; js.src = "https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); t._e = []; t.ready = function(f) { t._e.push(f); }; return t; }(document, "script", "twitter-wjs")); 

Answer 3

Well, I had the same problem, but I downloaded the script in a different way. I put the twitter script tag in the head section of my index.html my corner application. But he had one problem, the async attribute was attached to it. After removal, loading the script was no longer asynchronous, but blocking, which was a requirement for me.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

In cases where you need the script to load before parsing the HTML document, remove the async tag.

<script src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Some help is taken from this source: async-vs-defer