Facebook Connect Magento Extension

Featured Image

We’re proud to present free Facebook Connect Magento extension which enables customers fast and easy registration and login with their Facebook identity. And it’s just been updated!

Important

Facebook updated it’s authentication mechanism but so did we, so please update your extension to the newest version since older versions won’t work anymore.
Also, if you’re getting “An error occurred. Please try again later.” message in connect popup, you need to get new “App ID/API Key” from Facebook and enter it into Magento. Check your Application Secret along the way.

Download

Download Inchoo_Facebook-0.9.9.zip, extract files to appropriate place following directory structure and reload cache.
Latest pre-relase versions can always be downloaded on my github project page.

About

Facebook Connect Magento extension enables customers one click registration and login with their Facebook identity. It automatically registers new users and logs in existing ones.

Current extension is compatible with latest Magento CE 1.6, but also with older 1.5, 1.4 and 1.3.2.x versions. It’s using brand new Facebook thingies like open graph protocol and open source JavaScript SDK.

If you’re interested to see additional languages in future releases, help us translate it by following instructions.

Facebook App

For Facebook Connect to work you need to Setup Application on Facebook and obtain its App ID/API Key and Application Secret.

Use your store name as application name and read and accept terms of service. On second screen set App Domain and Site URL(under checked Web Site tab), both to the store domain where you plan to implement Facebook Connect. Save Changes. Other Connect settings are optional, but you might want to add store logo for example.

Magento Setup

Once you obtain two keys navigate to Magento Administration, copy/paste them to appropriate fields under Configuration->Customer->Facebook Connect, set Enabled to Yes and you’re good to go. If you’re updating from previous releases, you also need to Enable it to work.

Default template files (frontend/default/default/template/facebook/*) and layout (layout/facebook.xml) makes Facebook Connect work out of the box with default theme, but we tried to make customizations as easy as possible so all you need to do is add button or link with “facebook-connect” rel attribute set anywhere in the theme, static block or cms page, for example:

<button rel=”facebook-connect” class=”form-button” type=”submit”><span>Connect with Facebook</span></button>
<a rel=”facebook-connect”>Connect with Facebook</a>

Latest Changes

v.0.9.9
- Client and javascript compatible with new Facebook authentication changes.
- Event.fire changed to document object to avoid javascript conflicts.
- Asking for user_birthday permission from now on.
- Norwegian translation added thanks to Magnus Alexander.

v.0.9.8
- Version fix, licenses added, connect release.

v.0.9.7
- Estonian, Swedish, Czech, Turkish and Korean translations added thanks to Sir Mull, Andreas Karlsson, Pavel Hrdlicka, ea and COBAY.

472
Top

Enjoyed this post?

Subscribe to our RSS Feed, Follow us on Twitter and spread it to your friends!

Author

Ivan Weiler

Team Leader

Ivan is a team leader and a senior web developer. He gained lots of experience managing some of the most complex Magento projects we had at Inchoo.

Other posts from this author

Discussion 472 Comments

1 2 3 10
Add Comment
  1. Going to get this up on one of our magento installs today to test :) Great work as always.

  2. Ondrej

    any chance making this extension comaptible with magento 1.3 as well? I am still running 1.3.2.4

  3. Looks useful, thanks!
    Do you have plans to upload this extension to Magento Connect?

  4. Very useful extension for magento! I try it! Thanks for sharing!

  5. Trying to get the the extension to work with magento 1.3.2.4. Getting a facebook_uid attribute not found error. Any help appreciated.

    However on Magento 1.4.x make sure you disable StrikeIron Extensions as it does not work with this facebook connect module. Also you might have to setup 2 different applications in facebook. Here is the reason why:

    On testing, I created my app in facebook with the domain: http://www.domainexample.co.za, and then I got an error when testing from facebook about cross domain etc. The problem is, I had the domain in my browser as http://domainexample.co.za and facebook saw it as a different domain.

    So unless I am missing something you might have to setup a 301 redirect for that domain, to point the http://www.domainexample.co.za to http://domainexample.co.za (not sure if it will work though) or you will need to setup two apps with each version of your domains address.

    Comments are welcome in this post.

  6. Ok, the solution is to create a 301 redirect so that when uses type your domain name without the www then the browser redirects them to http://www.yourdomain.co.za and then your facebook connect app will work.

    Creating two apps in facebook will not work due the the api and secret keys being unique for each app and hence each domain.

  7. Toni Anicic

    @Guilio

    You should never allow your users to access the other form of domain anyways.

    From SEO reasons, you need to choose www or non www version of your site and redirect the other one. Otherwise you’ll get duplicate content issue, link juice spreading to somewhere you don’t need it, and don’t even get me started on SIDs in URLs.

  8. Post emended : The post was supposed to read: “So unless I am missing something you might have to setup a 301 redirect for that domain, to point the http://domainexample.co.za to http://www.domainexample.co.za (not sure if it will work though) or you will need to setup two apps with each version of your domains address.”

    Thanks for the picking up the mistake.

  9. Do you perhaps know why I getting that facebook_uid error in Magento 1.3.2.4?

    Thanks

  10. M.Richard

    Hi guys, nice work for this module, saved me a lot of time ;)

    Guilio, I have the same issue with 1.3.2.4, I’m checking whether the install was executed. It was, because a new record has been inserted in core_resource (facebook_setup)

    But customer and eav tables don’t contain the new “facebook_uid” attribute. So maybe we have to manually insert the right data at the right place now…

  11. Sounds Good!

    Will set up and see how it goes!

  12. is there any sample or live site where i can see this plug-in in action

  13. Hello again,
    I managed to make it work with 1.3.2.4, a little bit rough but it worked

    In /app/design/frontend/default/default/template/customer/form/register.phtml , you can trigger manually addAttribute function from sql module directory like this :
    $installer = new Mage_Eav_Model_Entity_Setup(‘core_setup’);
    $installer->addAttribute(‘customer’, ‘facebook_uid’, array([...]);

    Then go to your register page :
    http://www.yoursite.com/default/customer/account/create/
    Then remove these installer lines.

    In /app/code/community/Inchoo/Facebook/controllers/Customer/AccountController.php , comment lines 126-144 (previous version of Magento doesn’t store birthdate and gender…)

    Hope this helps

  14. @M.Richard

    Where exactly did you place the two lines of code in the register.phtml file. I am still getting the same error.

    Thanks

  15. i am trying to figurate how i will make this work but i cant,all files in my ftp have 777,the facebook connect module have 775,so i change it to 777,i see the other modules and i do the smae in the facebook module,the problem is that in the http://www.2smartmarket.com/facebook i have 404 error and i dont have the facebook connect,didnt show up in my configuration:Configuration-Customer-Facebook Connect,whatch wrong?

  16. ok i did it,but how can i drawit the “connect with facebook”.

  17. Hello all,

    We just setup Demo store where you can preview Facebook Connect functionality. Just click “Connect with Facebook” link in upper right corner or navigate to login/registration page.

    The post is also updated with detailed setup screenshots.

    Regards ;)

  18. I’m working on it to pick up address information from Facebook profile and automatically create a billing address in Magento to simplify checkout ;)

  19. i have this error:
    Validation failed.

    Connect URL must point to a directory (i.e., end with a “/”) or a dynamic page (i.e., have a “?” somewhere).

  20. Got this extension working in Magento 1.3.2.4. After receiving the facebook_uid attribute not found error, and alot of back and forward emails between myself and @M.Richard, I manually added the attribute to my database by exporting the required attribute data from my Magento 1.4.0.1 Test store, (after installing the extension their first) and then importing it to the eav_attribute table in my database.

    Works perfectly now.

    Now just need to figure out how to change the button and the text at the top to use the facebook connect buttons.

  21. @mpouliers the Greek. In facebook when creating the app you must end yr domain name with / e.g http://www.yourdomain.com/. Then your app will work.

  22. Really looking forward to using this. Now to convince clients that they should use Facebook comments instead of the main Magento reviews (or both).

  23. @Guilio Del Fava: Top link is added through facebook.xml layout, so you can just add class attribute like:

    <aparams><rel>facebook-connect</rel><class>facebook-connect</class></aparams>

    and you’ll be able to style it, but you can just add rel=”facebook-connect” to any <button> or <a> link anywhere in theme and connection popup will be triggered.

    @M.Richard: It’s great to see that you’re playing with compatibility and additional features. I was also planning to see what can be done with addresses in future versions. I’ll make sure to add your e-mail to receive future beta updates, if you want of course.

    .. and I’m really thinking about adding 1.3 support due to high demand :)

  24. Guilio Del Fava i know this,i enter my domain but nothing,i follow all steps.i read many articles about this error,i will try again.:(

  25. @Ivan Weiler: Yes you can add me for future beta versions, I’ll be glad to help when i have time ;) My principal e-mail is in this post.

    @mpoulieris: Did you try with and without “www.” in your domain ? Because I tested your site, and it redirects to the “without www” version ;)

    Next week I’ll try to tune it for adding an address in Magento. Today I managed to grab Facebook friends list and display it on customer dashboard in Magento, with a list of products they shared on FB… But rough coded again ! Hope to make it clean in the module next time !

  26. Extension has just been updated to work with 1.3.2.x versions of Magento.

    Please note that extensions template and layout files have been moved from
    app/design/frontend/base/default to
    app/design/frontend/default/default
    to be compatible with older versions.

  27. M.Richard i try everything,i think something goes wrong,i have the same error many time:Connect URL must point to a directory (i.e., end with a “/”) or a dynamic page (i.e., have a “?” somewhere)……i write the name of my site like:http://www.2smartmarket.com,http://2smartmarket.com,www.2smartmarket.com………..but nothing.

  28. Awesome, Ivan! Works smoothly. Thanks for releasing this for free, much appreciated. :D Thanks too, since we’ve been waiting on Mark to fix the bugs in his extension that costs $100!

  29. Thanks for the extension, Ivan. I have it running fine on one development site, no errors, etc., but on http://www.xtracycle.com, I’m getting a “Facebook Connection failed” if I click the top.links link. But if I click on the “Connect with Facebook” link in the login section, it works fine. Any thoughts as to what might be provoking that error?

    Thanks!

  30. Anyone else experiencing issues with Chrome and not being able to login using “Connect with Facebook” in the account login page? (happening on two, independent sites)

  31. @Rick: Something is wrong with prototype library (“$ is not a function” errors) on homepage of mentioned site, that’s the reason top link isn’t working. Prototype library is core javascript library used in Magento and this extension requires it.

    I’ll check button problem in Chrome, thanks for reporting.

  32. Mahdy

    Is it working on 1.4 version ? i installed but something is error .
    could anyone help me to that
    Thank you

  33. Tuppi Sau

    Nice Application, but I have one query:
    Can I test it on the local environment, cuz, the api key that will be provided by the facebook will be for the specific domain only and the local host domain, in my opinion won’t be supported. I will test the application on my own domain but a reply from inchoo.net would be very supportive to all the other users.

    Thanx.

  34. @Tuppi Sau: You can test it in local environment, but there are some limitations. Whatever is accepted on Facebook as Connect URL will work.

    http://localhost/ or similar won’t work
    http://192.168.0.105/ works
    http://127.0.0.1/ never tried

    But you can always setup virtual host on your local server like
    http://www.example.com ,it will work also.

    And just enter example.com or similar for Email Domain in Facebook settings.

    I hope this helps. Good question btw :)

  35. could anyone please tell me where i put the download files i’m a bit of a novice but have had a bit of experience playing around with all the backend files. any help will be much appriciated this looks like a great extention

  36. @Michael_James The base folder is your app folder in the root directory. Follow the folder paths on your site just as they are in the download directory structure. Once you get to a directory that is showing on the download, but not your site’s folder, drag a copy of the download into the parent directory on your live site.

  37. @Michael james: just follow the directory structure in zip file, for example file
    app/etc/modules/Inchoo_Facebook.xml
    will be at exact same place starting from root of your Magento store
    app/etc/modules/

    In most ftp clients you can just drag app folder to server, and everything will be uploaded at proper place.

    Then just refresh your cache from Magento administration(System->Cache Management) and everything will work.

    We’re preparing Magento Connect release that will simplify installation, so you can also just wait for a couple of days.

  38. BI2C

    you re the best, thanks more than a biillion for sharing !!

  39. thanks for the help guys, it kinda makes sense now!! i think i’ll wait a few days for the simplified version!

  40. D.B.

    Great work Ivan. Thank you!

    a sad primjedbe…sitne su ;-)
    - Ako se modul u backend Configuration-Advanced deaktivira i dalje se vidi link “Connect to Facebook”

    - Link “Connect to Facebook” ne mjenja status kao npr. “Log In Log Out”

    Bilo bi super kad bi:
    + nakon kupnje, automatski korisniku poslat wall-post “hvala na kupovini”…

    + da korisnik moze vidit kad se logira u magento, koji od njegovih prijatelja su takoder u magento registrirani a koji nisu, te da ih moze pozvat (invite friends)

    Modul je odlican kao i sve ostale postove sto sam citao na Inchoo!
    Pozdrav!

  41. Tuppi Sau

    Thanx for the reply Ivan,
    I’ve tested the your extension at the local environment and it worked like charm (I’ve used: [HostIP:19.168.XXX.XXX]/magento/) and set up the application using Facebook application credentials and it worked flawlessly. Very good application indeed and above all it is on GNU/GPL.
    Another query: So when is this application available from magento/connect.
    Will be very helpful to other community users too.

  42. @D.B. Thank you. I’ll translate above comments for other readers that might be interested ;)

    - If you disable module under Configuration-Advanced, the “Connect to Facebook” link is still displayed
    It’s noted and I’ll probably add this in one of the future versions

    - link “Connect to Facebook” doesn’t change status, like for example “Log In Log Out”
    This is a feature, not a bug. If customer is logged in in Magento and click Facebook connect, his Magento account will be automatically associated with his Facebook account.

    - it would be great to automatically send wall-post “Thanks for buying” to customer after shopping
    - it would be great that customer can see after login which of its friends are also registered in Magento and to invite the ones that aren’t
    We’ll see what we’ll add or change in future versions. All ideas are appreciated, just keep them coming !!

    @Tuppi Sau: We’re preparing Magento Connect release, it should be available soon.

  43. Great plugin thanks

  44. Toni Anicic

    @charobnjak

    We checked your link, great store, we’re always glad to see Magento used in our region. Translation is great! :)

  45. Hello,

    I installed the module on a test shop with magento1.4 but I always get : Facebook Connection failed. Service temporarily unavailable.

    The connect url in facebook is http://www.magento141.palma.indiegroup.be/
    the base url is
    http://www.magento141.palma.indiegroup.be

    What is wrong? Thanks for help

  46. @Ivan: I just added some code for retrieving friends uid list. We can display only friends who have an account in Magento by checking their e-mail addresses, but for that we have to call the users.getInfo for each friend, and Facebook API is sometimes slow when u have to retrieve like 200 friends !

    Maybe we could store uid in Magento customer account for faster response… But is it legal to store Facebook uid in Magento DB ?

  47. Tuppi Sau

    Hey Ivan,
    Nice to hear that the extension is finally up to the Magento Connect.
    Cheers!!

    I have another query,
    Since, I’ve already connected an account with facebook connect and now it is associated with the facebook. But still, there is a link for connecting with the facebook.
    So, I mean to say that, why should we put the link after we associated the account with the facebook. Shouldn’t we have to hide it.

  48. Toni Anicic

    Tuppi,

    You could hide the link to the logged-in users, but you might wish previously existing users to be able to connect their accounts with Facebook (users that are registered but not with Facebook Connect).

  49. When it ries to connect it offered me the option to use a proxy email (xxx@facebookxxx) or my actual email, the default being the proxy. However it didn’t accept the connection with the proxy email, but did with the proper one. Just a bit confusing for users. Can this proxy option be turned off?

  50. eddi

    hi there, this module is really well done, thanks for sharing.
    I ve seen an “issue” but it’s not a real issue and maybe somebody noticed it.

    in the example provided with the module, and the frontend

    Connect with Facebook

    but actually this code doesnt work because of the span tag.

    the event “click” catches a click but
    e.element().tagName = “span” and not “button”

    just to fix it, remove the span tag (apply a css if needed)

    otherwise, really good !
    i ve been through the feature to get all friends registered in the website.
    for those who want to hide “connect with facebook”, the best thing to do is to hide it in the menu and make a button with facebook icon, then disable it when not needed.
    Cheers, thx inchoo !
    eddi

1 2 3 10

Add Your Comment

Please wrap all source codes with [code][/code] tags.
Top