「いいね」ボタンと「ツイートする」ボタンの位置がズレる。

　Facebook というやつは、基本的な設定は非常に簡単なのだけれど、ちょっと込み入った事をやろうとすると途端に初心者の手には負えなくなりますな。アカウントを作成して、Facebook ページを作成するところまではサクッと行ったのですが、そこから先が…。連休中に余裕でやっつけられるだろう、と考えていたら、結局それは甘い見積もりだったのです。

　開発者登録とかアプリ作成だとか OGP だとか、もうどないせぇっちゅうねん。訳が分からない。

　…とそんな状況の中、お世話になった記事たちをリストアップ。
  • iFrame版 Facebookページ作成方法：ホームページ作成のハレハメイド
    Facebookの最新の仕様に対応した解説ページ。デベロッパー登録だとかアプリの作成方法だとか、これくらい丁寧に説明してもらえると、非常に有り難いのです。
  • Wordpressに『いいね』ボタンを設置：HTML5でサイトをつくろう
    「Open Graph Protocol を設定する」って一体どういうことやねん…とか、ブログの記事ごとに「いいね」ボタンを設置するにはどうすれば良いのさ…という疑問を一気に解決してくれました。Wordpress だけではなく Movable Type 向けのサンプルも載っています。
  • サイトに設置した「いいね!」の押され具合をデータで解析する方法：Web担当者Forum
    「いいね」ボタンを設置したのは良いけれど、その効果を確かめるには結局どうすればいいのさ…ということを解説してくれます。

　いやいや、Web って便利だなぁ。これらの記事が無かったら、もう完全にお手上げでした。

　で、めでたくこのブログにも、記事本文下に「いいね」ボタンを設置する、という運びになったのですが、何も考えずに iFrame版の「いいね」のコードを貼り付けると、以前から設置していた「ツイートする」ボタンとベースラインが合わない。１ピクセル分だけ「いいね」ボタンが上にズレていて気持ちが悪い。

　もう面倒なので、「いいね」ボタンのコードに直接 margin-bottom: -1px; というスタイルを指定してしまうのだ。つまり下記のような HTML にしてしまえばズレなくなります。

　さて、もう寝る。　
<iframe src="//www.facebook.com/plugins/like.php?サイトURLやらその他のパラメータやら" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;margin-bottom:-1px;" allowTransparency="true"></iframe>

カテゴリ:

タグ: