Last update: July 23, 2012

Social media makes it necessary for us to add links, buttons, media, etc from the most popular services such as Facebook, Twitter, Google Plus, LinkedIn and Pinterest; to name a few. Let's forget about that fact that I believe these assets also serve a dual purpose as web "beacons" for the above services ... spying on your users and giving valuable information about your site visitors to these services.

Anyway, I digress . One of the other more visible and immediate problems however, is how much these buttons slow down the loading of your pages (especially the Twitter "Tweet" button and the Google "+1" button), and the contention by some that this in turn can hurt your page rankings.

Here's a summary of what I did to speed up the loading of the Tweet button:

• Familiarize yourself with the official Twitter "Tweet" button developer's page, here
• Pay particular attention to this section on that page.
• After reading all that and using their tools, you will probably end up with javascript code like this:

<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-dnt="true">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

However, this javascript code loads ridiculously slowly and it will significantly slow down the loading of your site.

Instead, use this:


• Twitter "Tweet" button as an IFRAME, horizontal count:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?count=horizontal" style="width:100px; height:20px;"></iframe>


• Twitter "Tweet" button as an IFRAME, vertical count:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?count=vertical" style="width:100px; height:20px;"></iframe>


• Twitter "Tweet" button as an IFRAME, no count:

<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//platform.twitter.com/widgets/tweet_button.html?count=none" style="width:100px; height:20px;"></iframe>
• Notice that I emphasized the parameters count=none etc above? There is a list of IFRAME query string parameters listed on this page.

That's it. This significantly increased the speed of my page loads and allowed me to keep the Twitter "Tweet" button on all my pages!

Updates:
July 23, 2012: More formatting tweaks for clarity.
June 17, 2012: Added tweaks and clarifications.