WordPress&facebook連携設定② いいね&シェアボタン

  • button only@2x Wordpress&facebook連携設定② いいね&シェアボタン

wpAndfb2 Wordpress&facebook連携設定② いいね&シェアボタン

WordPress&facebook連携設定① OGP設定方法 の続きです。

WordPressテンプレートやプラグインで簡単につけられる
いいね!」ボタンだけじゃなくて、

JavascriptSDKシェアボタン
Facebook公式で推奨されている方法で、
ちゃんと設置してみましょう! っていう内容です。

いいね!」と「シェア」の違いについても、
ブログ運営の観点から軽く解説しておきます。

ブログ記事の「いいね!」「シェア」ボタン の違い

Facebook運営チームのまとめによると

「いいね」
シンプルに「良い!」「共感した!」という意思表示をするのが、
「いいね!」ボタンです。

「シェア」
リンクや画像付きの情報で、
「この情報、自分の知り合いにも広めたい(共有したい)!!」
と思ったときに使用するのが、「シェア」ボタンです。

出典:「いいね」と「シェア」の使い方

ということです。

少々付け加えると、「いいね!」の場合は、
友達のタイムラインに表示されたりされなかったりします。
(facebookのユーザーエッジランクなどが関係している模様?)

シェア」の場合は、
ほぼ確実に友達のタイムラインに表示されます。

ブログの種類によっては、むしろ「シェア」ボタンだけにして、
選択肢を限定した方が、アクセスアップには効果的かもしれません。
最近流行りのバイラルメディアのように。

JavaScript SDK の記述

まず、以下のコードを、
header.php<body> タグの下に記述しておきましょう。

【あなたのappID】の部分に、
ウェブサイト用に作成したFacebookアプリのappIDを記述します。

appIDについて詳しくは、こちらを参照してください↓
WordPress&facebook連携設定① OGP設定方法 – アプリを作成してappIDを取得

ボタンのコードの取得

次に、
https://developers.facebook.com/docs/plugins/like-button 
に アクセスして、ボタンのコードを取得します。(下図参照)

Like Button dsc Wordpress&facebook連携設定② いいね&シェアボタン

URL to Like」「Width」は基本的には空欄に。
Layout」は「button_count」か「box_count」で
Action Type」は「like
Show Friend’s Faces」「Include Share Button」にチェック

通常は、以上のような設定にしておくことをおすすめします。

いいね!」よりも「シェア」の方が拡散力が高いので、
Include Share Button(シェアボタンも含める)にチェックを入れて
なるべく「いいね!」と「シェア」両方のボタンを設置しておきましょう。

設定ができたら「Get Code」ボタンをクリックして、
実際にコードを取得しましょう。

LikeButton Your Plugin Code Wordpress&facebook連携設定② いいね&シェアボタン

形式は「HTML5」で、
「Include the JavaScript SDK using this app」 の項目は
作成済のアプリを指定する必要があります。
参照:WordPress&facebook連携設定① OGP設定方法 - アプリを作成してappIDを取得

画像下部の、赤枠で囲った部分のコードをコピーします。

中央のコードは、先ほどの「JavaScript SDK の記述」で
記述したので不要です。ページのどこかに一つあれば良いので。

ボタンの設置

取得したコードを、ボタンを挿入したいところに記述します。

テーマ編集 → single.php から記事の下部に挿入したり、
sns用のphpファイルに記述しておきましょう。

ボタンの配置には
プラグイン Sharebar を使うこともおすすめします。

プラグイン Sharebarの使用方法

プラグイン → 新規追加 から Sharebarをインストール。
最初に入っている英語圏向けのボタンを削除。
Google+はてなブックマークLINEPocketなど
日本でも比較的よく使われているボタンを、お好みで追加しておきます。

導入までの詳しい解説はこちらの記事がおすすめです↓
Sharebar – スクロールするソーシャルメディアのシェアボタンを表示できるWordPressプラグイン | ネタワン

全体のボタン設定画面を以下のようにしておけばOKです。
ボタンによってはこの画面でのプレビューが表示されませんが、
問題はありません。

Sharebar1s Wordpress&facebook連携設定② いいね&シェアボタン

facebook の項目の Edit を開き
以下の画像のように先程コピーしたコードを貼り付けましょう。

Sharebar2s Wordpress&facebook連携設定② いいね&シェアボタン

先ほどのボタン種類選択画面の「Layout」項目の
button_count」か「box_count」を選べぶところで、

Big Button」欄に「box count
Small Button」欄に「button count」のコートを貼り付けましょう。

button count And box count Wordpress&facebook連携設定② いいね&シェアボタン

賢威テンプレートの場合

賢威テンプレートの場合、Sharebarの設定をした上で
外観 → テーマ編集からsocial-button.phpを開いて

<li class="sb-fb-like"></li>

 を

<li><?php sharebar_button('facebook','small'); ?></li>

と 書き換えると、記事上および記事下に
いいね!」&「シェア」ボタンを設置できます。

当ブログでも、このような設定にしています。

まとめ

Facebookからのアクセスアップのために
最初から付いてる「いいね!」ボタンだけじゃなくて、 
JavaScript SDKの記述と、「シェア」ボタンもつけておきましょう!

シェア」の方が拡散されやすく、
facebookからより多くのアクセスが期待できます。

ただ、そもそも拡散されるためには、
つい拡散したくなるような良い記事を書くことが大前提です。

「いいね!」「フォロー」「RSS購読」で最新情報をチェック!
応援していただけるとブログ更新の励みになります。


follow us in feedly
このボタンについて
にほんブログ村 ライフスタイルブログ 自由人へ
  ↑応援ポチもよろしくです↑

コメントを残す

このページの先頭へ