Parkソーシャルメディア・Web関連のマーケティング・技術情報と、スノーボード・旅行など休日の遊びを記録したブログ。]ウェブサイトにFacebookのいいね!ボタンやTwitterのツイートボタンを設置することって多いと思います。以前も記事にしましたが正しく設定されていないケースが非常に多いです。これ、原因の一つがコピペだと思うんですよね。過去に作ったWebページのソーシャルボタンの記述をそのまま持ってきてるような。作成マニュアル的なものを頑張って作成して、ずっとそれを参照してる、とか。いずれもやめたほうがいいです。仕様も変わるし、公式にコードを発行してくれるページがあるんだから、そちらを使いましょう。いうことで、Facebookのいいね!ボタンとTwitterのツイートボタン、それぞれ細かい仕様をまとめてみたいと思います。この記事は、Facebookのいいね!ボタン編です。Twitterのツイートボタン編はこちら。Facebook開発者Facebookのいいね!ボタンは↑のページから発行できます。基本的なボタンのデザインは、発行画面で各項目に設定していけば、プレビューで確認しながら作れます。コードはHTML5かXFBMLが推奨されており、JSのスクリプトを埋め込むことができない場合はiframeでの実装になっています。send="false"></fb:like>data-widthや、layoutなど、ボタンのデザインなどを変えるオプションの設定は、ボタンのタグの中で指定されています。allowTransparency="true"></iframe>widthや、layoutなど、ボタンのデザインなどを変えるオプションの設定は、iframeで読み込まれるURLの後ろにパラメーターとして付与する形で指定されています。Like(H5・XB:data-href|IF:href)いいね!させたいURL(=いいね!ボタンを設置するページのURL。)ページのURLを可変にしたい場合(動的に生成したい場合)は、適当に仮のページURLを入力しておいて、あとからコード内で差し替えればOK。Width(H5・XB:data-width|IF:width)いいねボタンの幅のサイズの指定です。ここのサイズ、最小値以下で指定しても無視されます。意図したサイズにならないことが多いので、厳密にサイズ調整したい場合はCSSでやりましょう。Styleをどれにするかで決まります。Style(H5・XB:data-layout|IF:layout)Standard、button_count、box_count、の3タイプから選べます。各デザインそれぞれでデフォルトサイズが決まっているのですが・・・。pixels.↑公式にはこう書いてあるわけです。調べりゃわかると思いますがこのサイズだと小さすぎます。いうか、これよりも大きいサイズで表示されています。いうと、公式のドキュメントは英語表記のいいね!ボタンをベースに書かれてるんですね。「いいね」じゃなくて「Like」。「いいね」の方が大きいわけです。↑つまりこういう感じ。