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.

469
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 469 Comments

1 5 6 7 8 9 10
Add Comment
  1. bractar

    Hi,
    the module stopped working today due to the OAuth 2.0 migration.
    Can you please provide a fix? I bet hundreds of people who used your module are having the same issue.
    Thanks!

  2. Hi Ivan,

    I installed this extension and it was working fine until today. It is not working neither giving any error

    Can you please reply what is the problem…

  3. Magnus Alexander

    Forgot to include language. Norwegian: http://pastie.org/3014663

  4. Markus

    Yea, stopped working for me too, just noticed it today.

  5. Vincent

    Same as last comments, it doesn’t work anymore…

  6. Elias

    Hi,

    we have the same problem. The extension isnt working anymore and I dont get any error message. Do you have any idea what could be the reason?

    Cheers,
    Elias

  7. Hi All,

    I got reason for it.

    Its due to the OAuth 2.0 migration by fb..

    Anyways I succeeded in getting the fb login popup.

    You have to make following modification in init.php.

    FB.login(function(response){
    if (response.authResponse) {
    console.log(‘Welcome! Fetching your information…. ‘);
    console.log(response.status);
    if(response.status==’connected’) setLocation(‘getConnectUrl() ?>’);
    }
    else{
    console.log(‘User cancelled login or did not fully authorize.’);
    }
    }, {scope:getRequiredPermissions() ?>});
    }catch(error){}

    But after inserting login details it shows that “facebook connection failed”..

    Thanks

  8. Here’s a post about what needs to be added/changed: https://developers.facebook.com/blog/post/525/

  9. Elias

    …or simply change “params” to “scope” ;-) But this doesnt fix the problem.

  10. I fixed it, hurray, and it is working :d

    In a couple of minutes I upload my modifications, and changes. They still might be optimized, but I upload them as they are…

  11. This is the contetn of the modified init.phtml file:

    //<![CDATA[
    window.fbAsyncInit = function() {
    FB.init({
    appId : getApiKey()) ?>,
    status : true, // check login status
    cookie : true, // enable cookies to allow the server to access the session
    xfbml : true, // parse XFBML
    oauth : true,
    channelUrl : 'getChannelUrl() ?>' // custom channel
    });
    Event.fire(window, "facebook:fbAsyncInit");
    };

    (function() {
    var e = document.createElement('script');
    e.src = document.location.protocol + '//connect.facebook.net/getLocale() ?>/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
    }());

    document.observe('click', function(e){
    var target = e.findElement('a[rel^=facebook-connect]‘) || e.findElement(‘button[rel^=facebook-connect]‘);
    if (target && target.readAttribute(‘rel’)==’facebook-connect’) {
    e.stop();
    try{
    FB.login(function(response){
    if (response.authResponse){
    //console.log(‘Welcome! Fetching your information… ‘);
    //console.log(response.status);
    if(response.status==’connected’) { setLocation(‘getConnectUrl() ?>’);}
    else{
    //console.log(‘User cancelled login or did not fully authorize.’);
    }

    }
    },
    {scope:getRequiredPermissions() ?>});
    }catch(error){}
    }
    });
    //]]>

  12. This is my modified Session.php file, here there are more modifications, the facebook stores its cookie now in fbsr_+”App_id”, and there are also some extra functions for the cookie parsing and validation.

    I hope it helps,

    class Inchoo_Facebook_Model_Session extends Varien_Object {

    private $_client;
    private $_valid_signature;

    public function __construct() {
    if ($this->getCookie()) {
    $data = array();
    $data = $this->getCookie();
    $this->setData($data);
    }
    }

    public function isConnected() {
    if (!$this->validate()) {
    return false;
    }
    return true;
    }

    public function validate() {
    return $this->$_valid_signature;
    }

    public function getCookie() {
    return $this->get_new_facebook_cookie(Mage::getSingleton(‘facebook/config’)->getApiKey(), Mage::getSingleton(‘facebook/config’)->getSecret());
    }

    public function getClient() {
    if (is_null($this->_client)) {
    $this->_client = Mage::getModel(‘facebook/client’, array(
    Mage::getSingleton(‘facebook/config’)->getApiKey(),
    Mage::getSingleton(‘facebook/config’)->getSecret(),
    $this
    ));
    }
    return $this->_client;
    }

    function parse_signed_request($signed_request, $secret) {
    list($encoded_sig, $payload) = explode(‘.’, $signed_request, 2);

    // decode the data
    $sig = $this->base64_url_decode($encoded_sig);
    $data = json_decode($this->base64_url_decode($payload), true);
    $data['sig'] = $sig;

    if (strtoupper($data['algorithm']) !== ‘HMAC-SHA256′) {
    //error_log(‘Unknown algorithm. Expected HMAC-SHA256′);
    return null;
    }

    // check sig
    $expected_sig = hash_hmac(‘sha256′, $payload, $secret, $raw = true);
    if ($sig !== $expected_sig) {
    $this->_valid_signature = false;
    //error_log(‘Bad Signed JSON signature!’);
    return null;
    }

    $this->_valid_signature = true;
    return $data;
    }

    function base64_url_decode($input) {
    return base64_decode(strtr($input, ‘-_’, ‘+/’));
    }

    function get_new_facebook_cookie($app_id, $app_secret) {
    $signed_request = $this->parse_signed_request(Mage::app()->getRequest()->getCookie(‘fbsr_’ . $app_id), $app_secret);
    // $signed_request should now have most of the old elements
    $signed_request['uid'] = $signed_request['user_id']; // for compatibility
    if (!is_null($signed_request)) {
    // the cookie is valid/signed correctly
    // lets change “code” into an “access_token”
    $access_token_response = file_get_contents(“https://graph.facebook.com/oauth/access_token?client_id=$app_id&redirect_uri=&client_secret=$app_secret&code=” . $signed_request['code']);
    parse_str($access_token_response);
    $signed_request['access_token'] = $access_token;
    $signed_request['expires'] = time() + $expires;
    }
    return $signed_request;
    }

    }

  13. Elias

    Thank you very much! Works like a charm :)

  14. I’m happy then…I made something useful

  15. Feggel

    Stopped working for me too…

  16. shashank

    When i put above content in init.phtml then its code is coming in footer of the page .

  17. laurent

    thank you very much for your help and tips , it works great ! I was quite surprised today , seeing that facebook connect didn’t work anymore
    PS : for information, there are some little mistakes in the JS code your provided, missing $this-> before the calls of getApiKey() and getChannelUrl()

  18. Can you tell me the location of this session.php you modified?

    I found init.phtml in /public_html/kupon/app/design/frontend/default/default/template/facebook/init.phtml

  19. Strange, but thanks for the notifications, you should use this everywhere in the init.phtml
    also for getRequiredPermissions. It seems that when I pasteed the code it removed automaticaly, Is there a way that allows you to upload files directly, to avoid problems like this?

  20. Regarding the Session.php file, you can find it in inside your module Inchoo/Facebook/Model/Session.php

  21. Here is the correct init.phtml file,

    
    <!-- BEGIN Inchoo Facebook Connect -->
    <div id="fb-root"></div>
    <script type="text/javascript">
        //<![CDATA[
        window.fbAsyncInit = function() {
            FB.init({
                appId  : <?php echo json_encode($this->getApiKey()) ?>,
                status : true, // check login status
                cookie : true, // enable cookies to allow the server to access the session
                xfbml  : true,  // parse XFBML
                oauth  : true,
                channelUrl : '<?php echo $this->getChannelUrl() ?>'  // custom channel
            });
            Event.fire(window, "facebook:fbAsyncInit");
        };
    
        (function() {
            var e = document.createElement('script');
            e.src = document.location.protocol + '//connect.facebook.net/<?php echo $this->getLocale() ?>/all.js';
            e.async = true;
            document.getElementById('fb-root').appendChild(e);
        }());
    
        document.observe('click', function(e){
            var target = e.findElement('a[rel^=facebook-connect]') || e.findElement('button[rel^=facebook-connect]');
            if (target && target.readAttribute('rel')=='facebook-connect') {
                e.stop();
                try{
                    FB.login(function(response){
                        if (response.authResponse){
                            //console.log('Welcome! Fetching your information... ');
                            //console.log(response.status);
                            if(response.status=='connected') { setLocation('<?php echo $this->getConnectUrl() ?>');}
                            else{
                            //console.log('User cancelled login or did not fully authorize.');
                            }
    
                        }
                    },
                    {scope:<?php echo $this->getRequiredPermissions() ?>});
                }catch(error){}
            }
        });
        //]]>
    </script>
    <!-- END Inchoo Facebook Connect -->
    
  22. And the Session.php also:

    
    class Inchoo_Facebook_Model_Session extends Varien_Object {
    
        private $_client;
        private $_valid_signature;
    
        public function __construct() {
            if ($this->getCookie()) {
                $data = array();
                $data = $this->getCookie();
                $this->setData($data);
            }
        }
    
        public function isConnected() {
            if (!$this->validate()) {
                return false;
            }
            return true;
        }
    
        public function validate() {
            return $this->$_valid_signature;
        }
    
        public function getCookie() {
            return $this->get_new_facebook_cookie(Mage::getSingleton('facebook/config')->getApiKey(), Mage::getSingleton('facebook/config')->getSecret());
        }
    
        public function getClient() {
            if (is_null($this->_client)) {
                $this->_client = Mage::getModel('facebook/client', array(
                            Mage::getSingleton('facebook/config')->getApiKey(),
                            Mage::getSingleton('facebook/config')->getSecret(),
                            $this
                        ));
            }
            return $this->_client;
        }
    
        function parse_signed_request($signed_request, $secret) {
            list($encoded_sig, $payload) = explode('.', $signed_request, 2);
    
            // decode the data
            $sig = $this->base64_url_decode($encoded_sig);
            $data = json_decode($this->base64_url_decode($payload), true);
            $data['sig'] = $sig;
    
            if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
                //error_log('Unknown algorithm. Expected HMAC-SHA256');
                return null;
            }
    
            // check sig
            $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
            if ($sig !== $expected_sig) {
                $this->_valid_signature = false;
                //error_log('Bad Signed JSON signature!');
                return null;
            }
    
            $this->_valid_signature = true;
            return $data;
        }
    
        function base64_url_decode($input) {
            return base64_decode(strtr($input, '-_', '+/'));
        }
    
        function get_new_facebook_cookie($app_id, $app_secret) {
            $signed_request = $this->parse_signed_request(Mage::app()->getRequest()->getCookie('fbsr_' . $app_id), $app_secret);
            // $signed_request should now have most of the old elements
            $signed_request['uid'] = $signed_request['user_id']; // for compatibility
            if (!is_null($signed_request)) {
                // the cookie is valid/signed correctly
                // lets change "code" into an "access_token"
                $access_token_response = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=$app_id&redirect_uri=&client_secret=$app_secret&code=&quot; . $signed_request['code']);
                parse_str($access_token_response);
                $signed_request['access_token'] = $access_token;
                $signed_request['expires'] = time() + $expires;
            }
            return $signed_request;
        }
    
    }
    
  23. @Koncz Szabolcs You are briliant….

    Thanks ..As i was working to solve issue in session.php..But not succeeded.

    Thanks for the help..

    Session.php can be found in
    community\Inchoo\Facebook\Model

    Thanks

  24. The code is a bit messed up, since the php-tags had been removed by the blog app.

    Here is the complete Session.php code: http://pastebin.com/2GnCq1KZ

    Copy this into your Session.php
    In init.phtml you only need to replace “params” with “scope”.

    @Ivan: the Session.php file is in the Model directory.

  25. Sry, double posting … Koncz was faster ;-)

  26. Hi All,

    Have you tested it in IE 9.

    It was working before this..now it is stopped.

  27. Yes,
    I tested in ie 7,8,9
    Firefox, Safari, Mozilla and it was working,

  28. Hi Koncz,

    It shows me blank page after login in ie 9

  29. Feggel

    I applied the from koncz Szabolcs. But I get an error, what am I doing wrong? Here’s the error:

    class Inchoo_Facebook_Model_Session extends Varien_Object { private $_client; private $_valid_signature; public function __construct() { if ($this->getCookie()) { $data = array(); $data = $this->getCookie(); $this->setData($data); } } public function isConnected() { if (!$this->validate()) { return false; } return true; } public function validate() { return $this->$_valid_signature; } public function getCookie() { return $this->get_new_facebook_cookie(Mage::getSingleton('facebook/config')->getApiKey(), Mage::getSingleton('facebook/config')->getSecret()); } public function getClient() { if (is_null($this->_client)) { $this->_client = Mage::getModel('facebook/client', array( Mage::getSingleton('facebook/config')->getApiKey(), Mage::getSingleton('facebook/config')->getSecret(), $this )); } return $this->_client; } function parse_signed_request($signed_request, $secret) { list($encoded_sig, $payload) = explode('.', $signed_request, 2); // decode the data $sig = $this->base64_url_decode($encoded_sig); $data = json_decode($this->base64_url_decode($payload), true); $data['sig'] = $sig; if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') { //error_log('Unknown algorithm. Expected HMAC-SHA256'); return null; } // check sig $expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true); if ($sig !== $expected_sig) { $this->_valid_signature = false; //error_log('Bad Signed JSON signature!'); return null; } $this->_valid_signature = true; return $data; } function base64_url_decode($input) { return base64_decode(strtr($input, '-_', '+/')); } function get_new_facebook_cookie($app_id, $app_secret) { $signed_request = $this->parse_signed_request(Mage::app()->getRequest()->getCookie('fbsr_' . $app_id), $app_secret); // $signed_request should now have most of the old elements $signed_request['uid'] = $signed_request['user_id']; // for compatibility if (!is_null($signed_request)) { // the cookie is valid/signed correctly // lets change "code" into an "access_token" $access_token_response = file_get_contents("https://graph.facebook.com/oauth/access_token?client_id=$app_id&redirect_uri=&client_secret=$app_secret&code="; . $signed_request['code']); parse_str($access_token_response); $signed_request['access_token'] = $access_token; $signed_request['expires'] = time() + $expires; } return $signed_request; } }
  30. Is someone else having issues on IE9?

  31. As most of you know, Facebook introduced some changes, and extension indeed isn’t working at the moment :(

    New version can be expected in next few days.

    @Koncz Szabolcs: You have my biggest thanks for all the help and code provided here !!

  32. hi,
    I get the pop-up but ends up in a error page. Can anyone help me on this

  33. @Ivan Weiler: Sharing is caring.. :D

    What kind of error message you receive?
    I’m sure that a new, good release will be available soon,
    what I provided it is just a quick, temporary fix,

  34. Harpreet

    Hi Ivan,
    Facebook has recently updated from javascript sdk to auth2.0. Now the problem is instead of using response.session we need response.authresponse need to be used for plugin to work. Now fconnect is not working in all the websites where i have installed this plugin. Please instruct us or guide to get auth thing integrated in our plugin.

  35. Muzammil

    Koncz Szabolcs
    i use your code , and got login popup but after login it show blank page and in request call back it show 500 Internal error.

  36. Hi, any update on this? i tried Koncz Szabolcs

    but it didn’t work

  37. @Magnus Alexander: Thanks for Norwegian translation. I see there are two Norwegian languages in Magento Norwegian Bokmal (nb_NO) and Norwegian Nynorsk (nn_NO).

    From what I just read on wikipedia Bokmal is commonly used one, but I wanted to check with you which one is it, just to be sure.

    Thanks

  38. I just pushed updated version to my github https://github.com/ivanweiler/Inchoo_Facebook

    It’m still testing and working on it, so we can say it’s in beta state, but I believe everything is working already. Fell free to download and test if you’re interested.

    Official version coming in a few days as promised.

  39. Hi,
    This is the error message.
    An error occurred. Please try again later.

  40. hi, i notice the response.status is ‘unknown’.
    Anyone facing the same error

  41. Magento Extension

    Or you may get a professional Facebook Connect Extension for just $69
    http://store.onlinebizsoft.com/facebook-connector.html
    It offers many features instead of one-click login only.

  42. Hi, its working. just download the new files and overwrite the old ones.

    i had to use my old init.phtml and change params to scope for it to work.

    cheers

  43. New version released, article updated with newest instructions !! Please read “Important” section.

    @Priya, all: 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 in Magento. Facebook changed Api keys !!

    @developers: If anyone knows why fb login popup isn’t localized to set language anymore, please let me know. Documentation states same principle as before http://developers.facebook.com/docs/reference/javascript/ (Localization chapter), but it doesn’t work for me after latest Facebook changes. Does it work for you? Is this not implemented yet on FB side? fb: tags are localized but not login/privileges popup?!

    Thanks,
    - Ivan

  44. Great thanks for the modules. It provides exact functionality that we needed :)
    I can confirm that it works fine with Magento 1.11.1.0
    Anything I can advice is to use paces instead of tab. Every editor has an option to replace automatically tab with desired amount of spaces.

    Best regards,
    Kamil

  45. @Ivan,

    after upgrade to 0.9.9 somehow these two rows disapeared from database config. Added this:

    INSERT INTO `core_config_data` (`config_id`, `scope`, `scope_id`, `path`, `value`) VALUES
    (1134, 'default', 0, 'customer/facebook/enabled', '1'),
    (1135, 'default', 0, 'customer/facebook/locale', 'lt_LT')
    

    This maybe helps to do not set language.

    By the way, even after inserting these lines, module is not working. Clicking on link does not launch facebook connect window. Maybe still something wrong in init.phtml?

  46. @Ivan Weiler

    It is showing blank page after login in ie9

  47. Johnny

    Hi there, I’m looking to use this, but I want it to redirect to another page if the user is not already registered (rather than registering them) and just log them in if they are already registered.. Is this easily acheived using this module?

    Cheers,

    Johnny

  48. Rui

    I was got “Invalid attribute name: facebook_uid.” while login magento with facebook account. Would you like to tell me how to solve this problem? Thank you!

  49. Marc

    i have magento 1.4.1.1 in use after this fix i just have a error ” Facebook Connection Failed.”

  50. Thanks Ivan it works :)

1 5 6 7 8 9 10

Add Your Comment

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