文章彙整

優化你的Magento社群分享功能

By Astral Web 4 years agoNo Comments
首頁  /  Magento  /  Magento開發  /  優化你的Magento社群分享功能

優化Magento社群分享功能

在社群網站火紅的現今,社群分享功能已經與電子商務密不可分,所以我們也常在Magento中安裝社群分享的功能,但是該如何準確的控制分享至社群網站的功能呢?本篇就要教導大家如何簡單的控制我們社群分享的內容。

在 Magento1.9.1 版本中的rwd主題包中已經內建有簡單的社群分享功能,我們將以此為範例,為各位展示此次教學範例。

下圖為1.9.1 預設rwd主題包的產品頁面,紅色框起的部分是該主題包的預設分享功能。

優化Magento社群分享功能

點下Facebook圖示後就會到分享的頁面

之後點擊Twitter的分享功能

優化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: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 = 'p[url]=' . $_productUrl . '&p[images][0]=' . $_productImageUrl . '&p[title]=' . $_productName . '&p[summary]=' . urlencode(trim($_helper->productAttribute($_product, nl2br($_product->getShortDescription()), 'short_description'))); ?>

<a href="<?php echo 'http://www.facebook.com/sharer.php?s=100&' . $_u; ?>" target="_blank" title="<?php echo $this->__('Share on Facebook') ?>" class="link-facebook">

<?php echo $this->__('Share Facebook') ?>

</a>

</li>

<li>

<a href="<?php echo 'http://twitter.com/home?status=' . $_productName . '+' . $_productUrl; ?>" 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&p[url]=' . $_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 echo 'http://twitter.com/home?status=' . $_productName . '+' . $_productUrl; ?>" target="_blank" title="<?php echo $this->__('Share on Twitter') ?>" onclick="javascript:void window.open('<?php echo 'http://twitter.com/home?status=' . $_productName . '+' . $_productUrl; ?>',' ','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社群分享功能

如果沒有得到變化的話,可以利用 Facebook Debug 來測試以及刷新資料.

這是本次的教學,謝謝大家的收看,有任何問題歡迎聯絡我們

更多Magento相關文章請看: Magento教學導覽

 

 

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  Magento開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。