Search code examples
performancetwittertwitter-anywhere

Alternatives to Twitter @Anywhere API?

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>
Solution

  • 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.