I thought I had better take a look as I support a number of PHP apps that run on Facebook or integrate with Facebook for login/authentication etc.

v2.0 of the Facebook API has been completely rewritten from the fairly basic previous API code that I had been using, there are a lot of changes including new login features and permissions.

‘This is great’, I thought…

Facebook PHP API v2.0 requires PHP v5.4

However there is a problem that will cause a whole lot of people a whole lot of problems. The new PHP SDK for v2.0 of the API requires PHP v5.4.

if (version_compare(PHP_VERSION, '5.4.0', '<')) {
 throw new Exception('The Facebook SDK v4 requires PHP version 5.4 or higher.');
}

My main production server runs the latest (as of the time of writing) LTS of Ubuntu v12.04, it’s up to date but a quick php -v from the command line reveals

PHP 5.3.10-1ubuntu3.13

The 14.04 LTS is not available to apt until the first point release which I think is any day now. 14.04 LTS will include PHP 5.5, but I’m not really planning on upgrading my live server straight away, 12.04 LTS is supported up to 2018 – that’s what Long Term Support means.

I currently work with live production Ubuntu servers ranging from v8 to 12 that I would not even dream of trying to upgrade.

Bearing in mind that a whole lot of people won’t even be running an Ubuntu version above 12 on their production servers getting to PHP 5.4 is going to present them with a considerable upgrade challenge.

You are going to have to be pretty brave to manually upgrade PHP, and if you do it without proper testing then you are also going to have to be particularly stupid.

Upgrading PHP without testing is going to break applications that are running PHP code that has been deprecated, older versions of Magento spring to mind, not to mention the problem people who are on a virtual or shared hosted systems where they have absolutely no control of the version of PHP running on their server.

Facebook #fail

So it looks like it’s a real #fail from Facebook to implement a PHP SDK totally dependent on a PHP version that a lot of people are not running and possibly cannot run.

What does this mean for your existing Facebook apps?

• For apps that existed before April 30th 2014, making an API call without specifying a version number (‘unversioned’) is equivalent to making a call to the v1.0 of the API.
• For apps created on or after April 30th 2014, making an API call without a specifing a version number is equivalent to making a call to v2.0 of the API.
• Apps that were inactive or have a creation date on or after April 30th, 2014 will not be able to make calls to v1.0 of the API. They must use v2.0.

This means your existing pre April 30th 2014 apps will be allowed to still make pre v2.0 api calls until April 30th 2015 after that they will stop working.

• If you want to create a new Facebook App you have to use the v2.0 API.
• Inactive apps will no longer work. (define inactive please Facebook.)
• if you want to create a new Facebook App you need to upgrade to PHP 5.4 or for Ubuntu admins be running the latest LTS (14.04).
• if you have code on Envato using the old API it will be removed in August 2014 – goodbye to my Magento Facebook storefront!

Man this sucks

I think this really sucks, especially if you are authenticating users via Facebook login if you don’t do anything your users will not be able to login to your website after April 30th 2015. I am kinda glad I didn’t implement that Facebook login feature on our eCommerce site now…

if your eCommerce site is running on shared hosting, or does not support PHP5.4 (i.e. Magento 1.3x) then you are pretty well stuffed I think.

The new API has a learning curve for devs too and I am already coming to this pretty late so I guess I better look at what options I have and what apps are going to stop working next year if I do nothing, or am unable to get my code and server to PHP 5.4 by then.

Having said all this I would bet my bottom dollar that Facebook change these deadlines and extends the v1.0 API support beyond 2015 – watch this space…

Because I am now depressed I am going to include a funny picture to cheer me up.

Having recently done some work both with Facebook tab apps and exporting Magento product collections in PHP I thought that this is actually a pretty easy task to achieve and coded up an example Facebook Magento Store Front running in a Facebook tab that presents a simple view of your products, product information and a direct link to the product on your Magento web for customers to place orders.

The app talks directly to your Magento database so it will always be up to date. It supports multi language stores and will detect the customers browser language and switch languages accordingly.

This is really a quick win app, integrating quickly with your Magento installation and takes about 30mins to setup and get up and running in Facebook.

Check out my demo Facebook storefront / shop tab app here.

Update

This app has been replaced by version 2. You can see it working here.

DOWNLOAD

Download the latest version of the application source code here.

Basic installation and usage instructions below.

12.11.2012 – v0.97 – bug fixes and changes to user configuration setup, user config now held in .ini file.
22.11.2012 – v1.0.1 – first public release

Magento Facebook Store Front Tab Application

1. Introduction
2. Prerequisites
3. Installation
4. Configuration
5. Usage
6. Languages

Introduction

Magento Facebook Store Front Tab is an object oriented PHP script that integrates with a Magento installation to render product HTML designed to be displayed within a Facebook Tab. The application is able to render various product views, all products, new products, categories etc. with a simple product description and link to your actual Magento web store for purchases.

The application supports normal desktop clients.

Prerequisites

This application requires a configured Facebook Account, Facebook Page and a configured Facebook application. A good knowledge of your Magento installation and Operating System is assumed as well as some experience with Facebook applications and PHP.

Installation

Extract the source files ideally to a sub folder of your Magento installation. e.g. /home/www/magento/facebook

A new folder ‘magentotab’ will be created. Feel free to rename this folder if required.

The application will then be accessible from your browser via the following url

