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!

Add This is a useful addition to our Magento product Social Media Marketing tools which already include Twitter product marketing tweets and the Facebook Like Button and will add another 300 or more Social Networking services available for content sharing and marketing.

Add This functionality is easy to integrate into the product pages of a Magento 1.3.x, 1.4.x or 1.5.x eCommerce store. First you need to sign up for an AddThis account, creating an account will give you access to detailed analytic reports so you can see how your customers are sharing your product information across various Social Networking platforms and destination. Sign up for an account here:

http://www.addthis.com/register

Connect to your Magento site and navigate to the template/page/html folder in your Magento theme and open head.phtml for editing.

For Magento 1.3.x with the Yoast canonical URL extension installed paste the following code at the end of the file. See this post for more details on installing the Yoast extension.

<?php if (Mage::registry('current_product')) : ?>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ADDTHIS-USERNAME"></script>
<script type="text/javascript">
function addThis(){
        return '<div id="addthis_product_toolbar" class="addthis_toolbox addthis_default_style " addthis:url="<?php echo str_replace($this->getBaseUrl(),"http://YOUR-DOMAIN-NAME/",$this->_data['urlKey']) ?>" addthis:title="<?php echo trim(Mage::registry('current_product')->getName())?>" addthis:description="<?php echo strip_tags(str_replace("<br />",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>">';
    }

var addthis_config = {
        services_exclude: 'facebook',
		data_ga_property: 'YOUR-GOOGLE-ANALYTICS-UA-ID',
		data_track_clickback: true

}
</script>
<?php endif; ?>

For Magento 1.4.x and 1.5.x with canonical URLs enabled paste the following code at the end of the file.

<?php if (Mage::registry('current_product')) : ?>
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ADDTHIS-USERNAME"></script>
<script type="text/javascript">
function addThis(){
        return '<div id="addthis_product_toolbar" class="addthis_toolbox addthis_default_style " addthis:url="<?php echo str_replace($this->getBaseUrl(),"http://YOUR-DOMAIN-NAME/",trim(Mage::registry('current_product')->getProductUrl())) ?>" addthis:title="<?php echo trim(Mage::registry('current_product')->getName())?>" addthis:description="<?php echo strip_tags(str_replace("<br />",", ",substr(Mage::registry('current_product')->getDescription(), 0, strpos(Mage::registry('current_product')->getDescription(), '.')+1))) ?>">';
    }

var addthis_config = {
        services_exclude: 'facebook',
		data_ga_property: 'YOUR-GOOGLE-ANALYTICS-UA-ID',
		data_track_clickback: true

}
</script>
<?php endif; ?>

The code checks first that the page is a product page and then links to the AddThis Javascript code and creates a funtion containing our AddThis HTML elements and configuration data. Add your AddThis username, your domain name and your Google Anayltics ID (if you have one) and save the file. Note that I’m assuming you already have a Facebook Like button so we tell AddThis to exclude Facebook from the list of Social Networking sites available so that its not displayed twice on your product page.

To add the AddThis toolbar 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. If you have implemented my Facebook Like Button solution, the Like Button code will be here, the AddThis toolbar can sit nicely underneath the Like Button. You can also move the code or style the toolbar to appear wherever you like on your product page.

Paste the following code in to view.phtml and save the file.

<!-- AddThis Product Toolbar BEGIN -->
<script type="text/javascript">
document.write(addThis());
</script>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
</div>
<!-- AddThis Product Toolbar END -->

Refresh a product page to see the new AddThis toolbar.

If it looks a bit cramped under the Like Button add a CSS style to your themes stylesheet to move the toolbar down a little.

/*Add This tool bar*/
#addthis_product_toolbar {
padding-top: 5px;
}

The AddThis service dynamically creates the list of available Social Network services based on the information gleaned from the user, browser language etc. If you like you can override the services on the Toolbar, see the Add This site for further details. Test the services to your product details are being sent to AddThis correctly.

There are a variety of toolbars available:

You can find the code to change how the toolbar looks here http://www.addthis.com/web-button-select.

There are also various configuration options availabe for AddThis, for example if you want to specifiy language for a specific store or the bit.ly account to use for short URLs use the following code to extend the Javascript addThis configuration variables.

		<?php if (Mage::app()->getStore()->getId()==1): ?>
		ui_language: 'de',
		<?php endif ?>
		url_transforms : {
			shorten: {
				twitter: 'bitly'
			}
		},
		shorteners : {
			bitly : {
			login: 'YOUR-BITLY-USERNAME',
			apiKey: 'YOUR-BITLY-API-KEY'
			}
		}

After a few days login to AddThis and check out your Analytics statistics to see how your customers have been sharing your products across various Social Media destinations.

http://www.addthis.com/analytics

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