Miki Arai

バナーを作成
2010-12-17 14:17:30

アメブロの記事ごとにFacebookの「いいね!」ボタンを設置する方法

テーマ:tips・report

アメブロの記事ごとに、Facebookの「いいね!」ボタンを設置したくてやってみました。



最初はこうだったのが・・・


WEB制作ってオモシロイ♪-記事フッター



ボタンを設置すると、こうなり・・・


WEB制作ってオモシロイ♪-いいね!ボタン設置



いいね!をクリックされると、こうなります!


<Facebookにログインしている場合>
WEB制作ってオモシロイ♪-いいね!ボタンクリック


<Facebookにログインしていない場合>
WEB制作ってオモシロイ♪-いいね!



SNS系のボタンがまとまってていい感じ。



こちらのブログの内容を参考に、ちょっと編集させていただいて設置しました。


「アメブロでfacebookやはてぶ等の各種ソーシャルブックマークボタンを自動で設置する方法」

http://ameblo.jp/amebloger-x/entry-10678387982.html


私が設置したかったのは、記事下の「なうで紹介・mixiチェック・ツイートする」ボタンの下だったので、


  $(".entry_head").eq(i).before


の部分を、


  $(".subContents").eq(i).after


に変更しました。



あとは、ボタンの表示の仕方をただのカウントだけじゃなくてコメントやアイコン付きで出したかったので、


 layout=button_count


の部分を


 layout=standard


に変更しました。


あとは幅や高さを調節して、はてぶやツイッター、mixiボイスのボタンはいらなかったので、サクッと削りました。
そして、フリープラグインにscriptをコピペして保存して、完了です。


ということで、私が編集して設置しているソースと手順は以下のとおりです。



1 以下のソースをコピーする。


<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light&amp;height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ';$(".subContents").eq(i).after(" <span>"+e+"</span>")}});</script>


2 ブログを書く>サイドバーの設定>プラグインの追加>フリープラグイン のところに、1でコピーしたものをペースト。


3 保存してブログを確認して掲載されていたら完了。



<注意点>
選ぶデザインスキンによっては、ボタンが表示されないものもあるので、ご注意を。
ちなみに私はカスタム可能のベーシックを使っています。


