Register Members List Search Today's Posts Mark Forums Read

Reply
 
Mod Options
8WayRun.Com - XFBML Facebook Like Box Details »
8WayRun.Com - XFBML Facebook Like Box
Mod Version: 4.0.0, by Jaxel (Coder) Jaxel is offline
Developer Last Online: Sep 2013 I like it Show Printable Version Email this Page

vB Version: 4.0.6 Rating: (5 votes - 4.80 average) Installs: 35
Released: 29 Aug 2010 Last Update: Never Downloads: 0
Not Supported Code Changes Additional Files External Content  

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.

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  2. open "vbulletin_facebook.js" and find:

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

    replace with:

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  3. create a new widget, with STATIC HTML

    Block Disabled:      (Update License Status)  
    Suspended or Unlicensed Members Cannot View Code.

  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.

Download Now

Only licensed members can download files, Click Here for more information.

Show Your Support

  • To receive notifications regarding updates -> Click to Mark as Installed.
  • If you like this modification support the author by donating.
  • This modification may not be copied, reproduced or published elsewhere without author's permission.
Similar Mod
Mod Developer Type Replies Last Post
Mini Mods YoBroMoFo - Facebook FanBox widget TimberFloorAu vBulletin 4.x Add-ons 44 27 Oct 2012 11:04
Mini Mods [Widget] Facebook Recommendations & Facebook Recent Activity saviola8x vBulletin 4.x Add-ons 8 25 Nov 2011 17:23

Comments
  #2  
Old 29 Aug 2010, 11:22
vo danh vo danh is offline
 
Join Date: Aug 2010
thank you share
Reply With Quote
  #3  
Old 29 Aug 2010, 12:56
project-Buckfas project-Buckfas is offline
 
Join Date: Jul 2006
Real name: David
Exactly what I was after. Thanks!
Reply With Quote
  #4  
Old 29 Aug 2010, 14:18
sisterhood's Avatar
sisterhood sisterhood is offline
 
Join Date: Nov 2008
extra nice thx
__________________
INTERPOL

-The Community-
Reply With Quote
  #5  
Old 29 Aug 2010, 14:43
Acido Acido is offline
 
Join Date: Apr 2003
  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!

Last edited by Acido; 29 Aug 2010 at 14:44. Reason: typo
Reply With Quote
  #6  
Old 29 Aug 2010, 22:06
concepts's Avatar
concepts concepts is offline
 
Join Date: May 2005
Real name: Jamale
this should work on 4.0.5 correct? I am not having my connections show

SITE
__________________

Achieving Superior Aesthetic Conditioning
Reply With Quote
  #7  
Old 30 Aug 2010, 01:59
cory_booth cory_booth is offline
 
Join Date: Jul 2006
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?
Reply With Quote
  #8  
Old 30 Aug 2010, 02:29
Tilly Tilly is offline
 
Join Date: Sep 2007
Nice job.
Reply With Quote
  #9  
Old 30 Aug 2010, 04:29
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Originally Posted by cory_booth View Post
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.
Reply With Quote
  #10  
Old 30 Aug 2010, 07:31
Xtrigit's Avatar
Xtrigit Xtrigit is offline
 
Join Date: Jan 2010
Nice!

nvm.
__________________
Have been very sick...
Reply With Quote
  #11  
Old 07 Sep 2010, 20:19
biggeorge's Avatar
biggeorge biggeorge is offline
 
Join Date: Mar 2007
Real name: George
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?

Image16.jpg
Reply With Quote
  #12  
Old 08 Sep 2010, 06:03
Jaxel Jaxel is offline
 
Join Date: Sep 2005
Originally Posted by biggeorge View Post
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?
Reply With Quote
  #13  
Old 23 Sep 2010, 18:18
ravencr ravencr is offline
 
Join Date: Feb 2007
Will this work as a fluid width instead of a fixed pixel width?

Chris
__________________
www.utvrally.com
Reply With Quote
  #14  
Old 27 Sep 2010, 09:38
NashChristian's Avatar
NashChristian NashChristian is offline
 
Join Date: Jul 2007
Real name: Jeff
Originally Posted by ravencr View Post
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!
Reply With Quote
  #15  
Old 27 Sep 2010, 11:52
NashChristian's Avatar
NashChristian NashChristian is offline
 
Join Date: Jul 2007
Real name: Jeff
Question

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:



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!
Jeff

Last edited by NashChristian; 27 Sep 2010 at 12:15.
Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Mod Options

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off


New To Site? Need Help?

All times are GMT. The time now is 05:31.

Layout Options | Width: Wide Color: