Facebook Connect Magento Extension

83 Comments 9th MAR 2010 | Posted by Ivan Weiler in Magento

Facebook Connect Magento Extension

We’re proud to present free Facebook Connect Magento extension which enables customers fast and easy registration and login with their Facebook identity. Demo and help page can be seen on our playground demo store, just click “Connect with Facebook” link in upper right corner.

Download Inchoo_Facebook-0.9.1.zip, extract files to appropriate place following directory structure, reload cache and navigate to http://www.yourstore.com/facebook/. You’ll be presented with more detailed help page.

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

Use your store name as application name and read and accept terms of service. On second screen switch to Connect tab and set Connect URL to the store domain where you plan to implement Facebook Connect. Switch to Advanced tab, set the domain that your emails will be coming from in Email Domain field and save settings.
Other Connect settings are optional, but you might want to add store logo for example.

Once you obtain two keys navigate to Magento Administration, copy/paste them to appropriate fields under Configuration-Customer-Facebook Connect and you’re good to go.

Current extension is compatible with latest Magento CE 1.3.2.x and 1.4.x versions, it’s using brand new Facebook features like email sharing and open source APIs and we hope it will grow along with them.

We’re working on few more possible features and minor polishing, so you can expect version 1.0.0 on Magento Connect soon, but we wanted to share this pre-release with our faithful readers ;) . As usual, every feedback is more than welcome.

Enjoy!

Updates
v.0.9.1 – Added compatibility with older Magento CE 1.3.2.x versions.
v.0.9.0 – First public release. Compatible with Magento CE 1.4.x.

If you like what you read, please share it.

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • Yahoo! Bookmarks
  • Reddit
  • Technorati
  • Twitter
  • StumbleUpon
  • LinkedIn
  • Netvibes
  • NewsVine
  • Sphinn
  • Tumblr
  • Posterous

To post code in comments, place your code inside [code] and [/code] tags.

There are 83 comments (Add Yours +)

  • Going to get this up on one of our magento installs today to test :) Great work as always.

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

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

  • Very useful extension for magento! I try it! Thanks for sharing!

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

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

  • Toni Anicic Says

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

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

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

    Thanks

  • M.Richard Says

    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…

  • Sounds Good!

    Will set up and see how it goes!

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

  • 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

  • @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

  • 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?

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

  • 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 ;)

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

  • 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).

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

  • @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.

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

  • @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 :)

  • 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.:(

  • @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 !

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

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

  • 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!

  • 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!

  • 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)

  • @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.

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

  • Tuppi Sau Says

    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.

  • @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 :)

  • 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

  • @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.

  • @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.

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

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

  • 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!

  • Tuppi Sau Says

    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.

  • @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.

  • Great plugin thanks

  • Toni Anicic Says

    @charobnjak

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

  • 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

  • @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 ?

  • Tuppi Sau Says

    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.

  • Toni Anicic Says

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

  • 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?

  • 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

  • @Linden Burke,

    you can’t, because Inchoo made a registration module via facebook, not only a simple loggin, the email customer is stored as a magento customer, then facebook never provides their member emails to any website (for spamming reasons) unless you choose to give your email by yourself.
    the “proxy emails” comes from Facebook, you cannot disable that proxy, even if you try to do it manually using Facebook connect API.

    cheers.
    Eddi

  • Tuppi Sau Says

    Thanks Toni,
    But I wanted to say that, when the user account is already associated with the facebook connect, it may be wise to hide the menu. Anyway, that’s not the big deal since I can do it on my own.

    I have another question, may be everyone is waiting for the next version of this module. For now, all it does is; it associates the user account at magento store(s) to their facebook account or we may say it allows for quick registration and login to users who have their facebook account. But, is it possible that in the next version user(s) from the magento store(s) can allow the site to publish their purchase history and customers will have the option to automatically tell friends about their purchases. They can choose to have/not have their purchase details displayed on their Facebook wall.

    Just curious.

  • this is awesome! is there a way to put a connect with facebook button at checkout?

  • I’m getting the following errors now;
    Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘Magestore_Facebook_Helper_Data::getConnectUrl’ was given in /home/blackcyc/public_html/app/code/core/Mage/Core/Model/Layout.php on line 326

    Trace:
    #0 [internal function]: mageCoreErrorHandler(2, ‘call_user_func_…’, ‘/home/blackcyc/…’, 326, Array)
    #1 /home/blackcyc/public_html/app/code/core/Mage/Core/Model/Layout.php(326): call_user_func_array(Array, Array)
    #2 /home/blackcyc/public_html/app/code/core/Mage/Core/Model/Layout.php(216): Mage_Core_Model_Layout->_generateAction(Object(Mage_Core_Model_Layout_Element), Object(Mage_Core_Model_Layout_Element))
    #3 /home/blackcyc/public_html/app/code/core/Mage/Core/Model/Layout.php(212): Mage_Core_Model_Layout->generateBlocks(Object(Mage_Core_Model_Layout_Element))
    #4 /home/blackcyc/public_html/app/code/core/Mage/Core/Controller/Varien/Action.php(343): Mage_Core_Model_Layout->generateBlocks()
    #5 /home/blackcyc/public_html/app/code/core/Mage/Cms/Helper/Page.php(106): Mage_Core_Controller_Varien_Action->generateLayoutBlocks()
    #6 /home/blackcyc/public_html/app/code/core/Mage/Cms/Helper/Page.php(52): Mage_Cms_Helper_Page->_renderPage(Object(Mage_Cms_IndexController), ‘home’)
    #7 /home/blackcyc/public_html/app/code/core/Mage/Cms/controllers/IndexController.php(45): Mage_Cms_Helper_Page->renderPage(Object(Mage_Cms_IndexController), ‘home’)
    #8 /home/blackcyc/public_html/app/code/core/Mage/Core/Controller/Varien/Action.php(418): Mage_Cms_IndexController->indexAction()
    #9 /home/blackcyc/public_html/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(254): Mage_Core_Controller_Varien_Action->dispatch(‘index’)
    #10 /home/blackcyc/public_html/app/code/community/ArtsOnIT/OfflineMaintenance/Controller/Router/Standard.php(46): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #11 /home/blackcyc/public_html/app/code/core/Mage/Core/Controller/Varien/Front.php(177): ArtsOnIT_OfflineMaintenance_Controller_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #12 /home/blackcyc/public_html/app/code/core/Mage/Core/Model/App.php(304): Mage_Core_Controller_Varien_Front->dispatch()
    #13 /home/blackcyc/public_html/app/Mage.php(596): Mage_Core_Model_App->run(Array)
    #14 /home/blackcyc/public_html/index.php(78): Mage::run(”, ‘store’)
    #15 {main

    When I try to go to http://blackcyclemama.com/facebook, I get a blank page. I’ve tried to understand the comments above regarding the 301 redirect— could that be the problem?

  • It’s possible that our module and Magestore_Facebook module seen in this error don’t like each other, so try to disable one of them. Our Inchoo_Facebook can be disabled by deleting app/etc/modules/Inchoo_Facebook.xml file and refreshing cache.

  • Thanks. I had to uninstall the Magestore_Facebook module for it to work. Disabling it didn’t do the job.

  • Hey,
    Just to congratulate, really really great work, easy install, works immediatly.
    Once again really good job.
    I agree with Steph, I also had to uninstall the Magestore_Facebook_module, no matter it was useless for me.
    Thank you very much !

  • Tried the module today, but can’t get it to work.
    When I press “Connect with Facebook” on the top-links, I get: “Facebook Connection failed.” and the “Connect with Facebook”-button on the login-page doesn’t work at all (can’t even click it)..

    What have I done wrong? I think I have filled all required fields on the Facebook-app page.

    I’d love to make this module work! :-)

  • Hi,
    I’m back is there a way change the ‘plain” link in the header menu by the logo of facebook connect ?
    Cheers,
    Julien

    @TRONDAGE: I had the issue on my site, the problem was in the url I gave to facebook in the app, be sure your url put in facebook app is the right on no mistake at all.

  • hello, i tried this module but don’t work for me.
    I see in facebook app there isn’t field ‘email domain’ in tabs advanced.
    In magento i’m using a package name: ‘elegant’, so in facebook module’s folder tree i change
    app->design->frontend->default->deafult
    to
    app->design->frontend->elegant->deafult
    is it correct?

    But facebook connect don’t work.

    Can someone help me?
    Thanks

  • I tried to install this extension with magento 1.4.0.1, it always give me an error “Facebook Connection failed. Service temporarily unavailable.”

    Please can someone help me?

  • Works great guys, just installed this on http://www.junglespice.com.au/corset.html.

    Their is a issue though, when a Guest user adds a product to their shopping cart and then clicks on Shopping cart, if you click on ‘Connect with Facebook’ you get a error. Any chance this will be a feature in the next version or the ability for a user to use facebook connect when checking out.

    Other than that guys great job and many thanks.

  • Hello , this extension is great , how can we map more data like user birthday into customer account ?

  • Hi,

    I have tried with this extension, but when i try to connect it keeps on returning “Facebook Connection failed” error.

    Any help?

  • Great extension for magento! I was seeing the code and is very useful. I integrated perfect with my website.
    Congrats! continue with the next release and Thanks for sharing! =)

  • Thanks you very much, install easy and perfect with my store magento 1.4.0.1

  • Thanks for a terrific extension. Installed with no problem!

    Now I’m trying to figure out how to add a class to the Facebook Connect link so I can replace it with a recognized Facebook Connect image.

  • Hi guys, thanks for a great module … I have been trying to style the button according to Facebook CSS but I m running into the above mentioned problems with:

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

    This does not work, neither when using span …

    Connect with Facebook

    Thanks for any help!

  • ok, one more time …

    a rel=”facebook-connect” class=”fb_button fb_button_medium” div class=”fb_button_text” Connect with Facebook /div /a

  • just read this “Facebook to kill Facebook Connect” – http://mashable.com/2010/04/21/facebook-kills-facebook-connect/

  • I would also like to know how to style the button with my own image. Any help would be so great.
    Can someone pls share an example

  • May I make a suggestion? You might want to add translate=”label title” and a element to the facebook.xml for people utilizing translations. Looking forward to 1.0 (any word if it will utilize the new Facebook protocols?)

  • Kumar Saurabh Says

    Hi,
    I have used the fantastic extension and it was working great, but from today moring it started giving “Incorrect Sigtnture” Error from facebook..
    Any Idea??

  • Hi guys,

    thanks for awesome extension. I would like to know where I can change link name (in right corner) ?

  • Hi,

    Anyone got changed the button to original facebook connect button ?

    Regards

  • Yes Vijay,

    You can change the original FBC button with background style

    And add more css attributes for better apparence

  • Yes Vijay,

    You can change the original FBC button with background style

    button rel=”facebook-connect” class=”form-button” type=”submit” style=”background-image: url(‘http://static.ak.fbcdn.net/images/fbconnect/login-buttons/connect_light_medium_short.gif’);”

    And add more css attributes for better apparence

  • Thanks David.

    I have no knowledge of PHP.

  • Oh Vijay, the front code is only html and css to show the button styled. But no PHP.

  • Thanks again, you saved my time. :)

  • Thanks for the great plugin. The “add to wishlist” does not work if you were not logged in and choose the “connect to facebook”. Also not on your demo site it seems. You will get on the account page without the article in your wishlist.

    Is that a known issue maybe?

    Thanks for any help.

  • The Facebook connect is not working on sites I have this plugin installed or the demo site

Leave a Comment

Please wrap all source codes with [code][/code] tags.
Magento Design and Development | Magento SEO | iPhone Application Development Web Application Development with ZEND | WordPress Ecommerce | WordPress development
Sitemap

Inchoo - webappsolutions | 2009