Integrating Facebook with Magento

Exclusive offer: get 50% off this eBook here
Magento 1.4 Themes Design

Magento 1.4 Themes Design — Save 50%

Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine

$23.99    $12.00
by Richard Carter | January 2011 | Open Source

Magento is a popular open source e-commerce project. With the emerging popularity of the 'social web', it is becoming more and more common to integrate aspects from social media tools such as Facebook into e-commerce stores, such as those powered by the Magento platform.

The previous article, Integrating Twitter with Magento by Richard Carter, author of the book Magento 1.4 Themes Design, covered the integration of your Magento store with Twitter.

This article covers integrating your Magento store with Facebook, comprising of how to:

  • Add a Facebook 'Like' button to your product detail pages to help spread the word about your products
  • Make use of the Facebook widget to include the latest changes to your Facebook page

 

Magento 1.4 Themes Design

Magento 1.4 Themes Design

Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine

  • Install and configure Magento 1.4 and learn the fundamental principles behind Magento themes
  • Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine by changing Magento templates, skin files and layout files
  • Change the basics of your Magento theme from the logo of your store to the color scheme of your theme
  • Integrate popular social media aspects such as Twitter and Facebook into your Magento store
        Read more about this book      

(For more resources on Magento, see here.)

Facebook (http://www.facebook.com) is a social networking website that allows people to add each other as 'friends' and to send messages and share content.

Move the mouse over the image to enlarge it.

As with Twitter, there are two options you have for integrating Facebook with your Magento store:

  1. Adding a 'Like' button to your store's product pages to allow your customers to show their appreciation for individual products on your store.
  2. Integrating a widget of the latest news from your store's Facebook profile.

Adding a 'Like' button to your Magento store's product pages

The Facebook 'Like' button allows Facebook users to show that they approve of a particular web page and you can put this to use on your Magento store.

Getting the 'Like' button markup

To get the markup required for your store's 'Like' button, go to the Facebook Developers website at: http://developers.facebook.com/docs/reference/ plugins/like. Fill in the form below the description text with relevant values, leaving the URL to like field as URLTOLIKE for now, and setting the Width to 200:

Click on the Get Code button at the bottom of the form and then copy the code that is presented in the iframe field:

The generated markup should look like the following:

<iframe src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.facebook.com/plugins/like.php?href=
URLTOLIKE&amp;layout=standard&amp;show_faces=true&amp;width=
200&amp;action=like&amp;colorscheme=light&amp;height=80"
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:200px; height:80px;"
allowTransparency="true">
</iframe>

You now need to replace the URLTOLIKE in the previous markup to the URL of the current page in your Magento store. The PHP required to do this in Magento looks like the following:

<?php
$currentUrl = $this->helper(‘core/url’)->getCurrentUrl();
?>

The new Like button markup for your Magento store should now look like the following:

<iframe src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.facebook.com/plugins/like.php?href=
".<?php $currentUrl = $this->helper(‘core/url’)->getCurrentUrl();
?>".
&amp;layout=standard&amp;show_faces=true&amp;width=200&amp;action=
like&amp;colorscheme=light&amp;height=80»
scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:200px; height:80px;"
allowTransparency="true">
</iframe>

Open your theme's view.phtml file in the /app/design/frontend/default/m2/ template/catalog/product directory and locate the lines that read:

<div class="std"><?php echo $_helper->productAttribute($_product,
nl2br($_product->getShortDescription()), 'short_description') ?>
</div></div>

Insert the code generated by Facebook here, so that it now reads the following:

<div class="std"><?php echo $_helper->productAttribute($_product,
nl2br($_product->getShortDescription()), 'short_description') ?>
</div>
<iframe src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.facebook.com/plugins/like.php?href=<?php
echo $this->helper('core/url')->getCurrentUrl();?>&amp;layout=
standard&amp;show_faces=true&amp;width=200&amp;action=like&amp;
colorscheme=light&amp;height=80" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:200px; height:80px;"
allowTransparency="true">
</iframe>
</div>

Save and upload this file back to your Magento installation and then visit a product page within your store to see the button appear below the brief description of the product:

That's it, your product pages can now be liked on Facebook!

Magento 1.4 Themes Design Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine
Published: January 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:
        Read more about this book      

(For more resources on Magento, see here.)

Integrating the Facebook 'Like box' widget in your Magento store

As with Twitter, Facebook also provides a widget which you can embed in your Magento store to display recent posts and content you have posted to your Facebook page's profile.

Navigate to the Facebook Developer page for plugins (http://developers. facebook.com/plugins) and select the Like box option. Similarly to the Like button markup generator for Facebook, you are presented with a form you need to complete to generate the necessary markup:

Click on the Get Code button at the bottom and then, once again, copy the generated markup from the iframe panel presented:

The markup generated for the Facebook Like box you're embedding in your Magento store should look similar to the following:

<iframe src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="http://www.facebook.com/plugins/likebox.
php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FM2-Product-
Store%2F137638402951635&amp;width=200&amp;colorscheme=light
&amp;connections=10&amp;stream=true&amp;header=true&amp;
height=587" scrolling="no" frameborder="0"
style="border:none; overflow:hidden; width:200px; height:587px;"
allowTransparency="true">
</iframe>

Go to your Magento store's administration panel and navigate to CMS Static Blocks|. Create a new static block in your store by clicking on Add New Block to the top-right of your screen, and complete the fields as before. When you come to the Content field, paste the code generated from Facebook into the field after you have disabled the Rich Text Editor by clicking the Show/Hide Editor button:

Note that the Identifier field has the value widget-facebook-likebox, as you will need this for the consequent layout changes you need to make to Magento. Click on the Save Block button at the top-right of your screen to store the new static block in your Magento store.

Open your Magento theme's local.xml file (for example, in the /app/design/ frontend/default/m2/layout directory) and create a new layout handle called <cms_index_index> within the <layout> elements:

<cms_index_index>
<reference name="right">
<block type="cms/block" name="widget-facebook-likebox" after="-">
<action method="setBlockId">
<block_id>widget-facebook-likebox</block_id>
</action>
</block>
</reference>
</cms_index_index>

Save and upload this file to your Magento installation and refresh your store's frontend view:

Can't see the Like box?
The <cms_index_index> handle means that the Facebook Like box will only be visible on your store's homepage.

Integrating Facebook with Magento extensions

As with Twitter, it is also possible to integrate Facebook into your Magento store with the use of extensions from the Magento Community.

Name of extension

Description of extension

Beeshoppy

http://www.magentocommerce.com/magento-connect/Beecoder/extension/3659/ beecoder_beeshopy

The Beeshoppy extension allows you to embed your Magento store into Facebook. While the extension is free, you will need to create an account at http://www.beeshopy.com to use this extension.

Meanbee Promote/Share Order

http://www.magentocommerce.com/magento-connect/ Meanbee/extension/4103/ meanbee_ordershare

The Meanbee Promote/Share Order extension for Magento adds Facebook's Like button to your store's order success page, enabling your customers to tell their Facebook friends once they've placed an order through your store.

This extension also provides a Twitter 'tweet this' button with similar functionality.

 

Facebook Like Button

http://www.magentocommerce.com/magento-connect/TemplatesMaster/extension/3816/facebooklb

 

The Facebook Like Button extension for Magento adds a Facebook Like button beneath your product's title on the product detail pages of your store.

 

Facebook Connect Social Shopping

http://www.magentocommerce.com/magento-connect/Optaros%2C+Inc/extension/1970/facebook-connect-social-shopping

 

The Facebook Connect Social Shopping extension provides an embedded chat feature that allows your customers to ask friends' opinions on products in your store.

 

Further social media integration with Magento

There are other options available to you if you are looking to integrate your Magento store with social media.

Social bookmarking in Magento

Social bookmarking tools allow users to save their bookmarks in a central space on the Internet, meaning that they are accessible from anywhere with Internet access, and making social bookmarks more convenient than traditional browser-based bookmarks.

ShareThisProduct extension for Twitter, Facebook, and MySpace

If you are looking to make use of Twitter, Facebook, and MySpace in your Magento store, you may find the ShareThisProduct extension for Magento available at: http://www.magentocommerce.com/magento-connect/herve%40wsa/ extension/4802/sharethisproduct, useful. The extension adds links to your store's product details view for the page to be shared on the Twitter, Facebook, and MySpace social networks.

Magento Social Bookmarking Services extension

The Magento Social Bookmarking Services extension provides similar functionality to the previous ShareThisProduct extension for Magento, but allows for more configuration as to where the widget containing the social bookmarking buttons appears in your store.

You can find the extension at http://www.magentocommerce.com/magentoconnect/Fluxe/extension/2333/magento-social-bookmarking.

Logging in with a social networking account

Many people have an account with a social network such as Twitter or Facebook these days and registering a new account can be off-putting for some customers. There is, however, an extension that enables customers using the more popular social networks and even the PayPal payment gateway to log in to your Magento store. The extension is called Engage (http://www.magentocommerce.com/magento-connect/ GothicJB/extension/4946/engage).

As mentioned, the benefit of such an extension is that your customers do not need to create a separate account to buy from your store, which may lead to increased conversions and sales in your Magento store.

Summary

In this article, you have explored various methods of integrating social media from Facebook into your Magento store including adding a Facebook Like button to your product pages and made use of the Facebook widget to include the latest news from your Magento store's Facebook page.


Further resources on this subject:


Magento 1.4 Themes Design Customize the appearance of your Magento 1.4 e-commerce store with Magento's powerful theming engine
Published: January 2011
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Richard Carter

Richard Carter is a web designer and frontend web developer based in Newcastle upon Tyne in the North East of England.

His experience includes many open source e-commerce and content management systems, including Magento, MediaWiki, WordPress, and Drupal. He has worked with clients including the University of Edinburgh, University College Dublin, Directgov, NHS Choices, and BusinessLink.gov.uk.

He is a creative director at Peacock Carter Ltd (peacockcarter.co.uk), a web design and development agency based in the North East of England. He graduated from the University of Durham in Software Engineering, and currently lives in Newcastle upon Tyne. He blogs at earlgreyandbattenburg.co.uk and tweets as @RichardCarter and @PeacockCarter.

This is his sixth book. He has previously written MediaWiki Skins Design, Magento 1.3 Theme Design, Magento 1.4 Theme Design, Joomla! 1.5 Templates Cookbook, and The Beginner's Guide to Drupal Commerce, and acted as a technical reviewer on MediaWiki 1.1 Beginners Guide, Inkscape 0.48 Illustrator's Cookbook, and Apress' The Definitive Guide To Drupal 7.

Books From Packt


Magento 1.4 Development Cookbook
Magento 1.4 Development Cookbook

Magento 1.3 Theme Design
Magento 1.3 Theme Design

Magento 1.3: PHP Developer's Guide
Magento 1.3: PHP Developer's Guide

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

OpenCart 1.4 Beginner's Guide
OpenCart 1.4 Beginner's Guide

Cocos2d for iPhone 0.99 Beginner's Guide
Cocos2d for iPhone 0.99 Beginner's Guide

Drupal 7 Module Development
Drupal 7 Module Development

Inkscape 0.48 Essentials for Web Designers
Inkscape 0.48 Essentials for Web Designers


Your rating: None Average: 5 (1 vote)

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
a
g
K
a
1
j
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software