How To create a NON-JS Facebook like button in showthread? (XHTML validated)

Hello,

If you are the fan of optimizing your vBulletin and pagespeed and you also wanna have an optimized facebook like button code, its what you need

I have tested so many different ways of implanting Facebook like button on my showthread pages , but in most of them I was not satisfied with the effect that they had on my page load time; Suddenly I wondered if there is any way to use the IFRAME method instead of XFBML, cause in the iframe method there is no need for the user's browser to download a ~100kb JS file which takes about 1sec, but the iframe method only works with static urls so I tried to find a way to replace the static url in the iframe codes with a dynaminc one which is the thread url. Finally I figure it out... thanks to vbseo its one of the vbseo's features called linkback url .


Here is the modified code using the vbseo linkback variable :

PHP Code:

<iframe src="//www.facebook.com/plugins/like.php?href=$vbseo_linkback_uri&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=152197071474509" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px"></iframe> 


Important notes :

1.To make this code validated based on XHTML transitional, I removed a part of Facebook iframe code which is :

PHP Code:

allowTransparency="true" 


it does not cause any problems but putting a white back ground behind the like button,
now if you are gonna use this method in a page with a white background there wouldn't be any problems but if your are gonna use it on a colored page you have two ways to use the Transparency feature :

1-Using the vbseo virtual html display feature :

so the code will be :

PHP Code:

<!--VBSEO_VIRTUAL_HTML-->
<iframe src="//www.facebook.com/plugins/like.php?href=$vbseo_linkback_uri&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=152197071474509" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px" allowTransparency="true"></iframe>
<!--/VBSEO_VIRTUAL_HTML--> 


2-If the HTML validation is not important to you , use the below code :

PHP Code:

<iframe  src="//www.facebook.com/plugins/like.php?href=$vbseo_linkback_uri&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35&amp;appId=152197071474509"  scrolling="no" frameborder="0" style="border:none; overflow:hidden;  width:450px; height:35px" allowTransparency="true"></iframe> 


2. This method only works in the showthread pages.


Good luck.
Ali.

Looks very nice Ali , thanks for sharing

hrm, but doesn't all.js still load if you have facebook connect enabled, regardless of how the facebook like is called? (as of 4.1.11 I believe is loads within vbulletin_facebook.js)

Originally Posted by tavenger5

hrm, but doesn't all.js still load if you have facebook connect enabled, regardless of how the facebook like is called? (as of 4.1.11 I believe is loads within vbulletin_facebook.js)

Please note that I am using vb3 and there is no differences if its being loaded from all.js or from the vb files, if you use the iframe method you will save about 1sec on the page load (based on webpagetest.org results)

but please note that I am not so experienced in vb4 coddings so I believe it would be great if Mert give us some info about it.

Regards.

Ah I see - It wasn't clear that this was for vb3