Traffic optimization

タカハシシステム(旧技術関係ブログ) : ソーシャルボタンの余白を取り除く

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


2012年3月8日 
このエントリーをはてなブックマークに追加

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

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

なんとかしたい

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

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

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

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

こちらの記事「ソーシャルボタン系のカウント数を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 = "0"; }
    $hatena_bookmarkcount = $bookmarkcount;

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

    return $count;
}

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

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

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

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

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

function get_social_width($count){

	$width = array();

	if ($count['facebook'] == 0) {
		$facebook_width = 70;
	} elseif ($count['facebook'] > 0) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 99) {
		$facebook_width = 100;
	} elseif ($count['facebook'] > 999) {
		$facebook_width = 115;
	}

	if ($count['twitter'] == 0) {
		$twitter_width = 88;
	} elseif ($count['twitter'] > 0) {
		$twitter_width = 93;
	} elseif ($count['twitter'] > 99) {
		$twitter_width = 98;
	} elseif ($count['twitter'] > 999) {
		$twitter_width = 108;
	}

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

    return $width;

}

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

でも問題がある

これだとブラウザの更新ボタン押さないと反映されないんですよね。課題が残りました。

同じカテゴリーの記事

twitterやってます。フォローいただけたら嬉しいです!