http://www.YOURSHOP.com/facebook/magentotab

Where www.YOURSHOP.com is the url to your Magento shop frontend. If you install the application somewhere other than your Magento installation folder then you will need to browse to the application via your configured web server path.

Configuration

Edit the file applicationConfig.php in /magentotab/config.

Edit

const PATH_TO_MAGENTO_INSTALLATION = ‘/home/www/dev/magento/’;

With the actual path to your Magento installation.

Edit fbAppID, fbAppSecret and fbUrl with the App ID, Secret and URL from your configured Facebook app.

To display a menu on the product page set the showMenu constant to true. Depending on traffic and your hosting etc. the application may run faster when the menu is disabled.

To exclude categories from being shown in the product menu, configure the excludedProductCategories constant with a list of category id’s separated by a comma, e.g.

const excludedProductCategories=’4,5,16,17,18,19,22,23,25,27,28,29,30,31,32,33,34,35,37′;

For google UTM tagging configure the googleUTMTag constant with a valid Google UTM URI.

The bannerImage constant holds the name of the graphic file used as the banner at the top of the Facebook Tab page.

Set the productLimit constant to define the number of products that will appear per page. This should be divisible by 9.

Set the defaultCollectionType constant. This defines the default product view that will be shown. Options are

newfromdate – Products set with the NEW FROM attribute – i.e. New Products.

allproducts – All Products

categoryproducts – Products from a category.

Determine which product description will be shown for the product

useShortDescription=true – Use short description

useLongDescription=true – Use long description

Configure language options

const storesConfigured=’1,2,3′;

const storesLanguage=’de,en,fr’;

const storeDefaultLanguage=’en’;

In this example there are three stores configured with the id’s 1, 2 and 3. The store languages for store 1,2,3 are de, en, fr – German, English, French. And the default language is ‘en’ – English.

The showContact and showAbout constants enable a Contact and About button on the menu when set to true. This is currently in development.

The allowStandAlone constant lets the application run in a standalone browser when set to true. When set to false the application will redirect to the Facebook URL of the app. Set to true for debugging the app standalone outside of Facebook.

Set the pageLikeRequired constant to true if visitors must first Like the Facebook page the tab is running in before they can access the application.

Set the URIToApp value to the URI path of the app on your server.

Save the configuration file.

Usage

To run the script for the first time browse to the URL of the script as defined above

i.e. http://www.YOURSHOP.com/facebook/magentotab

If the Magento configuration path is correct you should see a list of products displayed, with or without menu options as specified in the configuration.

If the application works correctly standalone then you are ready to integrate it with Facebook.

To install the application as a Facebook Tab ensure that your Facebook application has been created and configured with the correct canvas URL’s to the application and then goto the following link

http://www.YOURSHOP.com/facebook/magentotab?fbtab=true

This will return a link that will start the Tab installation process via Facebook. Select the Facebook page to install the Tab on.

When the Tab is installed goto your Facebook page to confirm that the app is working.

Languages

To translate some of the interface text used in the application to your language, simply create a new language file in the php/locale folder named XX.txt where XX is your two letter language code. Use an existing language file as a template and add your translations to the file in the format

Text=TranslatedText.

Make sure your language settings are configured correctly in the application. You can force the application to the language you want using the storeid variable in the url

i.e. http://www.YOURSHOP/facebook/magentotab/?storeid=2

Will force the application to the language configured for store id 2.

I wanted to accomplish this with a standalone PHP application embedded into a Facebook page tab. The goals were to step the customer through connecting with the Facebook application, liking the page and generating / managing the discount codes and Magento coupons.

We want to take full advantage of the marketing information we can glean from Facebook so another requirement was so store the customers Facebook profile information in a database along with the generated discount code.

We can also generate a wall post on the customers Facebook wall to ensure our offer is shared with their Facebook friends.

The application uses the Facebook API to communicate with Facebook and loads Magento externally to generate the Magento coupon sales rules dynamically.

Here are the main features of the application:

1. Connect the customer to the Facebook application and save the customers Facebook profile information  to a MySQL database.

2. Get the customer to click the Like button for this Facebook page

3. Generate discount code and Magento coupon.

and post to the customers Facebook wall (optional).

4. Manage subsequent attempts to generate codes by the same Facebook user. Of course customers can create multiple Facebook accounts to obtain codes so your discount amount has to be thought out properly and relevant terms and conditions applied to try and prevent abuse. How much are Facebook likes worth to you?  A good idea would be to make the discounts valid for a certain spend amount, $15 discount when you spend over $100 for example. Remember if you already have 1,000 likes on your Facebook page, you are potentially giving away 1,000 discount codes to existing customers as this application does not distinguish between new and old likes!

The customer can now copy and paste the code directly into the Magento frontend store coupon box.

Test the application here.

Download the application source code here check out the readme file for installation instructions. The main installation requirements are

PHP5.x/MYSQL
Public webspace on the same server as your Magento installation
A valid configured Facebook Tab application.
Magento 1.3+

Edit the config.php file with your configuration settings and create the database and database table using the SQL in the readme file.

This could be developed as a Magento module too, the advantages I can see for a module would be to allow the whole process to run within your Magento shop instead of a Facebook page tab.

The deal was to offer audio or video media in return for Liking a Facebook page (although this is optional). I also wanted a rating system for the media which could be used later together with the Social information harvested from users as a marketing opportunity.

