« JIO(ジャッジ・インターン・オンライン)の試行 | トップページ | 紹介:『Project of Debate Lovers』でのオンラインディベート »

2012.04.09

ココログにFacebookの「いいね!」ボタンをつける

 何とかなりました!ご覧の通りですshine

 まずは【 こちら(1)(ココログで twitter のツイートボタン、facebook のいいね!ボタン、Google+ の+1ボタンを追加する方法: あるSEのつぶやき) 】のサイトをご覧下さい。

 【こちら(1)】を見ると、途中で「上級テンプレート」という言葉が出てきます!
 それは、ココログフリー、ココログプラスでは、できません。ココログプロに変更する必要があります。私も、今日、しましたdespair

 ここで【こちら(1)】には「twitter のツイートボタン追加」という説明があるのですが、「僕はツイートボタンはいらないなぁ」と思ってこの作業を飛ばずと失敗しますweep「ブログにいいね!ボタンを設置」の「適用中の上級テンプレート名 >> テンプレートの編集」のところで、目指す「<MTWeblogIfExposePostFooterLinks>」が表示されません。設置のためには、 「twitter のツイートボタン追加」の作業を飛ばさずに、説明通りにしてください。(経験者 談)

 次に【こちら(1)】では、「いいね!」ボタンのプラグインコードを取得するために【 こちら(2)(Like Button - Facebook開発者) 】を開きます。説明は【こちら(1)】の通り・・・ではなく、「Layout Style」を[button_count]にしたほうが、いいね!のカウントが出来ていいと思います。また、レイアウトも崩れません!(後述の追記)
 
URLの部分を変更するのは指示通りです。

 そして先程の【こちら(1)】「ブログにいいね!ボタンを設置」の説明の通り、「以下の赤字部分の次の行にいいね!ボタンのプラグインコードを追加して保存」すると、確かに「いいね!」ボタンが出た・・・のですが、変な位置に表示されるのですwobbly

 それを改良するまでに、4時間も悩みましたshock

 最終的に、【こちら(2)】で取得したプラグインコードをもう一ヶ所直す必要があったです。

--- ↓ 以下、テンプレートで変更した箇所 ↓ ---
<MTWeblogIfExposePostFooterLinks>
<br />
<br />
<$MTEntryPostFooterLinks$>
<iframe src="//www.facebook.com/plugins/like.php?href=<$MTEntryPermalink$>&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
</MTWeblogIfExposePostFooterLinks>
</p>

--- ↑  ---   ここまで   ---  ↑ ---

 この「height:21px」が、【こちら(2)】を、【こちら(1)】の写真のままの設定で取得したプラグインコードのままではheight:80px」になっているので、レイアウトが崩れます。

(追記1
 なぜ【こちら(1)】の方のプラグインが80pxではなく21pxになっていたかというと、実際にはボタンの種類をbutton_count]に変更していたからだと推測されます。
 
【こちら(2)】にある英語の説明書きを訳して読んでなかったために、自分で自分の首を締めていた形ですweep
 

 以上、こちら(1)】と上記のちょっとした変更で、ココログの皆さんも「いいね!」ボタンを設置できれば幸いです。

 ・・・と思っているのですが、もしかしたら、今回の説明ではうまく解消しないケースがあります

 実は、私も作業中、「レイアウトが崩れるのは3行のテンプレートだからかなぁ?」と、『新規テンプレートの作成』で新しい2行のテンプレートを作成し、上級テンプレートへの変換作業をしたところ、作られるテンプレートの形式がそもそも違っていて、そこには「<MTWeblogIfExposePostFooterLinks>」がありませんcrying

 ということで私は、新しいテンプレートを諦め、元のテンプレートの手直しに再チャレンジしたので、4時間もかかってしまいましたbearing

 次に、</MTWeblogIfExposePostFooterLinks></p>ですが、こちら(1)】では
