嵌入谷歌+1按钮很简单,你所要做的就是在你的网页里加两段代码。一个在网页的头部,还有一个在你想要呈现的地方。你需要按照Google官方的指引来做:http://www.google.com/intl/en/webmasters/+1/button/index.html

我们把插件的名字定为“GPlusOne”,在“Alwayly”命名空间里。让我们用下面的代码创建/app/etc/modules/Alwayly_GPlusOne.xml

<?xml version="1.0"?>
 
<config>
    <modules>
        <Alwayly_GPlusOne>
            <active>true</active>
            <codePool>community</codePool>
        </Alwayly_GPlusOne>
    </modules>
</config>

接着,用下面的代码创建我们的第二个文件app/code/community/Alwayly/GPlusOne/etc/config.xml

<?xml version="1.0"?>
 
<config>
    <modules>
        <Alwayly_GPlusOne>
            <version>1.0.0.0</version>
        </Alwayly_GPlusOne>
    </modules>
    <global>
        <blocks>
            <alwayly_gplusone>
                <class>Alwayly_GPlusOne_Block</class>
            </alwayly_gplusone>
        </blocks>      
    </global>
 
    <frontend>
        <layout>
            <updates>
                <alwayly_gplusone>
                    <file>alwayly/gplusone.xml</file>
                </alwayly_gplusone>
            </updates>
        </layout>        
    </frontend>
</config>

如你所见,我们声明了gplusone.xml这个布局文件,app/design/frontend/default/default/layout/alwayly/gplusone.xml的代码:

<?xml version="1.0"?>
 
<layout version="1.0.0">
    <catalog_product_view>
        <reference name="head">
            <block type="core/template" name="alwayly_gplusone_head" template="alwayly/gplusone_head.phtml" />
        </reference>        
        <reference name="alert.urls">
            <block type="alwayly_gplusone/PlusButton" name="alwayly_gplusone" />
        </reference>
    </catalog_product_view>
</layout>

仔细观察,你会发现gplusone.xml更新产品详细页。由于嵌入谷歌+1按钮需要在页面读取两个脚本,我们就将它们分别放到下面两个文件中:

app/design/frontend/default/default/template/alwayly/gplusone_head.phtml

app/design/frontend/default/default/template/alwayly/gplusone_button.phtml

app/design/frontend/default/default/template/alwayly/gplusone_head.phtml文件通过‘reference name=”head”‘来更新布局,代码如下:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

app/design/frontend/default/default/template/alwayly/gplusone_button.phtml通过‘reference name=”alert.urls”'载入到页面的alert.urls块中。gplusone_button.phtml的代码如下:

<code<<g:plusone <?php if($size = $this->getSize()) { echo ' size="'.$size.'"'; } ?>></g:plusone>

最后,用下面的代码创建app/code/community/Alwayly/GPlusOne/Block/PlusButton.php

<?php
 
class Alwayly_GPlusOne_Block_PlusButton extends Mage_Core_Block_Template
{
    /**
     * Constructor. Set template.
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('inchoo/gplusone_button.phtml');
    }
 
    public function getSize() 
    {
        //Here we can implement the code to read the config values for sizes
        return '';
    }
}

如果你观察gplusone_button.phtml文件,你会发现它调用Alwayly_GPlusOne_Block_PlusButton类里的getSize()方法。目前,这个方法没有什么作用,是为了以后扩展用的。鉴于谷歌+1按钮支持多钟尺寸(小,中等,高以及标准大小),你可以在插件里添加些简单的逻辑来获取Magento后台中输入的值。

本文不是给你一个不成熟的插件,而是向你展示以Magento的方式实现一个简单的谷歌+插件需要哪些东西。(这不一样是最好的方法)

360magento提供专业的基于magento系统的电商网站开发服务,如有需求或相关咨询,请与我们联系