1

I'm attempting to put a tweet box on my website by simply using the @anywhere API by Twitter. While this works fine and is simple to set up, it has the following problems with it:

Are there any other alternatives to using @anywhere?

Edit: Here's my code..

<div id="twitter_widget">
        <script src="http://platform.twitter.com/anywhere.js?id=**MYAPPID**&v=1"></script>
        <script type="text/javascript">
        twttr.anywhere(function (T) {
            T("#twitter_widget").tweetBox({
            label: "<span style='display:block !important;margin-bottom:5px !important;font-family:Helvetica Neue !important; color: #CCC !important; font-size: 18px !important; font-weight: 500 !important;'>Tweet</span>",
            height: 100,
            width: 300,
            defaultContent: ""
            });
        });
        </script>
        <button class="check-twitter" onclick="window.open('http://www.twitter.com','_blank');">Go to Twitter</button>
    </div>
Community
  • 1
  • 1
Charlie
  • 11,380
  • 19
  • 83
  • 138

3 Answers3

1

I am not aware of alternatives to @anywhere. But I don't believe the 3s / 14 requests affect you.

From Twitter's documentation -

"All dependencies for @Anywhere features are loaded asynchronously, on-demand so as to not impact performance of the host page"

In short, this means your page is almost decoupled from Twitter's library. The user should be able to use your page even if Twitter's widgets take a long time to load. It doesn't solve the "loading 14 requests" problem, but it ensures Twitter's performance problems don't become yours.

Notice that I said almost above. Loading an external script as part of you can slow down your entire site. If Twitter's servers are facing a problem, it can lead to a Front End Single Point of Failure.

UPDATE : Per Twitter, loading anywhere.js asynchronously isn't supported. The solution I mention below may or may not work for you, proceed with caution.

So, the best solution I can come up with is loading anywhere.js itself asynchronously. If you are using jQuery, the code would like this - 


//Assumes jQuery was loaded

jQuery.getScript("http://platform.twitter.com/anywhere.js?id=&v=1", function(data, textStatus) {
twttr.anywhere(function (T) {
            T("#twitter_widget").tweetBox({
            label: "Tweet",
            height: 100,
            width: 300,
            defaultContent: ""
            });
        });
});

Put this code just before your closing </head>. It will load anywhere.js asynchronously, and call twitter's function only after the js has loaded.

Sripathi Krishnan
  • 30,948
  • 4
  • 76
  • 83
1

If you want to use @anywhere, you can't do much about it. I've noticed random things in the beginning (like downtime and what not). But generally platform.twitter.com should be speedy enough since it's served by Akamai.

How did you determine it's three seconds, and what exactly takes three seconds? The entire page, or just loading the external JS, etc.?

Your only other option is to use another option which does not rely on including third-party code. That's the only fast option. Third part websites can always be slow, unless of course there is an SLA which guarantees availability and performance.

Till
  • 22,236
  • 4
  • 59
  • 89
  • What 3rd party websites are you referring to? – Charlie Dec 06 '11 at 13:52
  • Any! That's always the problem when you include code from a domain not within your control. We usually version external sources (when possible) and stick them in a 'vendor' dir and combine them for production. This is not possible with @anywhere. – Till Dec 06 '11 at 17:01
  • Just out of curiosity, what do you mean by combine then? – Charlie Dec 06 '11 at 17:18
  • This link explains it pretty well: http://code.google.com/speed/page-speed/docs/rtt.html#CombineExternalJS - you essentially minimize the round trips required to build the page. Compress/minify on top and it'll load one file versus e.g. 10 from different URLs. Saves DNS lookups and makes your own website more robust because you don't rely on other people to keep their site up, etc.. – Till Dec 08 '11 at 13:52
  • Ah, that's what I thought you meant. The whole reason why I wanted to use something other than @anywhere was for just that reason. I am writing a web app for the iPad and I had the pretty intensive app down to 8 requests (+ everything is gripped, and minified) which is including the one image (sprite) I used. That's pretty good, but then I had to include `@anywhere` which made 14 more requests, making the complete loading time far longer than I wanted it to be. Plus I don't have control over Twitter. – Charlie Dec 08 '11 at 17:39
1

The alternative is to make your site a twitter client. That requires you to support oAuth & the twitter API.

rds
  • 26,253
  • 19
  • 107
  • 134