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.









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!
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…
Forgot to include language. Norwegian: http://pastie.org/3014663
Yea, stopped working for me too, just noticed it today.
Same as last comments, it doesn’t work anymore…
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
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
Here’s a post about what needs to be added/changed: https://developers.facebook.com/blog/post/525/
…or simply change “params” to “scope”
But this doesnt fix the problem.
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…
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){}
}
});
//]]>
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;
}
}
Thank you very much! Works like a charm
I’m happy then…I made something useful
Stopped working for me too…
When i put above content in init.phtml then its code is coming in footer of the page .
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()
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
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?
Regarding the Session.php file, you can find it in inside your module Inchoo/Facebook/Model/Session.php
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 -->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=" . $signed_request['code']); parse_str($access_token_response); $signed_request['access_token'] = $access_token; $signed_request['expires'] = time() + $expires; } return $signed_request; } }@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
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.
Sry, double posting … Koncz was faster
Hi All,
Have you tested it in IE 9.
It was working before this..now it is stopped.
Yes,
I tested in ie 7,8,9
Firefox, Safari, Mozilla and it was working,
Hi Koncz,
It shows me blank page after login in ie 9
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; } }Is someone else having issues on IE9?
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 !!
hi,
I get the pop-up but ends up in a error page. Can anyone help me on this
@Ivan Weiler: Sharing is caring..
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,
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.
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.
Hi, any update on this? i tried Koncz Szabolcs
but it didn’t work
@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
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.
Hi,
This is the error message.
An error occurred. Please try again later.
hi, i notice the response.status is ‘unknown’.
Anyone facing the same error
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.
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
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
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
@Ivan,
after upgrade to 0.9.9 somehow these two rows disapeared from database config. Added this:
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?
@Ivan Weiler
It is showing blank page after login in ie9
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
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!
i have magento 1.4.1.1 in use after this fix i just have a error ” Facebook Connection Failed.”
Thanks Ivan it works