中国人向けホームページ作成③「SNSシェアボタン設置実践編」

blog
2023.05.20

中国でのホームページ作成のポイントについて述べます。今回はどのようにしてブログに中国式シェアボタンを設置するかを解説します。

目次
  1. 設置方法の概要
  2. シェアボタンの実装方法
    1. AppKeyの取得
    2. コード生成
  3. 詳細手順
    1. ボタンの完成例
    2. シェアする内容を選択
    3. ボタンタイプの選択
    4. シェア元情報の入力
    5. コードの生成と投入
  4. さらに細かい設定をするために

 

設置方法の概要

 

WordPressのブログでシェアボタンを設置する方法は主に3パターンあります。

  1. テーマの機能として初めから実装されている
  2. シェアボタンを追加するプラグインを導入する
  3. シェアボタンのコードを生成してブログに貼り付ける

ここではそれぞれについて細かく説明はしません。中国SNSシェアボタンは3.コードのやり方で実装します。

 

シェアボタンの実装方法

百度分享のトップページ

  1. 各SNSのAppKeyを取得する（ハードル高い。やらなくても設置は可能）
  2. シェアボタンコードを生成する
  3. シェアボタンコードをブログに貼り付ける

ざっとこんな流れです。

AppKeyの取得

AppKeyとは自分のブログを一意に識別するためのキーです。シェアボタンを設置するためには、各SNSベンダーに自分のブログを登録する必要があります。

ここは真面目にやると時間がかかるのですが、シェアボタンを設置して、SNSに情報を流すだけならAppKeyは必要ないです。大抵のことはそれで事足りるのでスキップします。

コード生成

百度分享のコード生成画面。STEP1

百度搜索资源平台_共创共享鲜活搜索
百度搜索面向合作伙伴的官方平台，为开发者、内容创作者、站点管理者等伙伴，提供优化工具、数据、课程、Q&A等服务，助力资源进入搜索，同时提供搜索项目合作机会，让优质资源脱颖而出。
share.baidu.com

百度分享のコード生成画面にアクセスし、あとは画面に記載されている通りに進めます。

百度分享のコード生成画面。STEP2

詳細手順

ボタンの完成例

今回の手順で完成する中国版SNSシェアボタンの完成例は上記の通りです。各SNSごとのアイコン表示になります。一番左の＋アイコンについては、その他SNSという意味です。

中国のSNSは種類がとても多いので単純なアイコンの羅列では全部表示しきれません。＋のアイコンをクリックすると、その他のSNS一覧が表示されます。

微博（左から３つ目のアイコン）をクリックすると上記の画面になります。

  • シェアする時の文言・・・初期値を後の手順で設定できます
  • クリック時のリンク先・・・ボタンを設置したページURLが自動で入ります
  • 参考画像・・・該当ページの画像が自動で収集されてリストされます。好きな画像をシェアする時に添付できます。個別に画像を追加することもできます

以降は実際の設置手順になります。

シェアする内容を選択

http://share.baidu.com/codeにアクセスします。

「代码获取」⇒「自由选择版」とクリックします。

チェックボックスからシェアする内容を選択します。

  • 页面分享功能（ページシェア）
  • 图片分享功能（画像シェア）
  • 划词分享功能（ワードシェア）

图片分享功能（画像シェア）を選択した場合、ページ内の各画像を右クリックした時にシェアのアイコンが付与されるようになります。今回の説明では「页面分享功能（ページシェア）」だけを選択して進めます。

最初の画面の右半分（黒い太線で囲った部分）はプレビュー表示です。今は関係ないので、「下一步 页面按钮设置」をクリックして次の画面に進みます。

ボタンタイプの選択

ボタンタイプの選択画面は、シェアする内容で何を選択したかによって異なります。

上記は最初に页面分享功能（ページシェア）を選択した場合の画面です。画面は、左側が設定、右側がプレビューになります。

左側でボタンの設定をします。

  1. ボタンタイプ・・・アイコン、文字、フロート
  2. アイコンタイプ
  3. アイコンサイズ
  4. アイコンの並び順
  5. その他SNS一覧の表示方法・・・１列、２列、エントリーの内容

ボタンタイプ「フロート」を選択すると、画面右にシェアボタンへのポインタが表示されるようになります。そこにマウスカーソルを当てると、シェアボタンが表示されます。本説明ではボタンタイプ「アイコン」使います。

プレビュー欄でボタンを確認します。その後「下一步 图片按钮设置」をクリックして次の画面に進みます。

シェア元情報の入力

ここで設定する内容は、シェアする画面（先に掲載した完成例欄参照）に何を表示するかです。

  • 自定义分享文案・・・シェアする時の文言です
  • 自定义分享图片・・・追加画像

例えば、

BCPREST 会員制サイトをシンプルに、簡単に、自由に作ろう！

詳しくは画像をクリック！

こんな感じでブログをシェアしたい場合の文言や画像がそれぞれ設定できます。

なお、AppKeyの入力欄は空白で問題ありません。

コードの生成と投入

シェア元情報を入力したら「直接复制代码」をクリックします。

上記のようなウィンドウが表示されてシェアボタンコードが表示されています。

ここに記載されているコードをコピーして、自分のWordpressブログに投入します。ここからのやり方はお使いのテーマによって異なります。

例えばSimplicity2テーマの場合は、「カスタムHTML」の入力で「投稿本文下」欄に投入します。これで全てのページに今回作成したシェアボタンが表示されるようになります。

 

さらに細かい設定をするために

「专业开发版」のやり方を踏襲すればもっと細かく設定できます。

  • アイコンや文言をもっと凝ったものにする
  • リンク先を自由に変える
  • WeChatのQRコードを表示する
  • など

例えばビリビリ動画（上の図を参照）など、いろんなサイトで凝った演出が多いです。また後日やり方をまとめます。

コメント