これいいね!Facebookいいね(Like)ボタンを設置する方法

これいいね!Facebookいいね(Like)ボタンを設置する方法

ブログを始めたら「ツイート」、「いいね!」ボタンを設置せよ!といろんなところで目にします。長い物には巻かれる派な私も、もちろん設置しております。

設置をオススメする理由は別の方にお任せするとして、今回は「いいね!」ボタンを設置する方法をご紹介:)

SPONSORED LINK

事前準備

まずは以下のコードを<body>タグの直後に貼り付けます。

2014/1/9 追記:
スクリプトタグの一部が間違っておりました。修正しましたのでこれで問題なく設置できます。申し訳ございませぬ。

2014/11/20 追記:以下のコードは2015年5月以降使用できなくなります。新しいコードはこちらの記事「重要!Facebookいいね(Like)ボタンを設置する方法(改訂版)」を参考にしてください。

こんな感じに貼り付けて!

貼り付けたイメージはこんな感じ!

初心者向け:編集不要!コピペでOK!!

設置は簡単、ボタンの下に書かれたコードをコピペするだけ!

2014/04/30 追記

ボタンの設置方法が分からない方はこちらの記事を参考にどうぞ:)

記事:記事下など好きな所にSNSボタンを設置する方法

吹き出しver(おすすめ)

box_count


<div class="fb-like" expr:data-href="data:blog.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/>

<div class="fb-like" expr:data-href="data:post.url" data-layout="box_count" data-action="like" data-show-faces="false" data-share="false"/>

スタンダードver

standard


<div class="fb-like" expr:data-href="data:blog.url" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"/>

<div class="fb-like" expr:data-href="data:post.url" data-layout="standard" data-action="like" data-show-faces="false" data-share="false"/>

横にカウントがあるver

button_count


<div class="fb-like" expr:data-href="data:blog.url" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"/>

<div class="fb-like" expr:data-href="data:post.url" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"/>

上級者向け:じっくり吟味してから設置!

ここからはちょっと上級者向けの設置方法をご紹介!

まずは以下のサイトにアクセスします。

Like Button(公式ページ)

いいね!ボタンの設定はここ!

サイト中央の「Get your Like button code」に細かい設定をしていきます。

URL to Like(いいね!するURL)

ブログのURLを入力します。

※記事を「いいね!」するボタンにしたい方も、いったんブログのURLを入力しときましょう。

Width(幅)

エリアの幅(px)を指定します。

※次のレイアウトで「standard」か「button」を選んだ時のみ適用されます。

Layout(ボタンのレイアウト)

ボタンのレイアウトを選択します。

[standard]

standard

[box_count]

box_count

[button_count]

button_count

[button]

button

Action Type(ボタンの種類)

ボタンの種類を選択します。

like:いいねボタン

recommend:おすすめボタン

Show Friends' Faces(顔写真表示)

いいね!している人の顔写真を表示するか選択します。

チェック:表示する

未チェック:表示しない

Include Share Button(送信ボタン表示)

いいね!ボタンの横に「送信」ボタンを表示するか選択します。

チェック:表示する

未チェック:表示しない

プレビューで完成予想図を確認!

下にプレビューが表示されるので、問題なければ「Get Code」をクリック。

HTML5が選択されてる!

「HTML5」が選択されていることを確認し、

このソースを貼り付ければ完成!

このコードを設置したいところに張り付ければOK!

記事を「いいね!」するボタンにカスタマイズする

変更する箇所は1箇所。aタグ内の次の箇所を

data-href="ブログのURL" 

このように変更。

expr:data-href="data:post.url"

カスタマイズ後のコードはこんな感じ!


<div 
class="fb-like" 
expr:data-href="data:post.url" 
data-layout="box_count" 
data-action="like" 
data-show-faces="false" 
data-share="false"/>

※URLだけでなくdata-hrefexpr:data-hrefとするのを忘れないように!

あとは設置したいところにコードを張り付ければ完成!

まとめ

とういわけで、Facebook「いいね!」ボタンを設置する方法のご紹介でした。

「いいね!」ボタンだけでなく他のSNSボタンも設置して、たくさんの人にブログを広めてもらいましょう:)

SPONSORED LINK

この記事がお役にたちましたらシェアをお願いします:)