在社群网站火红的现今，社群分享功能已经与电子商务密不可分，所以我们也常在Magento中安装社群分享的功能，但是该如何准确的控制分享至社群网站的功能呢？ 本篇就要教导大家如何简单的控制我们社群分享的内容。
在Magento1.9.1 版本中的rwd主题包中已经内建有简单的社群分享功能，我们将以此为范例，为各位展示此次教学范例。
下图为1.9.1 预设rwd主题包的产品页面，红色框起的部分是该主题包的预设分享功能。
点下Facebook图示后就会到分享的页面
之后点击Twitter的分享功能
这些结果都只是没有指定资料抓取后的结果，还有更多的改善空间。
再看完了预设的分享功能之后，接下来开始我们的优化作业。
优化作业
Facebook针对社群分享内容有发布Open Graph protocol ，Twitter 对社群分享也有提供相对应的twitter card的标签，利用社群网站所发布的标准文建，让我们可以容易的为网页增加社群分享的标签。
本次的优化也将原本的社群分享截取产品的Description，更换成Meta Description.
1. 先在产品的布局中增加社群分享标签的版块
路径: /app/design/frontend/界面/布景主题/layout/page/html/catalog.xml
将这下列程式码加入至产品的head中
<block type="catalog/product_view" name="socail_meta_tags" template="catalog/product/view/social_meta_tags.phtml" />
位置在<catalog_product_view translate="label">
….
<reference name="head">
….
<block type="catalog/product_view" name="socail_meta_tags" template="catalog/product/view/social_meta_tags.phtml" />
</block>
</reference>
</catalog_product_view>
接着建立phtml档案
路径: /app/design/frontend/界面/布景主题/template/catalog/product/view/social_meta_tags.phtml
将下列程式码复制到档案中
<?php
$currentURL = Mage::helper('core/url')->getCurrentUrl();
$product = $this->getProduct();
$imgURL = $this->helper('catalog/image')->init($product, 'image')->resize(200);
$siteName = Mage::getStoreConfig('general/store_information/name');
?>
<!-- Twitter Card data -->
<meta name="twitter:card" content="product">
<meta name="twitter:title" content="<?php echo $product->getName(); ?>">
<meta name="twitter:description" content="<?php echo $product->getMetaDescription(); ?>">
<meta name="twitter:image" content="<?php echo $imgURL; ?>">
<!-- Open Graph data -->
<meta property="og:url" content="<?php echo $currentURL; ?>"/>
<meta property="og:image" content="<?php echo $imgURL; ?>">
<meta property="og:title" content="<?php echo $product->getName(); ?>"/>
<meta property="og:type" content="product"/>
<meta property="og:site_name" content="<?php echo $siteName; ?>"/>
<meta property="og:description" content="<?php echo $product->getMetaDescription(); ?>"/>
接着到产品的分享模版底下，将开启方式从开新分页改成开出小视窗
路径：/app/design/frontend/界面/布景主题/template/catalog/product/view/sharing.phtml
将下列程式码Line 40 ~ Line 48
<li>
<?php $_u = 'phttp://www.astralweb.com.tw=' . $_productUrl . '&p[images][0]=' . $_productImageUrl . '&p[title]=' . $_productName . ' &p[summary]=' . urlencode(trim($_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description'))); ?>
<a href="<?php%20echo%20'http://www.facebook.com/sharer.php?s=100&'%20.%20$_u;%20?>" target="_blank" title="<?php echo $this- >__('Share on Facebook') ?>" class="link-facebook">
<?php echo $this->__('Share Facebook') ?>
</a>
</li>
<li>
<a href="<?php%20echo%20'http://twitter.com/home?status='%20.%20$_productName%20.%20'+'%20.%20$_productUrl;%20?>" target="_blank" title="<?php echo $ this->__('Share on Twitter') ?>" class="link-twitter"><?php echo $this->__('Share on Twitter') ?></a>
</li>
更改成
<li>
<a href="#" target="_blank" title="<?php echo $this->__('Share on Facebook') ?>" class="link-facebook" onclick="javascript:void window.open ('<?php echo 'http://www.facebook.com/sharer.php?s=100&phttp://www.astralweb.com.tw=' . $_productUrl; ?>',' ','width= 500,height=450,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top=0'); return false;">
<?php echo $this->__('Share Facebook') ?></a>
</li>
<li>
<a href="<?php%20echo%20'http://twitter.com/home?status='%20.%20$_productName%20.%20'+'%20.%20$_productUrl;%20?>" target="_blank" title="<?php echo $ this->__('Share on Twitter') ?>" onclick="javascript:void window.open('<?php%20echo%20'http://twitter.com/home?status='%20.%20$_productName%20.%20'+'%20.%20$_productUrl;%20?>',' ','width=500,height=450,toolbar=0,menubar=0,location=0,status=0,scrollbars=0,resizable=0,left=0,top= 0'); ga('send', 'event', 'Link', 'Click', 'AVLT-product - click to share'); return false;" class="link-twitter">
<?php echo $this->__('Share on Twitter') ?>
</a>
</li>
接着到前台验收改变得成果
点击产品页面Facebook分享，就会发现Facebook分享有了新的变化啰
如果没有得到变化的话，可以利用Facebook Debug来测试以及刷新资料.
这是本次的教学，谢谢大家的收看，有任何问题欢迎联络我们
