WordPress, コーディング(マークアップ)

WordPressにプラグイン無しでFacebookのいいね/シェアボタンを設置する方法

  • thumbnail
  • 以外と簡単!プラグインなしで手軽にいいねボタン設置♪

最近、ブログやWebサイトを作る時にSNSへのシェアボタンの設置が必須になってますよね!

ってことで、当ブログにも張り切って設置してみました♪
(記事の最下部です!)

当ブログはWordPressで構築しているので、
最初はいつもお仕事でお世話になっているWP Social Bookmarking Lightを使って、
tweetボタン、いいね/シェアボタン、はてぶボタンを設置しました!

オープンしてから3週間ほどたって、
この前友達に「このブログ、スマホ(Android)で見たらfacebookのボタン消えてるよ?」と報告され、

What’s?!!~((((;゚Д゚)))))))

なんで?!いつも使ってるのに!神プラグインだと思ってたのに!!
いつもはそんなことないのに!!!

と慌てふためきながらごにょごにょしてたのですが、完全お手上げ。
なんか別のプラグインと喧嘩してるのか。。
Google先生が教えてくれた解決方法でも全然効かない。。。

こうなったらもうプラグイン無しでなんとかしてやる!

でも。。

twitterはそのまま貼付けたら使えるけど、
はてぶとfbはURLの指定が必要だし、テンプレートに貼ってそれぞれの個別記事をシェアするにはどうしたらいいのか。。

と思い立って調べてみたら、案外簡単!

ちなみにこちらを参考にさせて頂きました♪
「はてなブックマークボタン」をWordPressの個別記事に設置する方法

こちらははてぶの方法だったので、Facebookの方法を今回は紹介したいと思います♪

 

個別記事URLをはきだす

まずは、Facebookのいいね!/シェアボタンのコードをこちらのページから取得します!

https://developers.facebook.com/docs/plugins/like-button

私は、以下の設定でコードを作成しました!

URL to Like: http://fuji-a02.com/blog1/

※WordPressで利用する際に変更するので、とりあえず適当なURLを入れておきます。
本来はいいね!/シェアさせたいURLを入れます。

Layout:button_count

小さいボタンと、吹き出しカウンターが表示されます。

Action Type: Like

いいね!(reccomendにするとおすすめボタンになります)

Show Friend’s Faces:チェックを外す

チェックを入れると、自分の友達が2人以上いいね!しているとその人の顔が出てきます。

Include Share Button: チェックを入れる

チェックを入れると、いいね!とシェアボタンを両方表示してくれます。

 

「Get Code」ボタンをクリックすると、

・HTML5
・XFBML
・IFRAME
・URL

上記4種類のコードがそれぞれ出てきます!
今回はIFRAMEのコードを利用した方法を紹介します♪

IFRAMEのボタンをクリックすると、
こんな感じのコードが出てきます。

 

この、”入力したサイトのURL”部分を、

 

上記のコードに置き換えるだけ!

つまりは

 

こうするだけです♪

あとは、記事内のボタンを表示させたい場所へ上記のコードを全部べちゃっとはっちゃえばOKです!

アプリIDの所はご自身のものを調べてコピペして下さい!

 

アプリIDとは?

Facebookのソーシャルプラグイン(いいね!やシェアボタン等)を利用するためには、

開発者に登録の上、アプリを作成して取得するIDが必要になります。

以下の記事がわかりやすくて参考になりました^_^

開発者登録/アプリ作成、ID確認の方法

Facebookのいいねボタンを設置するには?
http://www.entacl.info/2012/12/facebook.php

解説

上記のことを簡単に説明すると、

 

とは、各個別記事に割り当てられたページURLを出力するWordPressのテンプレートタグです。
つまりは、”いまのページのURLをここに書き出して下さい!”っていうタグです。

前記のオリジナルのfbコードは、
”入力したサイトのURL”部分に記述されたリンク先をいいね!/シェアします!”
という意味のコードです。

なので、ここに上記の各個別記事に割り当てられたページURLを出力するテンプレートタグを入れたら、
各記事ページそれぞれのシェアボタンが設置できるんですね!

ちなみに、その後の”layout=button_count”とか、
”show_faces=true”は、前途のこのページでの設定が書かれています!

 

 

以上!

便利なプラグインがいっぱいありますが、
結構簡単なので、プラグインなしで一度試してみるのもありかもです♪

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