A working demonstration is available here your comments are very welcome. You will need to connect with the app and like the Facebook page before the media will stream.

The app is written in PHP with a MySQL database, using a few jQuery plugins including jPlayer for the media player and jRating integrated with jPlayer and the database for the rating system.

Media and user information are stored in the database.

How it Works

The code in the module is called at checkout and a random product is selected from products in  the customers cart. The information from this random “Top Seller” product is used to create a product marketing post, including a headline, short description and short Bit.ly URL to link to the product page. The built in Magento scheduling system is then used to regularly check for new marketing posts and send them to Twitter and Facebook.

To use this module you must enable the Magento scheduling system and will need a Twitter  account, and configured Twitter application, a Facebook account and configured Facebook application and a Bit.ly account, further information for setting these accounts up is detailed below.

Tested with Magento CE 1.6.1

I am looking for extension testers, download BETA version 0.26 (last updated 09-12-2011) of the extension here

Updates

If you use this extension be sure to update to the latest version.

*  0.22 – First beta release. 15.09.2011
*  0.23 – Developed Facebook integration and duplicate post control logic. 16.09.2011
* 0.24 – Improved Facebook posting, added logic to exclude posts for products in specified categories. 19.09.2011
* 0.25 – Added time range to stop being too spammy by restricting posts to specific hours of the day. 04.11.2011
* 0.26 – Fixed grouped products not being posted due to hidden child simple products of the parent group product.

Wishlist

Implement logic to control the duplication of product Tweets. Done – v0.23
Extend to other Social Media platforms, Facebook, etc. Facebook Support in v0.23
Implement hash tags for Twitter.
Add to Cart link in Facebook posts
Add option to use Short or Long description text.

Installation

Prerequisites :

Enable Magento scheduling system
Twitter Account
Twitter Application
Facebook Account
Authorised Facebook Application

Bit.ly Account (optional)

To install this extension:

1. Unzip the module and copy the contents of the modules app folder to the app folder of your Magento store installation.

2. Ensure that the module /cache and /cache/Bitly folders have write permissions set to allow the WWW user group write access. The module stores the product Tweets and caches the Bit.ly short URLs in this folder.

3. Refresh the Magento Store cache

4. Logout and login back into the admin backend, goto System – Configuration and locate the configuration settings under My Extensions – Social Media Marketing.

Configuration

1. Configure the Twitter, Facebook and Bit.ly account, authorisation and API keys. See below for further information. If you do not want to use the Bit.ly short URL service set the enable option to no.

Twitter is enabled by default, Facebook is disabled by default.

2. Define a headline prefix for the product marketing text, the default if left blank is “Top Seller:” To disable this prefix enter NONE. For Facebook you can define the text to use for the post header. Define the “uniqueness” value for posts, this value will be used to check for if a product has already been posted in the last X posts, where X is the value you define here. This will help prevent duplicate posts. You can also configure a time range so that Social Media Marketing posts will only be made during the times selected.

3. Configure Google UTM tags for traffic tracking in Google analytics.e.g. ?utm_source=SocialMediaMarketing&utm_medium=Top-Seller&utm_campaign=MyCampaig

4. Enable email alerts which will help you debug the module during testing.

5. Save the extension configuration settings and test.

Testing

Make a test order in your store to test the extension. Upon checkout completion the product marketing information will be written to the modules cache folder. At the next scheduled Magento task execution the text will be posted to Twitter (and Facebook if enabled) and the cached file deleted.

To force the Magento scheduler to run navigate to http://www.yourwebshop.com/cron.php. Check your Twitter and Facebook pages to confirm the marketing post has been submitted. Any errors that occur during this process will be emailed to the default store email address if you set email alerts enabled to YES in the configuration.

ENABLE MAGENTO SCHEDULING

Magento uses a single file named cron.php to execute all its scheduled tasks –  cron.php should be executed regularly to allow configured background tasks in Magento to run and is also used by this module to check for marketing information to post. For example to run cron.php every 5 minutes add the following or similar to your crontab (crontab -e):

*/5 * * * * /usr/bin/php -f  /PATH-TO-MAGENTO/cron.php

Alternatively for testing you can execute cron.php from your browser by browsing to

http://www.yourstore.com/cron.php

TWITTER Configuration

Folow the steps below to create a Twitter application that will be used by the module to access your Twitter account and post product marketing Tweets.

1. If you do not already have a Twitter account, create an account at http://www.tiwtter.com

2. Go to https://dev.twitter.com/ and login with your Twitter credentials.

3. Click the Create an App link.

4. Complete the first page of the application form with your application name, description and website address. A Callback URL is not required. Click the “Create your twitter app” button to continue.

5. Goto the application settings tab and ensure your application is set to Read and Write and click Update Setting to continue.

6. Click on the details tab and scroll down to the Create my access Token button, click it to create access tokens for the application. You will see the four main authentication tokens listed CONSUMER KEY, CONSUMER SECRET, ACCESS TOKEN and ACCESS TOKEN SECRET. Ensure that the access tokens have READ and WRITE access.

7. Copy each authentication token into the configuration settings of the module and click save.

If you do not want to use Bit.ly to shorten URLs in the marketing tweets you have the option of enabling t.co shortlinks in the application settings and you can disable Bit.ly in the extension settings.

You can confirm your application is enabled and has access to your Twitter account by going to account settings -> applications in Twitter.

