15分钟内创建一个magento"Facebook like"按钮插件

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按钮了。

鉴于这是一个简单的例子，它还有很大的空间可供你开发。

电商网站开发服务。