vBulletin CMS Widgets - 8WayRun.Com - XFBML Facebook Like Box

I was looking a while for a good Facebook Like Box widget, but EVERY SINGLE ONE of them here on VB.org uses the IFRAME version, which is absolutely horrible and not customizable. It is ugly and I just didnt want to use it. So I figured out how to get XFBML working on VB4, and you can customize it. The Facebook platform must be enabled in your settings for this widget to work.

DEMO: http://www.8wayrun.com/content/

INSTALL:

1. create a new file "facebook.css" and upload to /clientscript.
   

   .fan_box .connect_widget_facebook_logo_menubar  {
   	display: none;
   }
   
   .fan_box .connect_top {
   	background: #EDEFF4;
   }
   
   .fan_box .connections {
   	padding: 5px 0px 3px 10px;
   	min-height: 0px;
   	background: #FFFFFF;
   }
   
   .fan_box .connections_grid .grid_item {
   	padding: 2px 11px 3px 5px;
   }

2. open "vbulletin_facebook.js" and find:
   

   xfbml:false

   replace with:
   

   xfbml:true

3. create a new widget, with STATIC HTML
   

   <fb:fan profile_id="PAGE-ID" stream="0" connections="6" logobar="1" width="214" height="206" css="FORUM/clientscript/facebook.css?1"></fb:fan>

4. replace PAGE-ID with the ID of your facebook page.
5. replace FORUM with the URL to your forum.

NOTES:

• This like box by defualt does NOT show the stream, and it only shows 6 connections. You can change these settings easily in the widget code. If you disable the logobar, the widget will add "on Facebook" to the title of your page.
• Width and Height are set for no stream, with 6 connections in a 240px widget bar. If you want to change these settings, you will need to change the width and height to fit your forum and settings.
• Facebook CACHES your CSS file! If you change your CSS file, you MUST change the ?1 in your widget to a new number in order to tell the widget which version of your CSS file to use.
• The CSS file already included is what I use on my forum. You can change this CSS very radically to get your widget to look like anything. You can even make the facebook widget transparent to match your skin.

[vo danh]

thank you share

[project-Buckfas]

Exactly what I was after. Thanks!

[sisterhood]

extra nice thx

[Acido]

1. open "vbulletin_facebook.js" and find:
   Code:
   xfbml:false
   replace with:
   Code:
   xfbml:true

This trick solve many integrations problems on my site.
Thank you!

[concepts]

this should work on 4.0.5 correct? I am not having my connections show

SITE

[cory_booth]

Awesome... Like it was said before, this helps alot of integration issues when calling facebook.js...

Question, anyway we can figure out how to flip the false:true bit so future upgrades won't overwrite the edits in core files?

[Tilly]

Nice job.

[Jaxel]

Originally Posted by cory_booth

Awesome... Like it was said before, this helps alot of integration issues when calling facebook.js...

Question, anyway we can figure out how to flip the false:true bit so future upgrades won't overwrite the edits in core files?

That false/true bit is hard coded into the VB4 core. Until IB changes it, you'll need to change it after every upgrade of VB. Honestly there is ZERO reason for this flip bit to be marked false; and the fact that it has been marked false makes me wonder if IB even knows what they are doing.

[Xtrigit]

Nice!

nvm.