中国ソーシャルシェアボタンの導入
最近日本企業の中国語サイトにも、中国ソーシャルシェアボタンが見られるようになりました。導入の方法を簡単に説明させていただきます。ソーシャル系で取り組んでみたい方は、是非貼ってみてください。
■目次
お気軽に導入したい方
「JIATHIS」は以前紹介させていただいた中国で人気のソーシャルボタンです。新浪weibo、QQ空間、人人網をはじめとする中国人気ソーシャルサービスを網羅しています。これがあれば楽ですね。
導入の方法は基本的に下記コードのどれかをそのまま、表示したいところに貼るだけです。
ボタン式
<div id="ckepop"> <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt" target="_blank"><img src="http://v2.jiathis.com/code_mini/images/btn/v1/jiathis2.gif" border="0" /></a> <a class="jiathis_counter_style_margin:3px 0 0 2px"></a> </div> <script type="text/javascript" src="http://v2.jiathis.com/code_mini/jia.js" charset="utf-8"></script>
アイコン式
<div id="ckepop"> <span class="jiathis_txt">分享到：</span> <a class="jiathis_button_tools_1"></a> <a class="jiathis_button_tools_2"></a> <a class="jiathis_button_tools_3"></a> <a class="jiathis_button_tools_4"></a> <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a> <a class="jiathis_counter_style"></a> </div> <script type="text/javascript" src="http://v2.jiathis.com/code/jia.js" charset="utf-8"></script>
サイドバー式
<script type="text/javascript" src="http://v2.jiathis.com/code/jiathis_r.js?move=0" charset="utf-8"></script>
表示例
APIなど工夫したい方
「JIATHIS」は効果測定、APIなどもサポートしていますが、効果測定を利用するには会員登録が必要になります。APIはプログラムと連携できるので、クライアントのニーズに合った取り組みを実現可能です。
APIサンプルコード
http://www.jiathis.com/send/?webid=tsina&url=http://www.urlurl.com&title=よいコンテンツ！
APIのパラメータ
- shareID： シェア先サイトのID（一覧ページ）
- $siteUrl： シェアするURL
- $siteTitle： シェアするコンテンツのタイトル
- $uid： 会員ID（必須ではない、要登録）
オフィシャルボタンじゃないと駄目な方
第三者サービスの利用に躊躇してしまう方は、オフィシャルボタンもあります！以下は新浪weiboとQQ空間のシェアボタンのサンプルコードです。
QQ空間シェアボタンのサンプルコード
<script type="text/javascript">
(function(){
var p = {
url:location.href,
desc:'',/*シェアする理由*/
summary:'',/*抜粋*/
title:'',/*シェアするタイトル*/
site:'',/*シェアするサイト名*/
pics:'' /*シェアする画像のパス*/
};
var s = [];
for(var i in p){
s.push(i + '=' + encodeURIComponent(p[i]||''));
}
document.write(['<a href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?',s.join('&'),'" target="_blank" title="分享到QQ空间"><img src="http://qzonestyle.gtimg.cn/qzone_v6/proj_connect_open/img/qzone_share_txt_m.png" alt="分享到QQ空间" border="0" /></a>'].join(''));
})();
</script>
新浪weiboシェアボタンのサンプルコード
<script type="text/javascript" charset="utf-8">
(function(){
var _w = 90 , _h = 24;
var param = {
url:location.href,
type:'2',
count:'1', /**シェア数表示するかどうか*/
appkey:'', /**appkeyシェア先表示*/
title:'', /**シェアする内容*/
pic:'', /**シェアする画像のパス*/
ralateUid:'', /**関連ユーザーのUID、シェア対象に@で通知*/
language:'zh_cn', /**言語設定，zh_cn|zh_tw(簡体字繁体字設定可能)*/
rnd:new Date().valueOf()
}
var temp = [];
for( var p in param ){
temp.push(p + '=' + encodeURIComponent( param[p] || '' ) )
}
document.write('<iframe allowTransparency="true" frameborder="0" scrolling="no" src="http://hits.sinajs.cn/A1/weiboshare.html?' + temp.join('&') + '" width="'+ _w+'" height="'+_h+'"></iframe>')
})()
</script>
表示例
