Facebook Like按钮很简单，也容易实现。你所要做的只是从Facebook开发者的网站粘贴2-3节，然后调整下。
既然我们要给Magento编代码，那么何不做一个插件呢，Alwayly_Flike。考虑到工作的预算和时间，我要尽可能快地完成编码，但是任然要按照“Magento规则”。考虑到这一点，下面是我插件的config.xml内容：
<config>
<modules>
<Alwayly_Flike>
<version>1.0.0.0</version>
</Alwayly_Flike>
</modules>
<frontend>
<layout>
<updates>
<alwayly_flike>
<file>alwayly/flike/flike.xml</file>
</alwayly_flike>
</updates>
</layout>
</frontend>
</config>
由于上面的配置中包含了flike.xml，所以我们需要添加alwayly/flike/flike.xml到我能的主题布局文件夹下。这是flike.xml代码：
<layout version="0.1.0">
<catalog_product_view>
<reference name="head">
<block type="core/template" name="alwayly_flike_tags" template="alwayly/flike/tags.phtml" before="-" />
</reference>
<reference name="after_body_start">
<block type="core/template" name="alwayly_flike_js" template="alwayly/flike/js.phtml" before="-" />
</reference>
<reference name="alert.urls">
<block type="core/template" name="alwayly_flike_button" template="alwayly/flike/button.phtml" before="-" />
</reference>
</catalog_product_view>
</layout>
为了简单起见和预算的限制，我决定用“core/template”模块。现在我们就要开始写flike.xml中提到的tags.phtml，js.phtml和button.phtml文件了。
tags.phtml文件包含“开放图形标签”，当我们Like我们的产品时，我们要获取正确的产品图片描述等等。由于这些都需要在网页的“head”下，所以我引用了head模块。下面是tags.phtml的代码：
<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<meta property="og:title" content="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
<meta property="og:type" content="product" />
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(130, 110); ?>" />
<meta property="og:url" content="<?php echo $_product->getProductUrl() ?>" />
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName() ?>" />
<?php endif; ?>
注意图片大小周围的细节。这符合Facebook官方对og的定义：图像作为Feed链接。缩略图的宽和高超过50像素，不超过130x110像素。高和宽的比或者宽和高的比不超过3.例如139x39像素的图片就不会显示，宽和高的比为3.23超过了3。图片会被重新定义成合适的大小。
js.phtml文件包含Like按钮的JAVA脚本：
<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<?php endif; ?>
最后，button.phtml包含实际的按钮：
<?php $_product = Mage::registry('current_product') ?>
<?php if ($_product && $_product->getId()): ?>
<div class="fb-like" data-href="<?php echo $_product->getProductUrl() ?>" data-send="true" data-width="450" data-show-faces="true"></div>
<?php endif; ?>
就是这样了。如果你没有在你的主题你做过多的修改，更确切地说删除产品详细页的“alert.urls” 块。那么你就能在产品名字附近看到Facebook Like按钮了。
鉴于这是一个简单的例子，它还有很大的空间可供你开发。
