勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

微博(weibo)のシェアボタンを設置

      2018/05/09

中国最大のSNSである微博(weibo)のシェアボタンをサイト内に設置したかった。また設置ページごとにシェアするURLを変え、シェアボタンも任意で選択したい。以下に方法をメモ。

 

SNSのアカウントを作成

TOPページからだとなぜか上手くいかなかったので、こちらのページからSNSのアカウントを作成する。中国語だと分かりづらいという場合は、右下のセレクトメニューで「English」に言語を変更すると良い。たまたまかもしれないがページの表示・遷移が非常に遅かったり、Verification code部分が表示されなかったりという現象があった。ページリロードなどで気長に対応するしかなさそう。

001

 

また、メールアドレスで登録後に電話番号登録及びSMS認証があった。電話番号は例えば「090-1234-5678」の場合、Locationを「Japan」で選択し「9012345678」を入力する。「Get A-Code for fee」をクリックするとメールが届くので本文内のコードを入力して「Submit」で登録が完了するはず。ちなみにメールの送信者名が5桁の数字だったのでそれが認証コードと勘違いしてしまった。ちゃんと本文内のコードを確認する。

002

 

 

デベロッパー用ページで設定

こちらのデベロッパー用ページに行くとログインしたままの状態になっているはずなのでそのまま進める。新しいアプリを作成しようとすると個人情報の入力が求められるので、適宜入力する(ここの部分の画像はキャプチャーできていないので省略)。

その後ページ上部の一番左側のメニュー内にある「网站接入(ウェブサイトへのアクセス)」をクリック、ページ遷移後に「立即接入(即時アクセス)」をクリックする。※()カッコ内はGoogle翻訳。

003

「应用名称(アプリケーション名)」にアプリ名を入力する。フォームの横に「只能输入中文英文数字下划线和小数点」と出てきたら「中国語英数字のアンダースコアと小数点のみを入力できます」という意味みたいなので適宜変更する。

004

「应用分类(アプリケーションの分類)」はよく分からなかったのでデフォルトのままで「创建(作成された)」をクリックして初期設定完了。ダイアログが表示されクリックすると自動でページ遷移する。遷移後のページにApp keyがのっているのでメモっておく。

005

 

アイコンを用意する

公式で用意されているこちらのページがオススメ。アイコンを自作したりCSSでボタンを作る場合は必要ない。

 

シェアボタンの作成

表示させたい場所に以下を記述する。

本文とかで日本語が入る場合は以下でエンコードしておいた方が無難かも。エンコードした状態でテストしたところ正常に動いた。

 

テストしてみる

シェアボタン自体はfacebookやtwitterとそんなに変わらないので、問題なくテストできるかと思う。ただシェア後にどの部分に表示されるのか分かりづらかった。

表示されている部分の確認方法として、weiboにログインしているブラウザでTOPページを開くと自身のページに遷移する。その後ページ上部「Game」の横に自身のアカウント名のリンクがあるのでそちらをクリックする。そうするとシェアした内容が表示されているはず。

 

まとめ

weiboのシェアボタンを作成するにはfacebookのようにアカウント及びアプリを作成する必要あり。appkey作成までの道のりが少し長いが、作成してしまえば簡単に設置可能。

 - その他

  関連記事

images
他ドメインから画像の呼び出し(直リンク)を禁止する

他ドメインからの画像の呼び出し、いわゆる直リンクの禁止を行いたかった。調べるとh ...

other
Facebookのタイムラインを公式のソーシャルプラグインで表示

以前にfacebookのタイムラインを取得する方法として、file_get_co ...

other
google apiを使って簡単にQRコードの作成

jqueryとかpearのライブラリとか使わずに、簡単にQRコードを生成したかっ ...

other
ウィジウィグとは

ちょいちょい「ウィジウィグ」という単語を聞くけど、 実際にどういうものなのかよく ...

other
SSHのクライアントソフトはTeraTermよりRLoginのが便利

SSHのクライアントソフトはずっとTeraTermを使っていたけど、どうもRLo ...

other
特定のサイトが本当に落ちているのか確認する方法

特定のサイトが開かない場合、ケースとしては少ないけど自分だけが開けない場合もある ...

mzl.qobqfuxq
スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...

images
はてなブログからwordpressへの移行方法

WordPressをちゃんと試してみたかったので 移行したかった。けどどうもはて ...

other
シンタックスシュガー

探し物をしている時に「シンタックスシュガー」という 言葉があり、何それとなったの ...

other
画面遷移図を簡単に作れるサイト

画面遷移図を用意する必要があった。ただ、作ったこともないし作り方もわからない。で ...