中国ソーシャルシェアボタンの導入


最近日本企業の中国語サイトにも、中国ソーシャルシェアボタンが見られるようになりました。導入の方法を簡単に説明させていただきます。ソーシャル系で取り組んでみたい方は、是非貼ってみてください。

■目次

お気軽に導入したい方

JIATHIS」は以前紹介させていただいた中国で人気のソーシャルボタンです。新浪weiboQQ空間、人人網をはじめとする中国人気ソーシャルサービスを網羅しています。これがあれば楽ですね。

導入の方法は基本的に下記コードのどれかをそのまま、表示したいところに貼るだけです。

ボタン式

[xml toolbar=”true”]</pre>
<div id="ckepop"><a class="jiathis jiathis_txt" href="http://www.jiathis.com/share" target="_blank"><img src="http://v2.jiathis.com/code_mini/images/btn/v1/jiathis2.gif" alt="" border="0" /></a></div>
<pre>
<script charset="utf-8" type="text/javascript" src="http://v2.jiathis.com/code_mini/jia.js"></script>
[/xml]

アイコン式

[xml toolbar=”true”]</pre>
<div id="ckepop"><span class="jiathis_txt">分享到:</span> <a class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" href="http://www.jiathis.com/share" target="_blank">更多</a></div>
<pre>
<script charset="utf-8" type="text/javascript" src="http://v2.jiathis.com/code/jia.js"></script>
[/xml]

サイドバー式

[xml toolbar=”true”]
<script charset="utf-8" type="text/javascript" src="http://v2.jiathis.com/code/jiathis_r.js?move=0"></script>
[/xml]

表示例

中国ソーシャルシェアボタン

APIなど工夫したい方

JIATHIS」は効果測定、APIなどもサポートしていますが、効果測定を利用するには会員登録が必要になります。

APIはプログラムと連携できるので、クライアントのニーズに合った取り組みを実現可能です。

APIサンプルコード

[xml toolbar=”true”]
http://www.jiathis.com/send/?webid=tsina&url=http://www.urlurl.com&title=よいコンテンツ!
[/xml]

APIのパラメータ

  • $siteUrl: シェアするURL
  • $siteTitle: シェアするコンテンツのタイトル
  • $uid: 会員ID(必須ではない、要登録)

オフィシャルボタンじゃないと駄目な方

第三者サービスの利用に躊躇してしまう方は、オフィシャルボタンもあります!以下は新浪weiboとQQ空間のシェアボタンのサンプルコードです。

QQ空間シェアボタンのサンプルコード

[xml toolbar=”true”]<script type="text/javascript">// <![CDATA[
(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>
[/xml]

新浪weiboシェアボタンのサンプルコード

[xml toolbar=”true”]
<script charset="utf-8" type="text/javascript">// <![CDATA[
(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>
[/xml]

表示例

weiobとQQのオフィシャルボタン