有很多方法来添加社交共享按钮到你的Magento商店。你可以选择几种不同的免费或者付费的插件，创建自己的，使用AddThis服务或者从官方粘贴脚本（像 Facebook Like）。然而，在设置样式是会收到一些限制。如果你需要一个简单的解决方法，那么这篇文章适用于你。

我将指出一些你应该知道的官方按钮潜在问题。首先，你生成的每个按钮有一些JavaScript代码。这些代码在远程服务器上，每次用户打开一个页面时被读取。虽然这些代码的读取是异步的，但是当你有很多这些代码时会影响页面读取速度。另一方面，如果这些按钮有些复杂（或者写得不好的）JavaScript可能会弄乱你的商店。有一次我用AddThis插件在Magento产品页面添加社交按钮时，可配置产品因为Twitter按钮而失效，总价不更新，“添加产品到购物车”无效。我记不清具体的报错JavaScript代码但是我认为和全局变量名或者类似的东西相关。重点是，这些按钮会产生一些问题，让你话费不必要的时间去调试。我已经记不清多少次因为Facebook Like按钮失效而让我绝望了。

把事情简单化

我总是让喜欢让事情简单地工作。每一个社交网站都有一个简单的接受一些基础参数的“共享地址”，允许你分享任何URL。因为这是一个简单的URL，你能以你喜欢的风格做一个链接或者任何类型的按钮。另外一个好处就是，使用简单“共享地址”是没有外部脚本的。

下面是一些流行的社交网站共享URL：

• Google Plus: https://plus.google.com/share?url=[URL TO SHARE]
• Facebook: https://www.facebook.com/sharer/sharer.php?u=[URL TO SHARE]&t=[TITLE]
• Twitter: http://twitter.com/home/?status=[TITLE] ([URL TO SHARE])
• Pinterest: https://pinterest.com/pin/create/button/?url=[LINKBACK URL]&media=[IMAGE TO SHARE]& description=[DESCRIPTION]

实现

如果你关注可用性，那么利用打开新窗口的方式来远离简单链接元素并不是一个完美的解决方案。最简单的方式就是以弹窗的方式打开链接。如果你的网站里有些这样的JavaScript模式，你可以使用它们。但为了简单起见，我将使用默认的Magento弹出窗口。

社交按钮最合理的位置当然是产品页面了，所以我们以此为例。我将添加Google Plus, Facebook, Twitter 和Pinterest按钮，但我不确定你能轻易地添加其它社交网站。为了与文章标题一致，我将添加简单的链接而不是按钮，但是你可以用一些基础的CSS来创建按钮。

跟着下面这些简单的步骤你就能轻易地拥有社交共享链接。

打开app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/catalog/product/view.phtml找到你要添加链接/按钮的位置，添加下面的代码：

<?php $productName = $_helper->productAttribute($_product, $_product->getName(), 'name'); ?>
<?php $productUrl = $_helper->productAttribute($_product, $_product->getProductUrl(), 'product_url'); ?>
<?php $productImage = $_product->getImageUrl() ?>

我们将使用这些变量来设置URL，标题，描述或者其它需要的字段。在我们刚才添加的代码后面添加：

// Google Plus
<a href="javascript:popWin('https://plus.google.com/share?url=<?php echo urlencode($productUrl); ?>', 'google', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Google Plus') ?>">Google Plus</a>
// Facebook
<a href="javascript:popWin('https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode($productUrl); ?>&t=<?php echo urlencode($productName); ?>', 'facebook', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Share on Facebook') ?>">Facebook</a>
// Twitter
<a href="javascript:popWin('http://twitter.com/home/?status=<?php echo urlencode($productName . ' (' . $productUrl . ')'); ?>', 'twitter', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Tweet') ?>">Twitter</a>
// Pinterest
<a href="javascript:popWin('https://pinterest.com/pin/create/button/?url=<?php echo urlencode($productUrl); ?>&media=<?php echo urlencode($productImage); ?>&description=<?php echo urlencode($productName); ?>', 'pinterest', 'width=640,height=480,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes');" title="<?php echo $this->__('Pin it') ?>">Pinterest</a>

尽管所有社交网站都善于提取你共享链接的内容（产品名称，图片，描述……）但尽可能地帮助它们也是很好的做法。最常用的做法就是为你的页面添加meta标签。你有许多不同的方法可用，但是为了简单起见，我将使用OpenGraph，因为Facebook在用它。如果你的页面有些复杂的改变，它将不会正确地提取产品信息。

另一方面，使用分享链接在Google Plus提取产品信息时我没遇到过任何问题。Twitter简单些，因为你只分享了定义的文本。Pinterest要求你指定所有的信息，所以这些站不需要meta标签。

添加OpenGraph meta标签到你的Magento商店非常简单。只要添加下面的代码到app/design/frontend/YOUR_PACKAGE/YOUR_THEME/template/page/html/head.phtml的最后一个meta标签后面（如果你用Magento默认的head文件就是名为“robots”meta标签）。

<?php $product = Mage::registry('current_product');
if ($product): ?>
<meta property="og:title" content="<?php echo $product->getName(); ?>" />
<meta property="og:type" content="product" />
<meta property="og:url" content="<?php echo $this->helper('catalog/product')->getProductUrl($product); ?>" />
<meta property="og:image" content="<?php echo $this->helper('catalog/image')->init($product, 'image')->resize(300, 300); ?>" />
<meta property="og:description" content="<?php echo strip_tags($product->getShortDescription()); ?>" />
<meta property="og:site_name" content="<?php echo Mage::app()->getStore()->getName() ?>" />
<?php endif; ?>

我们共享一个产品，所以我们需要在meta标签添加到唯一的产品页面，但head.phtml的每一页上加载。这意味着，我们需要检查，如果当前页面是产品页面，然后才加入我们的meta标签。同时，我们需要得到的产品对象，所以我们可以提取我们需要投入meta标签中的数据。在上面的代码中的前两行会做到这一点。我们创建一个变量$product来获取当前的产品。如果我们在产品页面，这个变量将包含当前产品的对象。如果不是，$product会被设置为false。我用一些标准的meta标签去描述产品，但你可以按需使用更多标签。

电商网站开发服务。