CODEWITHSUNDEEP
performancefacebooktwittershare
pixelboy
pixelboy

Reputation: 729

FB + Twitter share buttons + FB Like button === huge performance issues

My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale. And today, first real problem. Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button. As you can imagine, 60 iframes opening is just a pain for user experience. My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?

While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.

Upvotes: 4

Views: 1801

Answers (1)

Tarun
Tarun

Reputation: 5524

Best way to improve performance is not to copy paste the code from facebook plugins.

Facebook 'Like Button' code looks like:

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the 

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&amp;xfbml=1"></script>

to header of page and whenever you want a like button, only use 

<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>

Same goes for facebook comments & other plugins.

Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.

Hope this helps!

Upvotes: 2

Related Questions