Magento Facebook Integration – Facebook Page and Apps

In this tutorial we are going to see how to show a magento page inside facebook page tab. An application of this would be, if you want to show few of your magento products inside facebook page.

In the current tutorial we will create a facebook page which will display a different content for like page and unlike page, the content of the like/unlike page will come from a magento module.
This is easy to implement, we don’t need to have any knowledge of facebook api’s. Facebook provides an interface through which we can simply integrate any iframe page in a facebook page tab. We are going to use the iframe based system to show magento page inside the iframe. To implement this first we need to create a facebook page, register a developer account and then create a facebook app. I will explain here in detail what are all the steps to follow.

Step1: Create a Facebook Page

Creating a new page is very easy in facebook. Just login with your facebook account and open this URL to create a page. Here you can find more details about a facebook page http://www.facebook.com/pages/learn.php.

Step2: Create a Facebook App

After you have created a facebook page, you need to create a facebook app. For creating a facebook app you need first have a developer account in facebook. Developer account is very easy to create just open the URL and then click on “Apps” in the top menu. After clicking on “Apps” your are asked to authorize the “Developer App”. After you authorize this your developer account is created (attached is screenshot of the same)

Facebook Developer App

Facebook Developer App

After granting permission your able to view a screen where you can create new apps.

Facebook Create App

Facebook Create App

Next you need to click on “Create New App” button as shown in screenshot to create an app, you will have put it the app name you want and fill in a captcha. After creating an app you will get a form to fill in app details like shown below

Facebook Empty App

Facebook Empty App

In the “App Domain” field you need to enter your magento website domain name e.g excellencemagentoblog.com. Next, in the section “Select how your app integrates with Facebook” you need to put in information in boxes “Website” and “Page Tab”. In “Website” -> “Site URL” you need to put in your full magento website url. In the “Page Tab” -> “Page Tab Name” put in the name of the tab, “Page Tab” -> “Page Tab URL” will have the url of the magento module which we will show in the facebook page. In our case the URL would be www.yourmagentostoreurl.com/fb (here ‘fb’ is the fronend name of the custom module create by us). Attached is exactly how the app setting needs to be done

Facebook App Settings

Facebook App Settings

Also attached here the facebook magento module developed, will explain this module in detail later
[dm]30[/dm]

Step3: Assign facebook app to page tab

In this step we will attach the facebook app we created to a facebook page tab. What this means is that, when a person opens the facebook like page our facebook app will load on that page instead of the default page tabs. To do this first we need to assign the app created to a facebook page, for that you need to open this URL

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

here you need to replace “YOUR_APP_ID” with your app id which can be found the edit app page, and replace “YOUR_URL” with the application site url. After you do this you will get a screen like this

Facebook Add App To Page

Facebook Add App To Page

On this box, from the dropdown you need to select the page you have created. After doing this, open the page created and then click on “Edit Page” and then “Apps” on the left menu. After clicking on “Apps” on the content area you will see the app we just added. Attached is screenshot of the page

Facebook Page

Facebook Page

This means, the facebook app has been successfully added to the page. Next we need to assign this app to a page tab. For this, click on the “Edit Settings” link and you will see a screen where you can enter the name of of the tab (attach is screen).

Facebook App Name

Facebook App Name

After doing this open the page. it will show the tab created and clicking on the tab will load our magento page.

Facebook Page New Tab

Facebook Page New Tab

If you want this to be the default tab to load when a person opens the facebook page, you can do the setting from Facebook Edit Page -> Manage Permissions -> Default Landing Tab

Facebook Page Default Tab

Facebook Page Default Tab

Step4: Magento Module

Above we have seen what all is required to be done on facebook side, now we will see what needs to be done in magneto. I am again attaching here the module used.
[dm]30[/dm]
What the module does is very simple, it shows a different text for page when its liked and when its not liked. In the index controller of the module i have written an indexAction() which simply loads layout and renders it. The code to show a different text for like page and unlike page is written in the block class.

<?php
class Excellence_Fb_Block_Fb extends Mage_Core_Block_Template
{
	protected function _construct()
	{
		parent::_construct();
		$signed_request =$this->parsePageSignedRequest();// Call function

		/*The signed_request on iframe tabs has a "pages" object, which holds a "liked" variable. If the user    viewing your tab has Liked your page, it is set to TRUE. If they have not, it is set to FALSE. So:
		 */
		if($signed_request['page']['liked']){
			$this->setTemplate('fb/like.phtml');
		} else{
			$this->setTemplate('fb/unlike.phtml');
		}
	}
	public function parsePageSignedRequest() {  //The signed request is encoded for security
		$facebook = Mage::getModel('fb/api_facebook');
		$signed_request = $facebook->getSignedRequest();
		return $signed_request;
	}
}

Here i am using the php facebook sdk in magento, and based the api finding out if the facebook user has liked the page or not. If the page is liked, the fb/like.php is set as template or else fb/unlike.phtml is set as the template.

Step5: Resize of Facebook Page

If you have long content inside the facebook like.phtml or unlike.phtml, you will see that scrollbars show up in the facebook page tab. To fix the problem of vertical scroll bar showing up you need to put in this code the template files

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript"> 
      FB.init({
        appId  : 'YOUR_APPLICATION_ID',
        oauth  : true,
      });
 
      FB.Canvas.setAutoGrow();
 
</script> 

this will fix the vertical scroll bar problem.

In this tutorial i have tried my best on how to integrate facebook and magento module. The process is quite simple, another blog which i found usefully is http://www.hyperarts.com/blog/tutorial-add-an-iframe-application-to-your-facebook-fan-page-fall-2012/
  • Good Article Manish

  • Pratik

    Good

  • Pingback: Facebook App and Timeline Integration (Actions, Objects and Aggregations) - Excellence Technologies Magento Blog | Magento Tutorials | Magento Developer()

  • Good information regarding magento updates

  • I did exactly what you said but I have no idea what happened. I am left with a blank tab on my page and nothing new on my magento. Please enlighten me on what are the possibilities with this or did I miss ¬†anything. I just wanted the site to be visible to only logged in users and ask users to login with facebook if they are not logged in. Will be waiting for your reply. Thanks

  • Carol

    Hi! Thanks for interesting information. I saw a good solution recently – private sale script from Plumrocket. A number of magento extensions and magento private sales theme, – I think it is worth seeing. And an extension Live Feed, that is a magento social shopping extension designed to display all social activities on the website. I think you can find it on their site.

  • Multi Vendor

    Great Tips . good .