</MTWeblogIfExposePostFooterLinks>と</p>が入れ替わっています。これは、HTMLの文法の、いわゆる“入れ子構造”にならないので、直しました。今、ちゃんと動いているので、これで問題はないと思います。

 最後に<br />ですが、これも【こちら(1)】にはありません。<br />は改行を意味しますので、レイアウトが崩れた問題に取り組んでいる私は、そこが問題かと何度か試行しました。
 途中で参考にしたのが、【 こちら(3)(【ブログ】ココログプロで「はてブ」できるようにしてみた: なおさん亭::別館 】です。【こちら(3)】には、<br />がありますね。ということで、<br />は元からあるもので、レイアウトの崩れには関係ないと悟りました。

(追記2)
 現在では、<br />を2つにしました。
 <br />は単純な改行なので、2つ記載することによって、コメント等のリンクと少し隙間ができて見やすい
、と判断したからです。
 

 最終的にはheight:21px」でレイアウトの崩れが直ったので、更新日時等の元々のフッターの後で改行して、「twitter のツイートボタン」と「いいね!」ボタンを並べて表示させることで落ち着きましたshine

 この記事を見て「いいね!」ボタンを付けることができた方は、折角ですので、この記事の「いいね!」ボタンを押して頂ければ幸いですhappy01

|

« JIO(ジャッジ・インターン・オンライン)の試行 | トップページ | 紹介:『Project of Debate Lovers』でのオンラインディベート »

コメント


 はじめまして(^^)/

 フェイスブックのいいねボタンを付けたいなぁと
 思いながら ググって こちらまで辿り着きました

 で 


send=falselayout=button_countwidth=100show_faces=falseaction=likecolorscheme=lightfontheight=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true">


 というタグ?を埋め込んでみたんですけど
 結果 いいねボタンの隣りに55万っていう
 吹き出しが着いてしまいますが
 どうしてなのか? サッパリ訳がわからずweep

 NAKO-Pさんには理解の範疇ですか?
 

投稿: きゃらうぇい | 2012.08.31 19:12

きゃらうぇいさん

 ようこそいらっしゃいましたhappy01
 ところで、「send=false~」の前は、<$MTEntryPermalink$>になっていますか?

# <$ >は1バイト文字(半角)です。コメントでは、消える(=表示されない)のですね(^^;

 Facebookのアカウントが複数お持ちなど、ありますか?
 ですが、私の試行錯誤の段階では、55万カウントと表記されたことはなかったです。

 あまりお役に立てなくてごめんなさいm(__)m

 望ましい標記に戻るよう、お祈りします!

投稿: NAKO-P | 2012.09.01 06:57

はじめまして。突然にご連絡して失礼致します。
Facebook の「いいね!」ボタンをTwitterと同じ位置に設置したいのですが、
NAKO-Pさんが設置された時とは、提供されるタグも違えば、
NAKO-Pさんが示されている記述ページもさっぱり、チンプンカンプンで(!?)、
仕方なく、本文の末尾に一応は置いたのですが、
本当はフッターのTwitterの隣りに設置したいと思っています。

NAKO-Pさんの設置方法をもう一度、具体的に教えて頂けないでしょうか?
お手数をお明け致しますが、宜しくお願い申し上げます。

投稿: ナーコ | 2013.06.15 22:28

>ナーコさん

 具体的な設置方法は、【こちら(1)】として紹介した、
http://fnya.cocolog-nifty.com/blog/2011/11/twitter-faceboo.html
になります。

 コメントに有りました「提供されるタグも違えば」というのが気になります。
 私も、「新しい2行のテンプレートを作成し、上級テンプレートへの変換作業をしたところ、作られるテンプレートの形式がそもそも違っていて、そこには「」がありません」と書いた通り、ココログの新しい提供方式では、私の方法が使えないかもしれません(^^)

 ナーコさんのBlogを見せて頂きましたが、ツイッターボタンがありませんでしたよね。私も新しいテンプレートの記述を見て、Facebookボタンの設置ができるよう画策したのですが、時間の関係上諦めた経緯がございますweep

 どなたか、新しい方法が開発されるといいのですが…
 やはり、@nifty側にFacebookボタンの対応を申し入れるのも手なのかもしれません。

 お役に立てなさそうで、申し訳ありませんm(__)m

投稿: NAKO-P | 2013.06.16 08:44

NAKO-P さま

早速のご回答、ありがとうございます。
返信が早くて素晴らしいです~ shine
感謝申し上げます confident

ところで、私の聞き方が曖昧すぎたみたいです!?。
次の3点を具体的に教えて頂けますでしょうか。

1.こちら(1)に画像として表示されているiframeのタグは
Facebook開発者のページで生成されますか?
← このタグが異なっており、今はiframeがなくなっているのですが、
このタグは、こちら(1)に記述されているタグを使用すればいいのでしょうか?
NAKO-Pさんもこのタグを)使っていらっしゃいますか?

2.「Layout Style」を[button_count]に…
この訂正箇所は、こちら(1)に記されているタグのどの部分ですか?。
「Layout Style」の文字を私が見つけ切れていないので!?

3.NAKO-Pさんの「↓ 以下、テンプレートで変更した箇所 ↓」
はどのページに貼り付けているのでしょうか?
ココログフリーには上級者ページの「Indivisual Archives」がないようなので!?

この3点がわかれば、何とかなりそうなので(!?)
再び、質問させて頂きました。
お手数ですが、ご教示下さい。

うるさいことばかり申し上げて申し訳ありません。
宜しくお願い申し上げます。

投稿: ナーコ | 2013.06.17 00:49

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/77422/54426498

この記事へのトラックバック一覧です: ココログにFacebookの「いいね!」ボタンをつける:

« JIO(ジャッジ・インターン・オンライン)の試行 | トップページ | 紹介:『Project of Debate Lovers』でのオンラインディベート »