The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

Famax jQuery plugin : Infinite Facebook fanpage feeds on your website

Tags :

Plugin rate :

Famax displays your complete Facebook Fanpage data on your website! You can post images/videos on your fanpage and it will be reflected on your webpage.

 

You can customize Famax UI as per your requirement. Ex: Set Famax columns to 3 to display a Pinboard kindof view; set Famax columns to 2 to display a timeline kindof view, or set Famax columns to 1 to display a widget kindof view... and so on...

 

Features :
- you can customize width and height of the widget on your website. - columns for the posts can be customized (Example: you can now have a 1/2/3/4...-column layout for the posts displayed.)
- the widget itself is responsive; given a width or % for the widget, the inner contents will resize accordingly.
- parts of the plugin like header/tabs can be hidden as per requirement.

Implementation: 

HOW TO USE

The download pack contains the plugin file - famax.min.js and the HTML file deployed in the demo famax.html

 

1. CREATE YOUR FACEBOOK APP (Optional, but highly recommended)

You need to create a Facebook app and specify your website that has the Famax plugin.
The details you fill in here don't matter. This step basically gives you an App Id and an App Secret that allows your users to have read-only access to your fanpage. Note the App Id and App Secret for your Fb app.

 

app.png

 

 

2. SPECIFY TOUR FANPAGE URL

Enter your Facebook fanpage URL in a piece of javascript as shown below. Ex: http://www.facebook.com/codehandling

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
 //mandatory----------------
 var facebookPageUrl = "https://www.facebook.com/adidas";
  
 //optional-----------------
 //fbAccessToken is your "AppID|AppSecret".
 //This parameter is highly recommended.
 var fbAccessToken = "460135344048321|44473b4be8cdf726e70daaff38068ab8";
 var famaxWidgetWidth = 800; 
 //var famaxWidgetHeight = 400; 
 var pathToLoadingImage = './loader.gif';
 var famaxColumns = 2;
</script>

 

 

Other functionalities:
To hide the account info header (black) of Famax widget, add the below code in your css

1
#famax-header{display:none !important;}

 

To specify the width of Famax widget as a percentage(%), add the below code in your css

1
#famax{width:100% !important;}

 

For any other specific requirement, just let me know and I will provide a hack!

 

 

3. INCLUDE PLUGIN

Include the jQuery plugin if not done already. Now, include the plugin famax.min.js before the end of your body tag and you are done!

1
2
3
4
5
6
<body>
  ...
  ... 
  <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
  <script src="./famax.min.js"></script>
</body>

 

 

4. CREATE A CONTAINER FOR YOUR INTERFACE

Add a div as shown below in you HTML. This div will contain the Famax widget and display your Albums and images.

1
<div id="famax"></div>
Options: 
facebookPageUrl
String
This must be the URL for your Facebook fanpage (Ex: http://www.facebook.com/codehandling). This is a mandatory attribute.
fbAccessToken
String
Provide your App Id and App secret from your Facebook App you created earlier. Both these values should be separated by "|" (Ex. fbAccessToken = "1234567|5678lmghjferednjdnfkmeki")
pathToLoadingImage
String
This the path to a loading image that is used by Famax. Basically this image is shown when the next image is loading in the lightbox. (I have provided a loading image in this download; just provide the path to that image after you upload it to your server
famaxColumns
Integer
Default : 2 - The number of columns (for posts) to be displayed in the body of the widget. If this is not supplied, a 2-column layout will be selected and displayed.
famaxWidgetWidth
Integer
Default : 640 - The width of the Famax widget. If this is not supplied, width of Famax defaults to 640px.
famaxWidgetHeight
Integer
The height of the Famax widget. Ideally this value should not be supplied. If this is not supplied, the Famax widget takes the minimum height it needs to display posts from you Fb fanpage.
Screenshots

Comments

that was great tutorial, but does this will affect loading time of my blog? plese visit my blog at Jasa like facebook

Hello, I'm trying to configure the Famax app to my fan page but its now loading. Please help. https://www.facebook.com/pages/Ziplining-Grenada/573239209391748

Noticed your demo is not working. Has Facebook changed their Fan Page view policy? If so, is there a work-around?

Noticed your demo is no longer working. Has Facebook changed how they allow Fan Pages to be rendered?

A Working demo has been added!

Cheers:)

Some parts of the Facebook API have been changed, so please use Famax 3.0 version - Works Perfectly :)

http://www.codehandling.com/2015/02/famax-30-bring-facebook-to-your-users.html

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.4
Current version
1.0
Browsers compatibility
Google ChromeIE 9Mozilla FirefoxOperaSafari
Comments [6]