Sunday, 10 February 2013

Facio 2.0 - Infinite Facebook fanpage feeds with Likes!


Use Famax 1.0 - new & free version

This is the version 2 of the Facio plugin introduced earlier.

Features added in version 2:
- displays videos from your fanpage feeds.
- links on your fanpage are displayed and work correctly.
- more feeds from your fanpage shown as user scrolls down (infinite scroll).
- the widget itself loads asynchronously after your webpage is displayed, so it does not slow down your pageload speed.

Basic Features:
- displays feeds from your facebook fanpage.
- also displays posts made by other people on your fanpage .
- a like box for your page is displayed at the top to increase your followers.
- customizable width and height of the widget.






Created on the request of our client... Mr.BackWooD

How to use:

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

1. Specify your blog URL

Enter you facebook fanpage URL in a piece of javascript as shown below. You may also customize the dimensions of your widget as required.


2. Include plugins

Include the jQuery plugin if not done already. Now, include the plugin facio.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 facio widget and display likes with Fanpage feed.



Voila! - fanpage feeds on your webpage - done!

52 comments:

  1. Hi Jake!

    I love your plugin! Is it possible to change the language of stream (e.g. "added a new photo")?

    And the color of the facebook-name (now "adidas" is a dark red)???

    Thank you very much!

    ReplyDelete
    Replies
    1. Thanks Tobias!

      1. To change the color of the facebook post author name just add the below line within your style tag-

      #facio span{color:blue !important};


      2. As far as the language is concerned, it comes from the facebook stream server, so changing that would difficult. But if thats really a concern, what I can do is remove the shared line and just keep the message from the post ..

      Example :

      POST - "adidas shared adidas Baseball's photo.
      BOOST is all in!!"
      [picture goes here]

      becomes

      POST - "BOOST is all in!!"
      [picture goes here]

      Let me know if you want to customize in the above manner and I will share the updated plugin file with you..

      Also let me know if you have any other plugin ideas and want us to build that :)

      Delete
  2. Hi Jake,

    I´m trying to make it work on Android, with Eclipse.
    My problem is that don´t show the videos.
    Any idea why ?

    Thank you very much.

    ReplyDelete
    Replies
    1. Soory but it works on my android .. cant say :|

      Delete
    2. Doesn't work with me too
      Android 4
      I the scrolling is inconsistent maybe because of the scroll bar
      also videos don't appear
      and images are not clickable

      anyway, great work Go On

      Delete
    3. Please try out the new version n let me know -

      Famax : http://www.codehandling.com/2013/04/famax-10-infinite-facebook-fanpage.html

      Delete
  3. How can I disable the "like box"? I don't want to show it...

    Thx

    ReplyDelete
    Replies
    1. Just add the below line in your webpage .. wrapped in a style tag

      #facio>div{ display:none !important;}

      This hides your like box :)

      Delete
  4. after using this escript in my first project and receive many customer requests for me to do work on internet explorer and try to find a solution and can not find just finding something similar and simpler than most works both still like the way load endless facio would study how this script runs and implement the functionality to run it in ie? follows the link:

    http://www.guillaumevoisin.fr/jquery/tutoriel-graph-api-json-et-jquery-afficher-un-mur-facebook-sur-votre-site/comment-page-1#comments

    ReplyDelete
  5. Unable to load in IE, any thoughts?

    ReplyDelete
    Replies
    1. Bill, im working on a new version on Facio
      It has a totally different view n is pretty cool. (with IE9+ support)

      Delete
  6. Is it possible to load facebook like page url in div section fully as same as browser view.

    ReplyDelete
    Replies
    1. If you mean that the UI of Facio should match as that on the Facbook website ... then; Yes, our team is working on the next version with Fb like view ..

      Please stay with us!

      Delete
  7. HAHAHA, Fantastic, You guys rule! Gonna implement it right away!

    Serious, thanks a lot!

    ReplyDelete
    Replies
    1. Check out the Famax 4.0 :)
      http://www.codehandling.com/2015/03/famax-40-complete-facebook-fanpage.html

      Delete
  8. Hi guys,

    i just installed it but i can't see any difference with the previous version?
    I'using al the latest browsers:
    -IE 10
    -Firefox latest
    -Chrome latest.
    Links are clickable but pictures still not. There are no lightboxes or so?
    I checked my own instal but on your example page (http://demos.codehandling.com/facio_v2/facio.html) there's no difference.
    What am i doing wrong?

    ReplyDelete
    Replies
    1. Dude, this version was released in Feb ... the new version (with lightbox etc.) is still not out! ...

      Delete
    2. LOL, what an ... i am! To impatient. Sorry guys...

      Delete
  9. Latest version of Facio relased .... "Famax"

    Check out -
    http://www.codehandling.com/2013/04/famax-10-infinite-facebook-fanpage.html

    ReplyDelete
  10. oi , estou procurando um script que ele possa postar de 10 em 10 minutos na minha fan page,alguem pode me ajudar?

    ReplyDelete
  11. Hello Jake, why onclick video this open, but not expand or open photos?…

    ReplyDelete
  12. Hi Jake,

    This plugin is fantastic! Could I have a bit of help please?

    It works just fine out of the box, but when I attempt to load the script as an onclick (i.e. $.getScript("facio.min.js"); ) the #facio div displays 'loading...' but doesn't progress any further.

    Is there a reason why this would be any different to a script tag? And do you have any tips on how I could get it running with .getScript?

    Thanks!

    ReplyDelete
  13. Hi Jake,

    can i limit to 1 last post ?

    thnks

    ReplyDelete
    Replies
    1. Yes, try the new version -
      http://www.codehandling.com/2015/03/free-version-of-famax-jquery-plugin-is.html

      Delete
  14. Excuse me, how do i add my Fb link to title in each post?

    sorry if u don't understand
    " in example add text link on adidas " add link to go my facebook in new tab

    appreciate Great plugin!

    ReplyDelete
    Replies
    1. Try the new version -
      http://www.codehandling.com/2015/03/free-version-of-famax-jquery-plugin-is.html

      Delete
  15. Above all the features and steps are very much helpful.Because to read this article I am so much interested about it's features. It has some innovative feature which is really attract me very much.I must be try to follow all the steps.

    ReplyDelete
  16. Hi, awesome plugin nicely done. Is there a way to force the links to open in a new window or better a targeted window?

    ReplyDelete
    Replies
    1. Yes, try the updated version -
      http://www.codehandling.com/2015/03/free-version-of-famax-jquery-plugin-is.html

      Delete
  17. Use your facebook page not only to bring traffic to your website, but rather put a link with your facebook page

    ReplyDelete
  18. Is there a way to stop it from auto playing video on the feed?

    ReplyDelete
  19. is there a way to set the width of this widget into wrap?

    ReplyDelete
    Replies
    1. #facio{width:100% !important;}

      Delete
  20. not working in IE6 help pls! thanks

    ReplyDelete
  21. how to open in a new tab if they click a link? thanks for sharing!

    ReplyDelete
  22. How do you change the color of the scrollbar. I need it changed. I added rouned borders with radius command, but the scroll bar needs to match the borders to look nice and clean.

    ReplyDelete
  23. Hello Jake, why onclick video this open, but not expand or open photos?… Buy Facebook Likes

    ReplyDelete
  24. Hello Jake! Is there any way to change the language? I do remember that Facebook gives a script in Javacsript that's able to change it on the API plugins! Any updates?

    ReplyDelete
  25. Fans display lists of pages they "love" on their profile in "interests" of their information tab. In April 2010, Facebook has changed terminology becomes the fan "to "Like" page content.

    ReplyDelete
  26. HI, I'm trying to implement your facebook plgin with Wordpress, but I have this error :
    Uncaught ReferenceError: pageUrl is not defined

    Can i set the pageUrl directly in facio.min.js

    thanks for your plug and the help!

    ReplyDelete
    Replies
    1. WordPress version - http://www.codehandling.com/2015/03/free-version-of-famax-wordpress.html

      Delete
  27. Hello, is it possible to add somehow an "autoplay=false" so as to stop Facebook videos to play automatically?
    Thank you

    ReplyDelete
  28. How can I set styles?

    ReplyDelete
  29. It seems that the plugin has stopped working.
    Do you have any plans to update it?

    ReplyDelete
    Replies
    1. Updated Version :)
      http://www.codehandling.com/2015/03/free-version-of-famax-jquery-plugin-is.html

      Delete
  30. To the anonymous above. You can this plug yourself. Follow these steps:
    1. Deobfuscate and deminify the facio.js file
    2. Create a facebook application at developers.facebook.com
    3. Grab your application Id and secret
    4. Around line 254 for me you must replace the line in the initFacio function where the rowHTML variable is declared. In the line there is a part where it says 'appId=*****'. Replace that with your application ID you just received in step 3.
    5. Around line 46 for me you must replace the line in the onLoadFacio function where the fqlUrl variable is declared. In the line where there is a part where it says 'access_token=*****'. The string is divided by a '|'. On the left side of the '|' replace it with the application ID and on the right side of the "|" replace it with the secret. Save and refresh and it will now work

    ReplyDelete
    Replies
    1. Thank you!
      Maybe I'll give it a try.

      Delete
  31. This comment has been removed by a blog administrator.

    ReplyDelete
  32. This comment has been removed by a blog administrator.

    ReplyDelete
  33. Guys, you can use the updated free version of Famax - http://www.codehandling.com/2015/03/free-version-of-famax-jquery-plugin-is.html

    ReplyDelete
  34. Thanks for your great post. This post obviously very helpful. Already I'm bookmark this website. Again Thanks . If you update your facebook account, please visit Buy Facebook Likes

    ReplyDelete