Sunday, 10 February 2013

Facio 2.0 - Infinite Facebook fanpage feeds with Likes!


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!
Posted by at

20 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

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

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

  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

Subscribe to: Post Comments (Atom)