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

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=”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=”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=”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!