<気になる点>
ボタンをクリックされてFacebookのウォールに出ると、
「○○さんがameblo.jpの「アメブロのデザインをフルカスタマイズしてみた」について「いいね!」と言っています。」
というふうに表示されます。
このameblo.jpのところを、ブログタイトルが表示されて、実際にブログにリンクはられた状態にしたいんだけど、なんとかならないかしら。
誰か教え・・・いやいや(^^;、何かできないか調べてみよっと。

AD
いいね!(4)  |  コメント(98)  |  リブログ(0)

コメント

[コメントをする]

98 ■無題

ページを拝見し、タブをつけることができました!ありがとうございます!!

97 ■無題

使わせていただいてます^^

一つ質問ですが、記事ごとにサムネイル画像をしていする事はできないでしょうか?

それぞれの記事に使用している画像をFacebookでサムネイルとして使いたいのですが。。


お時間有るときに教えて頂けますか?

96 ■ありがとうございます♪

使わせていただきました^ ^

95 ■ありがとうございます!

色んな設置方法のブログを見てやってみましたが、どれもできませんでした。こちらの方法では随分簡単にできて、びっくりしました。

大変助かりました。ありがとうございました!

94 ■ありがとうございます

わかりやすかったです。
使わせていただきます。

93 ■参考にさせていただきました

初心者で試行錯誤中で・・・とても参考になりました、ありがとうございます!!

92 ■お手数ですが教えてください。

はじめまして、平川と申します。
こちらの記事がわかりやすいし希望のスタイルなのでテンプレートも同じ、カスタムのベーシック(グレー)にして
”いいねボタン”を設置しようとしたのですが、、、
何回やっても全く表示されません。。。
確認箇所および何かアドバイスいただけるとうれしいです!
ネットの環境でしょうか。
・ちなみにフェイスブックの開発者用の指示に従うとiframeは使えない。大きさを変更しろみたいな表示が出ますがよくわかりません。
・プラグインは初めてです。
忙しいところすみません。よろしくお願い致します  ミチコ

91 ■無題

はじめまして!!
いろんなサイトを探して、最終的にここにたどり着きました。いいね!設置できましたが、やはり「記事URL」があるデザインじゃないと反映されないようですね。

90 ■無題

ありがとうございます。設置出来ました。
コメント/ペタのところに記事URLが表示されないブログデザインでは表示されないようですね。最近は記事URLが表示されるデザインがほとんどありません。

89 ■無題

何度やってみてもボタンがつきません(´□`。)
どこかを書き換えたりしないとダメなんですか?

88 ■無題

何度やっても上手くいきません...
他のものがあるからなのか...
デザインを選んでいるものがよろしくないのか...
どうしたら良いのでしょう?

87 ■無題

「いいね」ボタンをつけたくて、3日ほど格闘!
いろんなサイトでプラグインをみつけて試しても思うようにいかなくてあきらめかけていました。
今日、美樹さんのサイトのたどりつき、試すと、一瞬で思っていたとおりのレイアウトで「いいね」ボタンが表示されました!
ありがとうございます!!(^o^)/

86 ■はじめまして!

facebookはじめたばかりで、いいねボタン設置したく、検索したら辿り着きました。
ありがとうございます(*^_^*)

しかし、プラグインの順番変えても出てきませんでした(*_*)

デザインはCSSの編集用です。

仕様変わったからダメなのかしら・・・。残念です。

85 ■ありがとうございます!

はじめまして。こちらの記事の通りにやってみたら、ばっちり設置されてました!!ありがとうございます(´∀`)

84 ■Re:ボタンが表示されていない方へ

「【カスタム可能】ベーシック」でも「記事URL」表示されないんですよ。エコのスタイルにしたら表示されて、やっといいねボタンを付けることができました(やれやれ、わけがわかりません)>ふうたさん

83 ■感謝!

簡単にできました。
さすがプロですね。

82 ■ピンポイントでアドバイスをいただけました

ブログにイイねボタンを設置したく探していたら、記事を発見しました。とても分かりやすかったです。ありがとうございます!!

81 ■アメブロの仕様が変わったのでしょうか

カスタムベーシックでも「記事URL」というのが表示されず、いいねボタンを設置できませんでした
これはアメブロの仕様が途中から変わってしまったのかなと思いました・・・

80 ■無題

検索で記事を読ませて頂きました。
コピーしたのですが・・・反映されず・・・。
ブログ記事タイトルの下に設置したいのですが・・。
いま使っているフリープラグインはi2iランキングだけなので文字数は大丈夫っぽいんですけど・・。

79 ■無事に設置できました

動作も問題ないようです。
分かりやすい解説、大変参考になりました。
ありがとうございました。

78 ■ボタンが表示されていない方へ

記事の下にある「コメント」、「ペタ」と同じ所に「記事URL」が表示されているか確認ください

適用しているデザインによって「記事URL」が表示されないものがあります

「【カスタム可能】ベーシック」だと表示されます
(他は未確認です)

77 ■無題

(ノ◇≦。)できませんでした

76 ■はじめまして

facbookにいいね!ボタンを設置する
で検索して美樹さんのこの記事にたどり着きました。

ずっとやりたかったことなんで、出来上がってすごくうれしいです。
ありがとうございました

75 ■ありがとうございました♪

友人に教えて頂いて訪問いたしました。
わたしも早速挿入しました!
これずっとつけたかったんです♪
分かりやすくて簡単でよかったです
本当にありがとうございました!

74 ■質問です(T-T

こんにちは。
美樹さんのブログを拝見してこれは!!と思い、早速試してみましたが、上記タグをアメブロのフリープラグインに張り付けて保存しても、いいねボタンが表示されません。何がいけないのでしょうか。記事URLという文字を、何かに変えないといけないのですか?

73 ■初めまして。

美樹さん、ありがとうございました。
私も出来ました。助かりました。一番解りやすかったです。
難しいこと、解りやすく伝えれる人、尊敬します。感謝です。

72 ■追記

できました!ありがとうございました!!

71 ■できました!

ブログデザインを変えたら出来ました!!
ありがとうございました~

というわけで、いいね!ポチします~

70 ■ありがとうございます

すごい!5秒(操作自体)で出来ました。
ありがとうございます。

69 ■ありがとうございました!

いいね!ボタン設置できました。ありがとうございます。

68 ■はじめまして

いいねの設置が上手く出来ません。
アドバイス、手ほどきがありましたらお願いします~
フリープラグインは全部削除した状態から試しているのですが・・・

67 ■無題

ありがとうございました。
いいねボタン設置できました

66 ■いまさらですが・・

やってみました!ありがとうございます。めちゃ助かりました!

65 ■ごめんなさい

美樹さんのscriptをコピーしてフリープラグインへペーストしましたが、うまく表示されませんでした。デザインもカスタム可能のベーシックにしたのですが・・・何か、ほかに試せそうなことがあれば、教えてください。すいません

64 ■ありがとうございます

今日は、朝から「いいね」設置作戦!!
やっとこちらにたどり着き、設置大成功です。
ありがとう!!('-^*)/

63 ■何度やっても

記事の下にはいいねボタンが反映されません。
サイドバーに出すことはできるのですが

やっぱり、ブログのスキンのせいでしょうか?

62 ■はじめまして!!

早速使わせて頂きました♪ありがとうございます!(≧ー≦)

すいません質問なんですが、フリープラグインでLinkWithinと言うものを入れています。
コピペしていいねボタンを表示させるタグを移動させても、SNS系のボタンといいねボタンをまとめて表示できません。

どうしたらよいでしょうか?
教えて頂けたら幸いです。

61 ■>澤田さん

澤田さん、コメントありがとうございます。
おっしゃるとおり、FBのニュースフィードに表示されませんね(^^;
しかも1つ目の記事だけで、2つ目以降の記事はOKです。
確かにiframeと関係あると思います。
ちょっと時間見つけて探ってみますね。
ご指摘ありがとうございました。

60 ■うまくいきません

情報ありがとうございます。

早速試してみたのですが、表示は
きちんとされますが「いいね」を押下しても
FBのニュースフィードの方へ反映されません。
このページの「いいね」ボタンも同じ動きのように
思います。iframe版だとうまく動かなくなってしまったのでしょうか。

59 ■ありがとうございます

すごく簡単に設置することができました。

58 ■ありがとうございました♪

早速設置してみました♪

57 ■無題

ボタンを設置してみたくて検索してたらたどり着きました!!
僕もメッセージボードの下に出てしまいましたが、メッセージボードなくしたらうまく表示されるようになりました( ´ ▽ ` )

良いモノをありがとうございます。

56 ■使わせていただきました!

通りすがりですが、すっかり助かりました!
ボタンも押します!

55 ■うまくできました。

ブログに「いいね!」ボタンを付けたくて四苦八苦していたところに、こちらのサイトに辿りつき、無事ボタンを付けることが出来ました。
とても分かりやすくて、簡単に設置できました。
ありがとうございます。^^

54 ■はじめまして、篠原と申します。

すごく勉強になりました(ノ´▽`)ノ

早速使用してみます♪

53 ■うまくいきました。

只今アップできました。
時間が解決してくれるようです・・・・

綺麗な仕上がりに大満足!
これからもお知恵拝借いたします。
ありがとうございました。

52 ■はじめまして

やっとのことで此方にたどり着きました。
レイアウト=ベーシック
サイドバー全て排除
色々やっているのですが・・・・

一番センスのあるタグだけにあきらめきれません。トホホ・・・

手ほどきよろしくお願いいたします。

51 ■ありがとうございました。

はじめまして。
この記事を参考にさせていただきました。
感謝です。

50 ■ありがとうございました

ソースを使用させていただきました。大変助かりました。

49 ■Re>美樹さん

アドバイスありがとうございます
他のプラグインを消してやってみたのですが、ダメでした。。。なぜでしょう?!
明日以降またやってみます。できたら報告させていただきます。

コメント投稿

AD

Amebaおすすめキーワード

Ameba人気のブログ

Amebaトピックス

ランキング

  • 総合
  • 新登場
  • 急上昇
  • トレンド

ブログをはじめる

たくさんの芸能人・有名人が
書いているAmebaブログを
無料で簡単にはじめることができます。

公式トップブロガーへ応募

多くの方にご紹介したいブログを
執筆する方を「公式トップブロガー」
として認定しております。

芸能人・有名人ブログを開設

Amebaブログでは、芸能人・有名人ブログを
ご希望される著名人の方/事務所様を
随時募集しております。