微博(weibo)のシェアボタンを設置
中国最大のSNSである微博(weibo)のシェアボタンをサイト内に設置したかった。また設置ページごとにシェアするURLを変え、シェアボタンも任意で選択したい。以下に方法をメモ。
SNSのアカウントを作成
TOPページからだとなぜか上手くいかなかったので、こちらのページからSNSのアカウントを作成する。中国語だと分かりづらいという場合は、右下のセレクトメニューで「English」に言語を変更すると良い。たまたまかもしれないがページの表示・遷移が非常に遅かったり、Verification code部分が表示されなかったりという現象があった。ページリロードなどで気長に対応するしかなさそう。
また、メールアドレスで登録後に電話番号登録及びSMS認証があった。電話番号は例えば「090-1234-5678」の場合、Locationを「Japan」で選択し「9012345678」を入力する。「Get A-Code for fee」をクリックするとメールが届くので本文内のコードを入力して「Submit」で登録が完了するはず。ちなみにメールの送信者名が5桁の数字だったのでそれが認証コードと勘違いしてしまった。ちゃんと本文内のコードを確認する。
デベロッパー用ページで設定
こちらのデベロッパー用ページに行くとログインしたままの状態になっているはずなのでそのまま進める。新しいアプリを作成しようとすると個人情報の入力が求められるので、適宜入力する(ここの部分の画像はキャプチャーできていないので省略)。
その後ページ上部の一番左側のメニュー内にある「网站接入(ウェブサイトへのアクセス)」をクリック、ページ遷移後に「立即接入(即時アクセス)」をクリックする。※()カッコ内はGoogle翻訳。
「应用名称(アプリケーション名)」にアプリ名を入力する。フォームの横に「只能输入中文英文数字下划线和小数点」と出てきたら「中国語英数字のアンダースコアと小数点のみを入力できます」という意味みたいなので適宜変更する。
「应用分类(アプリケーションの分類)」はよく分からなかったのでデフォルトのままで「创建(作成された)」をクリックして初期設定完了。ダイアログが表示されクリックすると自動でページ遷移する。遷移後のページにApp keyがのっているのでメモっておく。
アイコンを用意する
公式で用意されているこちらのページがオススメ。アイコンを自作したりCSSでボタンを作る場合は必要ない。
シェアボタンの作成
表示させたい場所に以下を記述する。
<a href="http://service.weibo.com/share/share.php?url=[URL]&appkey=[appkey]&title=[本文]&pic=[画像]" onclick="window.open(this.href, 'Weibo', 'width=600, height=400, menubar=no, toolbar=yes, scrollbars=yes'); return false;"> <img src="[シェアボタンの画像]"> </a>
本文とかで日本語が入る場合は以下でエンコードしておいた方が無難かも。エンコードした状態でテストしたところ正常に動いた。
<?php $title = urlencode('本文');?>
テストしてみる
シェアボタン自体はfacebookやtwitterとそんなに変わらないので、問題なくテストできるかと思う。ただシェア後にどの部分に表示されるのか分かりづらかった。
表示されている部分の確認方法として、weiboにログインしているブラウザでTOPページを開くと自身のページに遷移する。その後ページ上部「Game」の横に自身のアカウント名のリンクがあるのでそちらをクリックする。そうするとシェアした内容が表示されているはず。
まとめ
weiboのシェアボタンを作成するにはfacebookのようにアカウント及びアプリを作成する必要あり。appkey作成までの道のりが少し長いが、作成してしまえば簡単に設置可能。
関連記事
-
-
AWStatsとは
業務中に「awstats」とよく聞くけど、何それ? と なっていたのでメモ。 ■ ...
-
-
API等の外部サービスを経由してQRコードを作成
QRコードを作成する際は今までGoogle Chart APIを利用していたが、 ...
-
-
モダンブラウザとレガシーブラウザ
業務中「モダンブラウザ」と聞いたことの無い単語が あったので調べてみた。 標準の ...
-
-
はてなブログからwordpressへの移行方法
WordPressをちゃんと試してみたかったので 移行したかった。けどどうもはて ...
-
-
GoogleアナリティクスをiPhoneのアプリで確認する方法
外出先でアナリティクスを確認したいって時があって、何か良さげなアプリは無いかと探 ...
-
-
JSONのバリデートを行ってくれるサイト
JSONのバリデートを行ってくれるサイトを 上司から教えてもらったのでメモ。 ザ ...
-
-
Macで最低限の開発環境を整えた際のメモ
他所で仕事をする機会があって使えそうなノートPCがMBPしかなかった。ただ、買っ ...
-
-
ウィジウィグとは
ちょいちょい「ウィジウィグ」という単語を聞くけど、 実際にどういうものなのかよく ...
-
-
CORSでクロスドメイン突破
面白そうな話を聞いたのでメモ。 >■CORS(Cross-Origin R ...
-
-
お名前.comの共用サーバー(SD)にてFFFTPでの接続が途切れる
お名前.comの共用サーバー(SD)でFFFTP接続をし、ファイルをアップロード ...
- PREV
- mPDFで「The /e modifier is …」エラー
- NEXT
- CSSでプロパティの初期化