どこに「いいね!」ボタンなどのソーシャルプラグインのタグを埋め込めばいいのか?

  • このエントリーをはてなブックマークに追加
  • 0
ソーシャルボタン

「いいね!」ボタンの設置方法をメモしようと思って、前回の記事を途中まで書いたのがもう 2 ヶ月くらい前の話・・・。ずいぶん間が空いてしまったよ・・・。

悪い癖が出てしまった。

設置の仕方に関して前回の続きから書いていきたいと思います。

【 手順 】

  1. Facebookのデベロッパー(開発者)として登録してアプリケーションIDを取得する
  2. 「いいね!ボタン」のタグを取得する
  3. 「いいね!ボタン」のタグをWordPressに書き込む(←前回の記事はここの途中まで)
  4. OGP設定用のタグを取得する
  5. OGP設定用のタグを書き込む
  6. OGP設定用のタグを書き込む

大まかに言うと以上の流れです。

今回は3.の「いいね!ボタンの」タグを WordPress のどこに配置するのがベストなのか、という部分を考察していきたいと思います。

ただ実際は「いいね!」ボタンに限らず、全てのソーシャルプラグインに共通する話です。ツイートボタンであろうが Google プラスワンボタンであろうが、はてなブックマークであろうが、タグを埋め込む場所は同じはずです。なのでソーシャルプラグインのタグの配置場所ということで参考にして頂ければと思います。

理屈はいいからとりあえず設置してたい人へ

なぜ、そこにタグを配置すればいいのか? どうして、そんな表示になるのか? などなど、理屈を説明し出すと長くなる & ぼくもはっきし言ってよく分かってないので、とりあえずこうやったらうまくいったよっていう方法をご紹介します。

書いてあるとおりにやったらうまくいくのではないでしょうか・・・。

なお、WordPress を対象にしてますが、テンプレートは Twenty Eleven を使っているので他のテンプレートだと話が通じないかもしれません。

ただ、PHP によるテンプレートの構成の仕方は基本同じだと思うので、どんなテンプレートだろうが応用が効くと勝手に思っております。

ソーシャルプラグインの配置場所3パターン

他のブログを見てみると、ソーシャルプラグインが表示されている場所は大きく以下の3つに分けられると思います。

・記事の下
・記事の上
・記事の上と下

そして一番多いのが記事の下パターンですね。

ソーシャルプラグインの設置場所①
記事の下

一番簡単かなと思うのがテンプレートファイルの中にある【 comments.php 】に「いいね!」ボタンなどのタグを埋め込む方法です。

【 comments.php 】のファイルを開くと、結構頭の方に【 <div id=”comments”> 】と書かれているのが見つかると思います。

このタグの前か後にソーシャルプラグインのタグをコピペすればOKです。

コメント用のファイルは必ず投稿記事の最後に出力されるようになっているかと思うので、ここにタグを貼っておけば必ずソーシャルプラグインも表示されるという寸法です。

また、Twenty Eleven で試した場合、WordPress の設定でコメント受付を拒否していた場合でも、ソーシャルプラグインは表示されました。

さらに【 <div id=”comments”> 】の前後にタグを埋め込むと、まずソーシャルプラグインが表示され、次にコメント欄が表示されるという流れですが・・・逆がいい場合、つまりコメント欄が表示されその後にソーシャルプラグインを表示させたい場合は、一番下にタグを埋め込めばOKです。

本当に最後の最後、【 </div><!– #comments –> 】と</div>で閉じられていると思うので、その後にコピペしてください。

ソーシャルプラグインの設置場所②
記事の上

今度は記事が始まる直前、だいたい想定しているのは記事タイトルの後がいいかな〜と思っておりますので、“ 記事タイトルと本文の間に表示させる方法 ”です。

しつこいようですが、使用しているテンプレートはTwenty Elevenです。

まず通常の投稿であれば【 content-single.php 】というファイルが記事を出力しています。このファイルを開くと、【 h1 】とか【 header 】とかいう文字が見つかるかと思います。

11 行目辺りからヘッダーやタイトルに関しての記述らしきものが見つかりますよね。

ここの【 <h1 class=”entry-title”><?php the_title(); ?></h1> 】の後にソーシャルプラグインのタグをコピペすればOKです。

ソーシャルプラグインの設置場所③
記事の上と下

最後は記事の上にも下にも「いいね!」ボタンやツイートボタンなどのソーシャルプラグイン(ソーシャルボタン)を表示させる方法です。

と言っても、①と②の両方すればいいだけです。

こちらの記事で書いたように、ページの URL は自動的に取得してくれるようになってますので、上も下も連動していることになります。

ソーシャルボタンを好きな位置に配置できるように

以上を参考にして頂ければ、だいたい一般的なソーシャルプラグインの配置には対応できるかと思います。

最近は自力で設置しなくても、テーマに元々設置されていたりプラグインを使ったりすることで簡単に設置できるようになっていますので、それらを使用するのもいいと思います。

  • このエントリーをはてなブックマークに追加

無料メール講座

WordPress を活用している
社長、フリーランス、ウェブマーケターのための

ホームページ制作の 3 つの間違い
売上を上げるフレームワークを無料公開中……

無料メール講座

もっと楽に、簡単にホームページを作れないものだろうか?
もっと楽に、簡単にインターネットから集客できないものだろうか?
もっと楽に、簡単にインターネットから売上を上げられないものだろうか?

そんなことを思ったことがある方のために、このページを用意しました。

私たちは、ウェブマーケティングに携わる中で、多くの人が陥っているある「勘違い」に気づきました。

その勘違いとは・・・

コメントをどうぞ

メールアドレスが公開されることはありません。