1. add js and css to your layout config file
<reference name="head"> <action method="addCss"><stylesheet>css/fancybox/jquery.fancybox-1.3.4.css</stylesheet></action> <action method="addCss"><stylesheet>css/share/jquery.share.css</stylesheet></action> <action method="addItem"><type>skin_js</type><name>js/share/qrcode.min.js</name></action> <action method="addItem"><type>skin_js</type><name>js/share/jquery.share.min.js</name></action> </reference>
2. write html file with product
<?php
$_product_id = $this->getData('current_product_id');
$_product = Mage::getModel('catalog/product')->load($_product_id);?>
<?php $productName = $_product->getName(); ?>
<?php $productUrl = $_product->getProductUrl(); ?>
<?php $productImage = $_product->getImageUrl() ?>
<!-- share BEGIN -->
<div class="share-list hp-shareTo-inner J_share_list_<?php echo $_product_id?>">
<a href="javascript:" data-type="weixin" class="btn-share-weixin" title="<?php echo $this->__('weixin')?>"><?php echo $this->__('weixin')?></a>
<a href="javascript:" data-type="weibo" class="btn-share-weibo" title="<?php echo $this->__('weibo')?>"><?php echo $this->__('weibo')?></a>
<a href="javascript:" data-type="qq" class="btn-share-qq" title="<?php echo $this->__('qq')?>"><?php echo $this->__('qq')?></a>
<a href="javascript:" data-type="douban" class="btn-share-douban" title="<?php echo $this->__('douban')?>"><?php echo $this->__('douban')?></a>
</div>
<!-- share END -->
<!-- share js begin-->
<script>
var url = '<?php echo $productUrl; ?>';
</script>
<script>
(function($){
$('.J_share_list_<?php echo $_product_id?> a').bind('click', function() {
var type = $(this).data('type');
$.shareAPI(type, {
url: url,
title: '<?php echo $productName;?>',
pic: '<?php echo $productImage;?>',
source: {
},
buttons: {
'weixin': {
text: 'weixin',
className: 'weixin',
url: ''
},
'weibo': {
text: 'weibo',
className: 'weibo',
url: 'http://v.t.sina.com.cn/share/share.php?url={url}&title={title}&pic={pic}&appkey={appkey}&ralateUid={ralateUid}&searchPic={searchPic}'
},
'qq': {
text: 'qq',
className: 'qq',
url: 'http://connect.qq.com/widget/shareqq/index.html?url={url}&title={title}&pics={pic}&summary={summary}&desc={desc}&site={site}'
},
'douban': {
text: 'douban',
className: 'douban',
url: 'http://www.douban.com/share/service?href={url}&name={title}&text={summary}'
},
}
});
});
})(jQuery);
</script>
<!-- share js end -->
More file download please go here:
https://github.com/nevergiveup-j/HP/tree/master/share