FACEBOOK CONFIGURATION

Login to Facebook and then browse to

http://developers.facebook.com/

Create an application that will be used to post marketing information to your Facebook page, this can be a normal profile page or a Business/Fan page. When complete note the application ID and application secret.

The application must be authorised for your Facebook page to work.

To authorise the application for your page edit the following URL and paste to your browser, replaceing YOURAPIKEY and YOURPAGEID..

facebook.com/connect/prompt_permissions.php?api_key=YOURAPIKEY&v=1.0&next=http://www.facebook.com/connect/login_success.html?xxRESULTTOKENxx&display=popup&ext_perm=publish_stream&enable_profile_selector=1&profile_selector_ids=YOURPAGEID

BIT.LY CONFIGURATION

To create a Bit.ly account goto http://bit.ly and register an account. Once registered obtain your API key by clicking on Account -> Settings. Configure your bit.ly username and API key in the configuration settings of the extension and save them.Bit.ly is enabled by default in the extension, If you do not want to use bit.ly you can disable it in the configuration settings.

Within 24 hours an update on her Facebook page will receive over 50,000 likes. This is the equivalent of handing out an advertising flyer to everyone in a packed out Wembley Stadium, each one reading it and indicating that they like what they have read, and it costs absolutely nothing.

These Facebook Like figures for a post are indicative of perhaps half a million to a million page views. In Marketing terms if Lady Gaga posts a link from her Facebook page to her own site advertising new music, products etc. the traffic generated would be astonishing and exceed anything you could pay Google for within the same time frame.

Combine this with a Twitter update, she has 11 million Twitter followers, and the eCommerce power of social media networks in terms of marketing and potential exposure of new products is awesome.

Via Facebook and Twitter Lady Gaga has the power to instantly reach literally hundreds of thousands of customers (fans) within seconds creating the possibility to generate a lot of product awareness, exposure and most importantly revenue.

I would not like to estimate how much advertising power like this would cost to purchase. Celebrities like Lady Gaga, Eminem and Rhianna have created, quite unintentionally, the most powerful advertising vehicle on the Internet. Of course Facebook rides along on this success with its own advertising streams which also gives you an idea of how lucrative Facebook advertising can be.

Perhaps Lady Gaga, Rhianna and Eminem should sell update space on their Facebook sites? Now if you could promote your own products directly on Lady Gagas Facebook page, that would be pretty neat. I won’t buy her CD but I would pay for that!

Twitter, Facebook and Youtube are the most popular social networking destinations, I’ve already looked at how to automatically generate product marketing Tweets for Twitter, so let’s now turn our attention to Facebook and look at ways to integrate  product information from a Magento eCommerce store into the Facebook Social Graph by implementing the Facebook Like Button on all Magento product, category or cms pages.

You will have seen the Facebook Like Button everywhere, but what exactly is it? Facebook calls the Like Button a Social Plugin that “…lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user’s friends’ News Feed with a link back to your website.”  The Like Button is both simple and powerful. The concept is simple, Facebook users click the Like button to “like” something and indicate its cool to their friends. Their friends see the link they have liked in their Facebook news feed and are therfore also encouraged to click it. When the Like Button is integrated into your eCommerce store, the Facebook user (customer) indicates their confidence, satisfaction etc in your products by clicking the Like Button creating a great marketing opportunity for you by sharing your products with all of their friends. But there is more to it than that, because clicking the like button also integrates your product page into the Facebook “Open Graph” database.  Facebook says “If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the “Likes and Interests” section of the user’s profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content.” Facebook is attempting to assimilate the Internet into its own Database ultimately turning all Internet pages into Facebook Open Graph objects. With a user base of around 400 million, whether you are a Facebook fan or not this marketing opportunity should not be neglected!

On Sunday 27th February 2011 Facebook altered the functionality of the Like button to replace the functionality of the Share button. The “Share” button will see no further development according to Facebook Spokeswoman Malorie Lucich. The company will continue to support the Share button but Like is the “recommended solution moving forward.” The main difference users will now see is that likes to external content are shown in profiles and news streams as “user likes a link TO EXTERNAL CONTENT” instead of “user likes EXTERNAL CONTENT”. The latter still applying for content hosted on Facebook.

Implementing the Like Button with Magento is relatively simple and there are extensions available from Magento Connect (even a free one!) the most important aspect of implementing the Like Button is getting the Open Graph data right to ensure that your products are “assimilated” correctly into Facebook with a unique and constant URL,  product title, image and meaningful SEO rich description. Check out the extensions with that in mind, if you want to implement the Like Button yourself within Magento 1.3, 1.4 or 1.5 here’s how I did it. I strongly recommend you develop your Facebook Like button on a development server and not your live site!

Go Canonical

The Like Button requires a unique URL to identify your product page in the Facebook Open Graph database.  Magento is notorious for creating duplicate content, generating mulitple URLs for the same product content so it is also good SEO practice to implement the canonical URL tag within the header of your site to tell search engines which URL they should use for your products to avoid duplicating search engine content. The canonical URL is perfect for the Facebook Open Graph URL tag. In Magento 1.4.x and above Canonical URLs are included in the core code, for Magento 1.3.x use the Yoast canonical URL extension its free and installs quickly and easily. Here’s how to install the extension under 1.3.

Magento Community Edition 1.3.x

