［FB・Twitter・CSS覚書］ツイートボタンといいねボタンのタグ発行からきれいに並べて貼るまでの手順

2013年4月18日2013年11月29日

Facebookいいね！ボタンのタグ取得

このページから取得、FBにログインしてると自動的にアプリIDも記述されてしまうので、そういうのを入れたくない場合は、~~ログインせずに取得するのがよいようです。~~

20131129
ログインしてないと、取得できなくなってました。
アプリIDを入れたくない場合は、途中に入ってる以下の記述をとっちゃう。

&appId=XXXXXXXXXXXXXXX

アプリIDを使ってない人には表示されてないと思うので、問題ないと思うのだが。

Like Button – Facebook開発者

XFBMLの場合

iframeだとスタイル付がうまくいかなかったので、とりあえずこれで(；´Д｀)

※Send Buttonのチェックの取り外しをした後、一度画面上をクリックしないと右側に反映されないようです。

send（送信）ボタンなし

<fb:like href="http://xxxxxx.com/" send="false" layout="button_count" width="50" show_faces="false"></fb:like>

send（送信）ボタンあり

<fb:like href="http://xxxxxx.com/" send="true" layout="button_count" width="50" show_faces="false"></fb:like>

ボタン以外に必要な記述
bodyタグのすぐ後に追加

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

htmlタグ内に以下を追加
旧バージョンのInternet ExplorerでXFBMLを動作させるために必要だそうです。

<html xmlns:fb="http://ogp.me/ns/fb#">

Twitterツイートボタンのタグ取得

Twitter / Twitterボタン

数なしの場合
data-count=”none”というセレクタが入るだけみたいです。
ツイート

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

数ありの場合

<a href="https://twitter.com/share" class="twitter-share-button" data-lang="ja">ツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

きれいに並べるためのスタイル

さて、上記で発行されたタグをそのまま貼り付けるとこんな感じ。
これをキレイに並べるためにCSSで調整します。

「sns」というdivで囲んで、ツイートボタン数ありの場合のスタイルです。
数なしだと多少崩れます。

div#sns {
	display:block;
	position:absolute;
	width:300px;
	height:20px;
	top:155px;
	line-height:0;
}

.twitter-share-button {
	position:relative;
	top:6px;
	left:30px;
}

上記を設定するとこんな感じ＼(^o^)／

20130418追記
急にツイッターボタンの6pxズレがなくなりました。つか、逆に下に6pxズレたので設定削除しました。
あとWordpress内でカテゴリページだけ、Facebookの数部分が半分欠けるという謎の現象が・・・。
div#snsをwidthを長くすることで回避はできました。