For a new website I’m building, I’m trying to properly embed social media counter widgets from services such as Facebook, Twitter, Digg, Reddit, StumbleUpon, and Buzz.
Using iFrame are messy and <script> tags also cause major slowdowns when it comes to rendering and loading a page. I’ve noticed that pages often take significantly longer and pause loading half way down due to a slow response from one of those social networking sites.
Therefore, I’m trying to write these widgets in once the document is ready. Is that a good idea? Or are there any drawbacks?
Here are just a few of the examples:
For a Facebook like button, I did this:
$('.likebox').append(' <iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Ffacebook&layout=button_count&show_faces=false&width=150&action=like&font=arial&colorscheme=light&height=21" style="border:none; overflow:hidden; width:150px; height:21px;"></iframe>');
However, how do I deal with widgets like this?
<a href="http://twitter.com/share" class="twitter-share-button" data-url="<?php the_permalink() ?>" data-text="<?php the_title(); ?>" data-count="horizontal" data-via="twitter" data-related="twitter">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
or
<script src="http://www.reddit.com/domain/cnn.com/new/.embed?limit=4&t=all&sort=new&style=off" type="text/javascript"></script>
Any suggestions as to efficiently and properly embedding these or other widgets would be appreciated. Thanks!
You’re looking for “asynchronous javascript loading” or “lazy loading”
http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
Why not create another page with all the requisite widgets, in the order you want them, and then pass that as the src of an iframe you add to the html (like you did in the first example) ?
Worst case scenario, use multiple different iframes and append them to the html wherever necessary.