You can find the Yoast canonical URL extension on Magento Connect note there are issues with this extension if you already use the Fooman Speedster module that you need to workaround.

I installed it under Magento 1.3.x using the command line PEAR installer :

dev/magento1-3-3-dev# ./pear mage-setup
Running initial setup...
config-set succeeded
Channel "connect.magentocommerce.com/core" is already initialized
Channel "connect.magentocommerce.com/community" is already initialized

dev/magento1-3-3-dev# ./pear install magento-community/canonical_url-1.3
downloading canonical_url-1.3.tgz ...
Starting to download canonical_url-1.3.tgz (3,866 bytes)
....done: 3,866 bytes
install ok: channel://connect.magentocommerce.com/community/canonical_url-1.3

Refresh the Magento cache to enable the extension.

Magento Community Edition 1.4.x, 1.5.x

Magento 1.4 and 1.5 now support the canonical tag “out of the box”. To enable the tag for the category and product pages go to: System=>Configuration=>Catalog=>Search Engine Optimization and enable: Use Canonical Link Meta Tag For Products (and if you want – Use Canonical Link Meta Tag For Categories) :

Confirm the Canonical Tag is correct

Check the Canonical Tag is working by browsing to a product and checking the source HTML. In my demo store with Magento 1.3.x or with the Canonical Tag option deactivated in Magento 1.4, 1.5 the Nokia 2610 product page shows the category/product url http://dev.webshop.com/electronics/cell-phones/nokia-2610-phone.html, with the Yoast extension or canonical Meta Tags activated there is a more SEO friendly canonical link URL :

<link rel=”canonical” href=”http://dev.webshop.com/nokia-2610-phone.html” />

Configure the Open Graph Meta tags

Now we have a static canonical URL for our products we need to configure the Open Graph meta tags Facebook will use to convert our page into a Facebook Open Graph object. Facebook says “The (Open Graph Meta) tags allow you to specify structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today and in the future.”

Before we can add the meta tags we need to add the xmlns:fb -attribute to the xml name space element in our HTML header, this is so that Internet Explorer browsers can understand the Open Graph tags.

Locate the main /template/page folder for your Magento theme, for the default theme this is located in app/design/frontend/base/default/template/page for Magento 1.4.x, 1.5.x and app/design/frontend/default/default/template/page for Magento 1.3.x.

Open the main HTML template phtml file for your theme e.g. 2columns-right.phtml and locate the line of code with the opening HTML element:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">

Change this to

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xmlns:og="http://opengraph.org/schema/" xml:lang="<?php echo $this->getLang() ?>" lang="<?php echo $this->getLang() ?>">

Now in the template/page/html folder open the head.phtml file and add the following code and Open Graph meta tags for your version of Magento directly under the existing META tags.  (Double click the code boxes and and use CTRL-C to copy the code.)

Magento Community Edition 1.3.x with Canonical URL Extension

<?php
/**
 * Facebook Open Graph meta tags Magento 1.3
 *
 */
