Saturday, 31 January 2015

Famax 2.0 - Facebook Fan Page on your Website - jQuery Plugin


Famax 4.0 released

Famax 2.0 - jQuery plugin

Features:

1. Works on any device size (responsive + fluid)
2. Fancy layout (new grid + header)
3. Load more button for feeds
4. Improved lightbox popup for videos (responsive + fluid)
5. Optimized code overload (minified JS+CSS ~ 50KB)
6. Uses Facebook v2.2 API
7. A Tab for your Fan Page posts
8. Another tab for your Fan Page Tags (and what people are posting on your page)
9. Drop Down in place of tabs for Mobile mode
10. Customize anything with CSS (or send us an Email)






SCREENSHOTS:


1. Header



2. Image Post - hover






3. Link Post - hover



4. Multiple Image post



5. Video Post - hover



6. Tags Page



7. Load More



8. Mobile Mode



USAGE:



1. Include plugins

Include the plugin as shown below


2. 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 channel feed.


3. Call the Famax plugin



4. How to get create your Facebook App



1. Login to Facebook Developers website.
2. From the "My Apps" drop down click on "Add a New App"



3. Click on the Website option



4. Type in a name for your app and click on "Create ..."



5. Give it a category and click on "Create APP ID"



6. Type in the name of your website and click "Next"



7. Now Click on the "My Apps" tab on the top of the page. You should see your new app. Click on it.


8. Here you can find you App Id and App Secret


9. Fill in your Contact email in Settings page. Then Fill your App details on the App Details page as shown in the below screen. Also upload an App Icon on the same page.




10. Go to the Status and Review Tab on the left and toggle the button so that you app will be live and available to all users.



5. How to make your App Secret worthless for hackers ;)



Okay, so we are going to protect our App Secret by using 3 steps -

1. Obfuscate the code having the call to Famax (in Step 2). Use the JS Obfuscator to obfuscate your code that has the App secret. Use the obfuscated code on your page. Using this step, the App Id and Secret will not be available to people looking at your site's source code.



2. In your Facebook App, go to the "Settings" page and click on the "Advanced" Tab. Here you can see the "Update Settings IP Whitelist" field. Add your IP address here.Using this step, only the specified IP address will be able to make changes to your App settings. This means if someone finds your App Secret and tries to update your App settings, he won't be able to do it.



3. On the same page, there is an "Client OAuth Login" toggle button. Turn that Off. Using this step, you App cannot login any users or initiate an OAuth flow etc. This means if someone finds your App Secret and tries to login other users with it, he won't be able to do it.



Basically, the above steps will make the App Secret worthless for the attacker. All he can do is retrieve public data from Facebook, which is anyway public :)

That's it guys. Let me know what other improvements you would like in the next version!
Download is live!

Wordpress version coming soon ..

7 comments:

  1. paid for this ver via codeCrayon.
    try fanpage one by one. with adidas as below
    "
    fanPage:'https://www.facebook.com/adidas',
    //fanPage:'https://www.facebook.com/topgear',
    //fanPage:'https://www.facebook.com/DotA2',
    //fanPage:'https://www.facebook.com/youtube',
    //fanPage:'https://www.facebook.com/HikeSocialApps',
    //fanPage:'https://www.facebook.com/codehandling',
    "
    I got TypeError: feedArray is undefined jquery.famax.js:248 as nothing come back.
    I used my fb app ID and secret.
    Lets c if we have any update wd fix this

    ReplyDelete
    Replies
    1. Could you please share the link of your page where you are getting this error?

      Delete
    2. Also to get direct support from developers, please leave your comments on the CodeCanyon page itself.

      http://codecanyon.net/item/famax-facebook-fan-page-on-your-website/10287995

      Thank You :)

      Delete
  2. I can't get this working on my site glutathioneforlife.com
    I have followed the instructions above. Thanks for your help.

    ReplyDelete
    Replies
    1. Your scripts are giving are 404 error -

      http://www.glutathioneforlife.com/jquery/jquery-1.9.1.min.js
      http://www.glutathioneforlife.com/js/jquery.famax.min.js
      etc. is not accessible

      You need to upload the scripts at the right path.

      Delete
  3. paid for youmax wordpress plugin.
    ı used youmax shortcade generator and paste it into my post. but my page see like http://i60.tinypic.com/w8t754.jpg how can I fix it.
    my web http://yeni.oran.org.tr/index.php/test/

    ReplyDelete
    Replies
    1. Hi Metin,

      Apologies for the problem. That was a bug which has been fixed. You can drop us an email at web.codehandling@gmail.com and we will send you the updated plugin ZIP.

      Cheers
      Jake

      Delete