Magento教程 75:优化你的Magento社群分享功能

在社群网站火红的现今,社群分享功能已经与电子商务密不可分,所以我们也常在Magento中安装社群分享的功能,但是该如何准确的控制分享至社群网站的功能呢? 本篇就要教导大家如何简单的控制我们社群分享的内容。

在Magento1.9.1 版本中的rwd主题包中已经内建有简单的社群分享功能,我们将以此为范例,为各位展示此次教学范例。

下图为1.9.1 预设rwd主题包的产品页面,红色框起的部分是该主题包的预设分享功能。

Magento教程 75:优化你的Magento社群分享功能
Magento教程 75:优化你的Magento社群分享功能

点下Facebook图示后就会到分享的页面

之后点击Twitter的分享功能

Magento教程 75:优化你的Magento社群分享功能
Magento教程 75:优化你的Magento社群分享功能

这些结果都只是没有指定资料抓取后的结果,还有更多的改善空间。

再看完了预设的分享功能之后,接下来开始我们的优化作业。

优化作业

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:imag​​e" content="<?php echo $imgURL; ?>">

 

 <!-​​- Open Graph data -->

 <meta property="og:url" content="<?php echo $currentURL; ?>"/>

 <meta property="og:imag​​e" 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分享有了新的变化啰

Magento教程 75:优化你的Magento社群分享功能
Magento教程 75:优化你的Magento社群分享功能

如果没有得到变化的话,可以利用Facebook Debug来测试以及刷新资料.

这是本次的教学,谢谢大家的收看,有任何问题欢迎联络我们

 

原文:http://www.astralweb.com.tw/optimize-magento-community-share/

本文:Magento教程 75:优化你的Magento社群分享功能

Tags:

Leave a Reply