Difference between javascript and iframe solution for twitter follower button


What is the difference between javascript and iframe solution for twitter follow button? Is there any advantage and disadvantage of these solutions?



The main way to integrate Follow Buttons and Twitter for Websites tools in general is with the JavaScript version. Substantially, it offers the following unique features:

• It handles dynamic sizing of the iframe, so the widget will snap to its content based on usernames, follower-counts, adjustments to text size, and changes in design.
• It supports Web Intent Events, which require code running in the host page to receive and interpret the events.
• In environments where JavaScript is unavailable (either through user intervention or network error), it ensures that the functionality of the button remains in the page as a permalink to the user profile. The content of the iframe itself also depends on JavaScript, so in a script-less context, the button is non-functional.

With those caveats stated though, using the iframe version of a widget can be more performant in your page: In the JavaScript version, your page loads, which then loads our script, which then identifies embedded widgets, which then inserts iframes dynamically and calculates their size, all in a race against time as the other resources of the page are loaded. In the iframe version, your template simply includes the iframe directly.

That iframe performance gain has, in more recent times, been slightly counteracted by our aggressive cache strategy. If you include a Follow Button with JavaScript, the actual iframe content will be a follow_buttom.1234abcd.html, with a hashed code in the file name. We then tell that browser to cache that file forever, and it will be reused on every web page that has a follow button until we push new code, at which point the hash changes. Referencing the frame directly means you don’t get the benefit of such aggressive caching.

In conclusion, if you have a problem including our main script in a page for any reason, you may want to consider using a direct iframe embed. However, some of the performance benefits that the iframe technique was originally documented for are now negated with better caching, and future performance enhancements will also require the JavaScript loader to read from the environment.



Thanks! This is really helpful!