ソーシャルボタンの余白を取り除く

公開日：2012年3月8日 / 最終更新日：2023年05月06日

ブログなどにソーシャルボタンを配置すると、右側の余白が気になることありませんか？こんな感じで。

結構有名な会社とかメディアでもズレたままになってたりします。

なんとかしたい

なんとか揃えたいなーと思って考えてみました。

ボタンのカウントを取得できれば、その桁数に応じて幅を調整してやれば（環境によって異なるので厳密にはアレですが）ざっくり大丈夫かなと。

とはいえ … 細かいところはサンデープログラマなのでご容赦ください。

TwitterやFacebookボタンのカウントを取得する

こちらの記事「ソーシャルボタン系のカウント数をPHPで取得して表示する」を参考に（ありがとうございます！）カウントを取得してみます。

[php]
/*
* Get Social Button Count
* facebook twitter hatena
*/
function get_social_counts($url){
$counts = array();

//encode url
$encode_url = urlencode($url);

//facebook likecount
$likecount = file_get_contents(‘http://graph.facebook.com/’ . $encode_url, true);
$decode_likecount = json_decode($likecount, true);
$facebook_likecount = ($decode_likecount[shares])? $decode_likecount[shares] : 0;

//twitter tweetcount
$tweetcount = file_get_contents(‘http://urls.api.twitter.com/1/urls/count.json?url=’ . $encode_url, true);
$decode_tweetcount = json_decode($tweetcount, true);
$twitter_tweetcount = $decode_tweetcount[‘count’];

//hatena bookmarkcount
$bookmarkcount = file_get_contents(‘http://api.b.st-hatena.com/entry.count?url=’ . $encode_url, true);
if(empty($bookmarkcount)){ $bookmarkcount = &quot;0&quot;; }
$hatena_bookmarkcount = $bookmarkcount;

//set array
$count[‘facebook’] = $facebook_likecount;
$count[‘twitter’] = $twitter_tweetcount;
$count[‘hatena’] = $hatena_bookmarkcount;

return $count;
}
[/php]

引用：ソーシャルボタン系のカウント数をPHPで取得して表示する

カウントに応じて幅を決める

で取得したカウントを元に幅を決めていきます。

Facebookボタンが「0桁 = 70px、1桁 = 100px、 10桁 = 100px、 1,000桁 = 105px」ぐらい。

Twitterボタンが「0桁 = 88px、1桁 = 93px、 10桁 = 98px、 1,000桁 = 108px」ぐらいなので、ざっくりと設定。

[php]
function get_social_width($count){

$width = array();

if ($count[‘facebook’] == 0) {
$facebook_width = 70;
} elseif ($count[‘facebook’] &gt; 0) {
$facebook_width = 100;
} elseif ($count[‘facebook’] &gt; 99) {
$facebook_width = 100;
} elseif ($count[‘facebook’] &gt; 999) {
$facebook_width = 115;
}

if ($count[‘twitter’] == 0) {
$twitter_width = 88;
} elseif ($count[‘twitter’] &gt; 0) {
$twitter_width = 93;
} elseif ($count[‘twitter’] &gt; 99) {
$twitter_width = 98;
} elseif ($count[‘twitter’] &gt; 999) {
$twitter_width = 108;
}

//set array
$width[‘facebook’] = $facebook_width;
$width[‘twitter’] = $twitter_width;

return $width;

}
[/php]

これらの幅を各ボタンに指定してやればOKです。