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.
   
   Code:

   ---

   .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:
   
   Code:

   ---

   xfbml:false

   ---

   replace with:
   
   Code:

   ---

   xfbml:true

   ---

3. create a new widget, with STATIC HTML
   
   Code:

   ---

   <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.

thank you share

Exactly what I was after. Thanks!

extra nice thx

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

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

SITE

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?

Nice job.

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.

Nice!

nvm.

This is cool. I did something similar last night (before I saw this mod) by using Facebook's Social Plugin Like Box.

I'm curious: is there a reason why I should NOT use Facebook's version?

Attachment 121684

Facebook's version of what?

Will this work as a fluid width instead of a fixed pixel width?

Chris

I'd like to know the answer to that too... I've been looking for a fluid width fb widget solution!

BIG Thumbs UP! I like it!

I don't think it is possible to make this fluid width, however, it is scalable enough that I can do what I need.

I have a couple of cosmetic problems though, I'm hoping you can help me with:

http://nashvillechristian.com/images...et_fb_like.jpg

The block I have this in needs to be only 175px wide. Because of this, and the fact that my domain name is rather long, my application/domain name is WRAPPING underneath my application IMAGE. Somehow I need to restyle this. Either I need to remove the domain/application name, or I need to remove the application image, or I need to place the domain/application name above the image, so the like button could be beside the image, or I need to remove both the domain/application name and image, leaving only the like button on the top portion.

Do you have any ideas about HOW I could make this look best? Here is my WEBSITE.

Thanks for this handy little widget and for helping me!

Peace! :D
Jeff

Can this mod be used for friends or members of facebook as well?.....with an add as friend or join button.

Thanks
Sunil

@NashChristian... try this:

Figured it out using Firebug... thanks Jaxel!

How would I incorporate this mod into this mod: https://vborg.vbsupport.ru/showthread.php?t=233871

Chris

I got it work just fine now within the sidebar, but how do you change it to be fluid width and height? I tried just doing 100%, and it makes it smaller for some reason.

Chris

Argh I hate Facebook at times!

I'm using the iframes version and some of my users have just reported that you get an permission error if you view it and you're not currently "logged in" to FB..

Thought I'd try your version and you get a blank box if you're not logged into FB.

I've looked on the developers forum and it seems everyone is having the same issue and some claim the javascript SDK version works?!

Yep, this is true...doesn't ever seem like anything is perfect, that's for sure. If someone isn't registered on Facebook, let alone logged in, wouldn't it be nice to still have it there to help those that aren't sign up or sign in? Duh!

I've worked it out!

This should work for all versions: Iframe, Jaxels & JS SDK

It's down to permissions really, Check the settings for your FB group page and make sure that:

The country access is set to all and FB age is 13+ and that's should 'fix' it!

You da man...mine was set to that, but after I went in to save it again, it worked. Before, even though it appeared to be setup that way, it didn't work. Nice work...

Chris

Awesomeness!

does this work with 4.1.? Not for me..anyone else got problems?

Worked for me on 4.1.2.

I've done the steps. I see the widget, but it only shows a "partial of it" - I could only see the top left corner of it. How do I fix this problem?

Awesome! I love it,. works for me on Version 4.1.4

Using it on http://shiftslow.com only

Would like work for sidebar also?

what does this do? I do not understand the description and the demo link is invalid