Friday, 19 April 2013

Famax 1.0 - Infinite Facebook fanpage feeds on your website


Famax 4.0 released

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.







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.



2. Specify your Fanpage URL

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



The description of all variables is shown below -



facebookPageUrl
This must be the URL for your Facebook fanpage (Ex: http://www.facebook.com/codehandling).

This is a mandatory attribute.
fbAccessToken
Provide your App Id and App secret from your Facebook App you created earlier. Both these values should be separated by "|". (Ex: If your facebook App Id is "1234567" and App Secret is "5678lmghjferednjdnfkmeki" then your variable becomes : var fbAccessToken = "1234567|5678lmghjferednjdnfkmeki";).

If this is not supplied, a default value will be used, but your hits per day for the Facebook API will be limited. Hence recommended to use your own App Id and Secret values.
pathToLoadingImage
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)

If this is not supplied, no loading image is shown.
famaxColumns
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
The width of the Famax widget.

If this is not supplied, width of Famax defaults to 640px.
famaxWidgetHeight
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.

Other functionalities:

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

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

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

2. Include plugins

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!


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


Thanks!

37 comments:

  1. FANTASTIC!!!
    Really thanks for the hard work dude!

    THANKS THANKS!

    ReplyDelete
  2. This is MIND-BLOWING !!!!
    Man !!! I salute you
    Add some more cool features to it, this is really interesting and can be expanded even more.
    Triple Thumbs Up buddy !!!!

    ReplyDelete
  3. This is awesome!!!!

    Thanks to you dear for
    this useful productivity online.

    ReplyDelete
  4. Thanks for sharing. I'm still getting a hang at coding so this will be very helpful.

    ReplyDelete
  5. Thank you very much for a great plugin! Of course my customer is looking for IE 9 and lower support which gets stuck at "Loading"--any pointers? I am glad to contribute if you can guide me where to look.

    ReplyDelete
    Replies
    1. Sorry for the late reply .. actually IE does not allow the AJAX from Fb so you dont get any data from it ..

      We are looking into it. We will make a Github link and share it with you

      Delete
  6. how could i use that for wordpress?

    ReplyDelete
    Replies
    1. get FTP access to your site and edit the code ...
      You may add the JS in your page then.

      Add the div tag in your HTML where ever you want the widget to appear!

      Delete
  7. Load more not working at my end... Only 2 of the latest posting are displayed... Any help would be really appreciated...
    Thanks in advance

    ReplyDelete
  8. Can like button be added in each post in our site just like in facebook... I mean can a like button be added in our site after each posting??

    ReplyDelete
  9. Cool plugin. Is it posible to give a maximum amount of posts? That would be cool. And if the images are in a image tag, you can make them responsive to. That would be awesom.

    ReplyDelete
  10. Is anyone else having problems today (7/25/2013)? Was working fine but today the word "Undefined" is displayed on the left and no feed. Two possible problems I'm checking on 1.) Facebook made a change, 2.)I had added another plugin earlier but when I noticed this problem I removed it - think everything was put back to original state - but still checking.

    ReplyDelete
    Replies
    1. OK, got it to work. Had to press the Compatibility link on my IE browser. Thanks for the Plugin.

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Great work guys, unfortunately it wouldn't display my fan page. https://www.facebook.com/GrenadaZipLining any help would be greatly appreciated. Thanks in advance.

      Delete
  13. Is it possible for this to work with Facebook profile accounts, i.e., personal pages?

    ReplyDelete
  14. This is terrific! I have just one question. My site resides on a CMS so I need a solution that allows me to display different FB pages on different pages. Is there a way to hook the code in the backend and then simply specify a fb page inside the HTML of page to pull different pages on different pages? thanks for your time..this is great!

    ReplyDelete
  15. Great work guys, unfortunately it wouldn't display my fan page. https://www.facebook.com/GrenadaZipLining any help would be greatly appreciated. Thanks in advance.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  16. Please, I need it works in IE 9. Can anyone help me?

    ReplyDelete
  17. Hi, i have pictures that are not posted complete (thumbnails), they are to less in height. Any idea how to fix that?

    ReplyDelete
  18. Seriously awesome..!!Thank you soo much

    ReplyDelete
  19. Don't know if you are still around to answer a quick question, but, where in the .js can we alter the thumbnail image size? Currently it defaults to 's' for small and I would like to use either 'n' for normal or 'o' for original

    ReplyDelete
    Replies
    1. Anyone found a fix allready?

      Delete
  20. Does anyone has any idee how to fix the too small resolution done by a facebook change this days?

    ReplyDelete
  21. I solved this by changing the links to the pictures.

    Old code at row 265 following:
    if(null!=fbAttachmentList&&fbAttachmentList!=""&&fbAttachmentList!="undefined") {
    for (var k=0;k<fbAttachmentList.length;k++) {
    attachment_type=fbAttachmentList[k].type;
    attachment_display=fbAttachmentList[k].src;
    attachment_href=fbAttachmentList[k].href;

    New code at row 265 following:
    if(null!=fbAttachmentList&&fbAttachmentList!=""&&fbAttachmentList!="undefined") {
    for (var k=0;k<fbAttachmentList.length;k++) {
    attachment_type=fbAttachmentList[k].type;
    attachment_display=fbAttachmentList[k].src;
    attachment_href=fbAttachmentList[k].href;

    var sindex = attachment_display.lastIndexOf("/");
    var slength = attachment_display.length;
    attachment_display = "https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xaf1/" + attachment_display.slice(sindex, slength);


    This code takes the picture ID of the original link and attaches this ID to a predefined URL.

    ReplyDelete
  22. Noticed your demo is not working. Has Facebook changed the way they allow Fan Pages get rendered? I'm using your code on my website as well and it too is currently not working.

    ReplyDelete
  23. Is anyone else having issues getting this code to work? It worked a few months ago but now, nothing. I am using this code on a number of sites and really would like to continue using it. Any assistance would be most welcomed.

    ReplyDelete
  24. Yes, facebook api has changed and a new version of Famax will be live soon :)

    ReplyDelete
    Replies
    1. Thanks Jake! Looking forward to your new release and getting the code working again.

      Delete
  25. Hey Guys, Famax 2.0 is live now :)
    http://www.codehandling.com/2015/01/famax-20-facebook-fan-page-on-your.html

    ReplyDelete
  26. Free version of Famax is also Live now!
    Check out the new Demo and the Download..
    Enjoy :)

    ReplyDelete
  27. I bought famax 4 some time ago. Awesome plugin.
    One Question: Yesterday, all the images were blurry - today everything is fine again... Any idea why?

    ReplyDelete
    Replies
    1. Hi Mopi,

      This can be due to Facebook changing some algorithms. If you have not changed anything from Famax end then it is fine. Nothing to worry about.

      Cheers :)

      Delete
  28. The live demo no longer works on this page....

    ReplyDelete