?>
<!--Default OG Meta tags-->
<meta property="og:site_name" content="My eCommerce Store"/>
<meta property="og:street-address" content="1 THE High Street"/>
<meta property="og:locality" content="London"/>
<meta property="og:postal-code:" content="SW1"/>
<meta property="og:country-name:" content="United Kingdom"/>
<meta property="og:phone_number" content="00441234567890"/>
<meta property="og:latitude" content="00.00000000000000"/>
<meta property="og:longitude" content="00.00000000000000"/>
<?php // ***** Detect product or category page ?>
<?php if (Mage::registry('current_category')): ?>
<?php $cat=Mage::registry('current_category') ?>
<?php $catLevel=$cat->getLevel() ?>
<?php $catId=$cat->getId()  ?>
<?php $_id= Mage::app()->getRequest()->getParam('id', false)  ?>
<?php if($_id!=$catId):  ?>
<?php // Product page ?>
<!--Product page OG Meta tags-->
<meta property="og:title" content="<?php echo trim(Mage::registry('current_product')->getName())?>"/>
<meta property="og:type" content="product"/>
<?php if ($this->getHeadProductUrl()): ?>
<meta property="og:url" content="<?php echo $this->_data['urlKey'] ?>"/>
<?php endif; ?>
<meta property="og:description" content="<?php echo strip_tags(str_replace("<br />",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>"/>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>"/>
<?php else: ?>
<?php // Category page ?>
<!--Category page OG Meta tags-->
<meta property="og:title" content="<?php echo trim(Mage::registry('current_category')->getName())?>"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:description" content="<?php echo htmlspecialchars($this->getDescription()) ?>"/>
<?php if(trim(Mage::registry('current_category')->getImageUrl()=="")): ?>
<meta property="og:image" content="CATEGORY HAS NO IMAGE CONFIGURE MANUAL LINK TO A GENERIC CATEGORY IMAGE"/>
<?php else: ?>
<meta property="og:image" content="<?php echo trim(Mage::registry('current_category')->getImageUrl())?>"/>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php // ***** Detect CMS page ?>
<?php if(Mage::getSingleton('cms/page')->getIdentifier() == 'home'  && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>
<!--Home page OG Meta tags-->
<meta property="og:title" content="THIS IS THE MAIN CMS HOME PAGE"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:description" content="MY DESCRIPTION"/>
<meta property="og:image" content="MANUAL LINK TO A GENERIC IMAGE"/>
<?php endif; ?>

Magento Community Edition 1.4.x, 1.5.x

<?php
/**
 * Facebook Open Graph meta tags Magento 1.4, 1.5
 * updated 16.05.2011
 */
?>
<!--Default OG Meta tags-->
<meta property="og:site_name" content="My eCommerce Store"/>
<meta property="og:street-address" content="1 THE High Street"/>
<meta property="og:locality" content="London"/>
<meta property="og:postal-code:" content="SW1"/>
<meta property="og:country-name:" content="United Kingdom"/>
<meta property="og:phone_number" content="00441234567890"/>
<meta property="og:latitude" content="00.00000000000000"/>
<meta property="og:longitude" content="00.00000000000000"/>
<?php // ***** Detect product or category page ?>
<?php if (Mage::registry('current_category')): ?>
<?php $cat=Mage::registry('current_category') ?>
<?php $catLevel=$cat->getLevel() ?>
<?php $catId=$cat->getId()  ?>
<?php $_id= Mage::app()->getRequest()->getParam('id', false)  ?>
<?php if($_id!=$catId):  ?>
<?php // Product page ?>
<!--Product page OG Meta tags-->
<meta property="og:title" content="<?php echo trim(Mage::registry('current_product')->getName())?>"/>
<meta property="og:type" content="product"/>
<?php if ($this->helper('catalog/product')->canUseCanonicalTag()): ?>
<meta property="og:url" content="<?php echo trim(Mage::registry('current_product')->getProductUrl()) ?>"/>
<?php endif; ?>
<meta property="og:description" content="<?php echo strip_tags(str_replace("<br />",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>"/>
<meta property="og:image" content="<?php echo Mage::helper('catalog/image')->init(Mage::registry('current_product'), 'small_image')->resize(100,100);?>"/>
<?php else: ?>
<?php // Category page ?>
<!--Category page OG Meta tags-->
<meta property="og:title" content="<?php echo trim(Mage::registry('current_category')->getName())?>"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:description" content="<?php echo htmlspecialchars($this->getDescription()) ?>"/>
<?php if(trim(Mage::registry('current_category')->getImageUrl()=="")): ?>
<meta property="og:image" content="CATEGORY HAS NO IMAGE CONFIGURE MANUAL LINK TO A GENERIC CATEGORY IMAGE"/>
<?php else: ?>
<meta property="og:image" content="<?php echo trim(Mage::registry('current_category')->getImageUrl())?>"/>
<?php endif; ?>
<?php endif; ?>
<?php endif; ?>
<?php // ***** Detect CMS page ?>
<?php if(Mage::getSingleton('cms/page')->getIdentifier() == 'home'  && Mage::app()->getFrontController()->getRequest()->getRouteName() == 'cms' ) : ?>
<!--Home page OG Meta tags-->
<meta property="og:title" content="THIS IS THE MAIN CMS HOME PAGE"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:description" content="MY DESCRIPTION"/>
<meta property="og:image" content="MANUAL LINK TO A GENERIC IMAGE"/>
<?php endif; ?>

First we add the site default OG Meta Tags including two Facebook tags to identify the Facebook admininstrator ID for this content and an associated Application ID. Add your Facebook account ID and app ID here. To register a Facebook application simply login to Facebook,  goto http://www.facebook.com/developers/apps.php and click on the “Set up new app” button. Give your app a name and set the domain name for the app – the domain name must match the domain the Like button is installed on for it to work, and save it. In the application settings or on the MyApp page you will see your Application ID number.

The information in these tags will be used by Facebook when they “scrape” your page the first time someone clicks on a product page Like Button.

Then we specify the Open Graph tags that will appear when we detect a product, category or cms pages. For CMS pages you need check for each CMS page name you wish to place a like button on, i.e. in the code example we are checking for a page called “home”. For CMS pages you need to also manually set the URL to an image. For category and sub category pages we can check for a configured category image, if non exists then use a manually configured default image. For products we will take the default image from the product. Bundled products are not currently being detected, will need to work on a solution for that…

If you want to include specific OG Meta tags for a page with a specific url then use.

<?php if($this->helper('core/url')->getCurrentUrl() === 'http://www.mystore.com/my-specific-page-url.htmll') : ?>
<!-- Specific Page OG Meta-->
<meta property="og:title" content="SPECIFIC PAGE OG CONTENT TITLE"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="<?php echo $this->helper('core/url')->getCurrentUrl() ?>"/>
<meta property="og:description" content="SPECIFIC PAGE CONTENT DESCRIPTION"/>
<meta property="og:image" content="http://www.mystore.com/myimage.jpg"/>
<?php endif; ?>

Edit the open graph data for your own requirements and add or remove more tags as you wish. The name, description and URL tags for product and category pages can be populated automatically. The URL for products comes from our canonical URL extension and the product description uses the same method I used for SEO description meta tags, to create a meaningful description to use within Facebook from the product long description text. The same method could be used for category pages too, for CMS pages you may need to manually enter the description for each CMS page you want a Like Button to appear on, and check for the page name using the code above.

More information on the Open Graph tags can be found here.

Save your files and refresh a product page. Check the source HTML to check that the Open Graph tags have been populated correctly for product, category, sub category and cms pages i.e. :

<!--Default OG Meta tags-->
<meta property="og:site_name" content="My eCommerce Store"/>
<meta property="og:street-address" content="1 THE High Street"/>
<meta property="og:locality" content="London"/>
<meta property="og:postal-code:" content="SW1"/>
<meta property="og:country-name:" content="United Kingdom"/>
<meta property="og:phone_number" content="00441234567890"/>

<meta property="og:latitude" content="00.00000000000000"/>
<meta property="og:longitude" content="00.00000000000000"/>
<!--Product page OG Meta tags-->
<meta property="og:title" content="Nokia 2610 Phone"/>
<meta property="og:type" content="product"/>
<meta property="og:url" content="http://dev150.webshop.com/nokia-2610-phone.html"/>
<meta property="og:description" content="The Nokia 2610 is an easy to use device that combines multiple messaging options including email, instant messaging, and more."/>
<meta property="og:image" content="http://dev150.webshop.com/media/catalog/product/cache/1/small_image/100x100/9df78eab33525d08d6e5fb8d27136e95/n/o/nokia-2610-phone-2.jpg"/>

Add the Magento Facebook Like Button – XFBML or IFrame?

Now we are all prepared to add our Like Button. You can render the Like Button and javascript code using two methods, XFBML or Iframe. There are pros and cons to both and you might already be averse to using Iframes on your pages. They both achieve the same result with the main difference being that the XFBML is slightly more versatile (and also perhaps quicker) allowing for a comment to be left after you have clicked the button, and also providing methods to trigger actions after the click.

Best practice recommends using XFBML but there is another reason for using the Iframe version that might interest you. If you sell the same product in multiple stores for example a Retail and a Wholesale store and the stores have different domains then using XFBML will result in two entries for the same product within Facebook because the domain name in the URL for the product must match the domain name of the page that executes the XFBML code. Using the Iframe method allows us to specify the domain ourselves and due to the nature of an Iframe Facebook has no way of confirming if it matches  the domain of the parent page of the Iframe or not. Another way to illustrate this is that if you develop your XFBML Facebook Like button on your development server and make test “Like” clicks on product X, Facebook will see this as http://your.develeopment.server/productX when you move the code to your live server, your “Likes” will be lost because Facebook will now register a new Open Graph object at http://your.live.server/productX. Whereas using the Iframe we can specify http://your.live.server/productX as the URL both on the live and development server.

Magento Facebook XFBML Like Button

Lets implement the XFBML version first. To add the Like Button to our product pages we need to locate view.phtml in the /template/catalog/product folder of our theme. Open view.phtml and look for the element or div that renders the product-name, around about line 50. We can locate the Facebook like button directly under the product name in the default theme, or you can locate it where you wish on your themes product page either by moving the code or positioning the button using a CSS class. Add the following code first :

<div id="facebook_like_product_button"><fb:like ref="product_page" layout="button_count" show_faces="false" colorscheme="light" width="500"></fb:like></div>

This defines how our button looks and there are various options that you can experiment with to get the button you want. Note the DIV ID (or class) can be changed/added to whatever you want to style or move the button within the page. Take a look at http://developers.facebook.com/docs/reference/plugins/like/ to experiment with the different button style options available. This is what they look like with standard, button count or box count layout styles :

Now we need to pull the Javascript SDK code from Facebook. Facebook says “The most efficient way to load the SDK in your site is to load it asynchronously so it does not block loading other elements of your page. This is particularly important to ensure fast page loads for users and SEO robots/spiders.” To access the SDK requires your Facebook application ID from Facebook. We can set the Like Button language with a locale code, add a translation for en_US to your Magento language files to change the language to match your store i.e. de_DE for German.

Add the following code next with your Facebook APP id, you can add it directly after the Button code on your product page if you will only be using like buttons on product pages. Or add it to your header.phtml template file to load it with every Magento page.

<!-- Facebook Like Product Button BEGIN - load the SDK asynchronously -->
	<div id="fb-root"></div>
		<script>
		/* <![CDATA[ */
			window.fbAsyncInit = function() {
			FB.init({appId: 'YOUR FACEBOOK APP ID', status: true, cookie: true,
				xfbml: true});
		};
		(function() {
			var e = document.createElement('script'); e.async = true;
			e.src = document.location.protocol +
			'//connect.facebook.net/<?php echo $this->__('en_US') ?>/all.js';
			document.getElementById('fb-root').appendChild(e);
		}());
		 /* ]]> */
		</script>
<!-- Facebook Like Product Button END -->

Notice that the Javascript code performs a protocol check to ensure that the link to Facebook matches the protocol of the page, i.e. HTTP or HTTPS, this is important when linking to external content to avoid browsers security errors when using an SSL connection.

Testing

Save your changes and refresh your product page to see your shiny new Like Button. Remember you should test all the popular browsers to ensure the code is working and the button displays correctly. Your browser tests should include, Internet Explorer, Firefox, Chrome, Opera and Safari and remember to test HTTPS access too. I also recommend that you check how your page looks to crawlers like Google Bot, an error in the header of your page may render ok for normal browsers but not for a crawler bot. You can also do a page fetch test from within Google Webmaster Tools. I learned this the hard way with a site becoming deindexed in Google due to a error in the header PHP code that was only being triggered by crawler Bots!

Go ahead and click on it (if you like it!) This will trigger Facebook to scrape your page and the “Like” should appear in your Facebook profile feed with the image, and title from your Open Graph tags.

To add the Like Button to a category page add the same Button code above to locate view.phtml in the /template/catalog/category folder of your theme. Open view.phtml and look for the element or div that renders the category-name and add the code just below it. Note that depending on your theme there will be multiple occurences of the category name for different category views in this file.

Remember for Facebook to scrape your page the URL must be valid and accessible from the Internet, so if you are working on a development server it must be also accessible from the Internet. It can take a while for the Open Graph data to be collected and to appear correctly in Facebook. If you want to manually check that your Open Graph data is accessible use the Facebook Lint tool at http://developers.facebook.com/tools/lint. Enter the canonical URL of a product page and Facebook will return the scraped Open Graph meta data for you to verify.

Magento Facebook IFrame Like Button

For completeness lets also look at implementing the Like Button using an IFrame, remember this can be useful because it allows cross domain Like buttons, i.e. buttons for the same content that will work when served from different website domains.

Unlike the XFBML code, the IFrame must specify the Like URL within the IFrame element so for Magento 1.3.x we need to generate the IFrame code in the header so that we can call the Canonical URL extension code. Add the following code at the end of head.phtml for Magento 1.3.x

<?php if (Mage::registry('current_product')) : ?>
<script type="text/javascript">
function fbLike(){
        return '<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo str_replace($this->getBaseUrl(),"http://www.YOUR-DOMAIN.com/",$this->_data['urlKey']) ?>&locale=<?php echo $this->__('en_US') ?>&layout=button_count&show_faces=false&width=150&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>';
    }
</script>
<?php endif; ?>

For Magento 1.4.x and 1.5.x you can either add the IFrame code directly to view.php or call it with the Javascript function in head.phtml. To use the Javascript function add the following to head.phtml

<?php if (Mage::registry('current_product')) : ?>
<script type="text/javascript">
function fbLike(){
        return '<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo str_replace($this->getBaseUrl(), "http://www.YOUR-DOMAIN.com/", trim(Mage::registry('current_product')->getProductUrl())); ?>&locale=<?php echo $this->__('en_US') ?>&layout=button_count&show_faces=false&width=150&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>';
    }
</script>
<?php endif; ?>

This code generates the IFrame html using a Javascript function that is called from the product page. Note that to keep the URL constant we replace the base host and domain name to be used for the Like Button with the domain name of the host site (or whatever we want). Edit www.YOUR-DOMAIN.com to match the URL of your site/store.

Now open up view.phtml and as with the XFBML solution add the following code after the product name, or wherever you want within the product view page of your theme.

<!-- Facebook Like Button BEGIN -->
<div id="fb-root"></div>
<script type="text/javascript">
document.write(fbLike());
</script>
<!-- Facebook Like Button END -->

This simply calls the Javascript function created in head.phtml which returns the HTML for the IFrame. For Magento 1.4, 1.5 you can also replace the script code directly with the IFrame code in view.phtml:

<!-- Facebook Like Button BEGIN -->
<div id="fb-root"></div>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo str_replace($this->getBaseUrl(), "http://www.YOUR-DOMAIN.com/", trim(Mage::registry('current_product')->getProductUrl())); ?>&locale=<?php echo $this->__('en_US') ?>&layout=button_count&show_faces=false&width=150&action=like&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
<!-- Facebook Like Button END -->

Refresh the product page to see the IFrame version of the Like Button.

Positioning the Facebook Like Button

To style the button or to adjust its position on the product view page wrap the Facebook code in a DIV i.e. “facebook_like_product_button” and create a matching style CSS ID or class. For example to pad the button out a little add the following to your CSS:

/*Facebook Like Button*/
#facebook_like_product_button {
padding-top: 1em;
}

Like Button for your facebook page

If you want your main home page like button to Like an existing Facebook page simple modify the Like button code to include the URL of your Facebook page:

<fb:like href="http://www.facebook.com/YOUR.FACEBOOK.PAGE" ref="product_page" layout="button_count" show_faces="false" width="120"></fb:like>

Conclusions

Now that the like button is working you will want to check which products are receiving button clicks, use the Facebook Insight tool to look at the statistics for your product page Likes – http://www.facebook.com/insights/ You may need to first click the green “statistics for your domain” button to link your domain to your Facebook profile. You can also integrate reporting into Google Analytics, see the blog post below. Topics for another post include how to target customers that have liked your products individually by sending them specific product updates via Facebook.

Note that the code posted here was tested with Community Editions of Magento only.

In part two of this Social Media Marketing for Magento tutorial we will  integrate 300+ more Social Marketing destinations into Magento product pages using the AddThis toolbar.

More Reading

http://www.saschakimmel.com/2010/05/how-to-capture-clicks-on-the-facebook-like-button/

http://developers.facebook.com/docs/reference/plugins/like/

http://developers.facebook.com/docs/best-practices/

http://www.websharedesign.com/blog/how-do-i-track-that-little-facebook-like-button-in-google-analytics.html

http://developers.facebook.com/docs/opengraph/

http://garethhooper.com/articles/social-media/45-integration/158-how-to-correctly-add-the-facebook-social-plugins-to-your-website.html

Updated Facebook Like Button

http://soshable.com/facebook-like-butto

http://www.techi.com/2011/02/why-the-facebook-like-button-change-is-a-bait-and-switch/

http://davehiren.blogspot.com/2010/08/detect-product-page-in-magento.html