Traffic optimization

タカハシシステム(旧技術関係ブログ) : Web開発

カテゴリー ‘Web開発’

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

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

なんとかしたい

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

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

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

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です。

でも問題がある

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

このブログにアクセスすると右側に「Follow me」バッヂが表示されるのですが、スマートフォンでアクセスしたとき少し邪魔だなと気になっていました。

ということで、こちらの記事「Web サイトのスマートフォン最適化: UA 判別篇」を参考に function.php に関数を用意して判定することにしました。とても参考になりました!

参考記事でも触れられてますがUA判別のために文字列でリストを作るのは、なんだかスマートじゃないですよね。やはりメディアクエリで振り分けたほうがいいのか…。

今まで他のブックマークサービスのボタンを付けていたのですが、そろそろ見直しするかということで、はてなブックマーク、twitter、facebookのボタンを設置してみました。

以下、ざっくりとした設置方法です。コードを取得してWordpressのテーマに貼り付けてるだけです。

はてなブックマークのボタン設置

以下サイトで設定
http://b.hatena.ne.jp/guide/bbutton

コード例

個別記事に設置するので <?php the_permalink(); ?> で指定。

twitterのボタン設置

以下サイトで設定
http://twitter.com/goodies/tweetbutton

コード例

これは個別記事のURLを持ってきてくれるので指定なし。「data-via」に入れたアカウント宛のメンションとなります。

facebookのボタン設置

以下サイトで設定
http://developers.facebook.com/docs/reference/plugins/like/

コード例

こちらも、個別記事に設置するので <?php the_permalink(); ?> 。

Amazonのインスタントストアを作ってみました。Amazonアソシエイトに参加している人は管理画面から簡単に作ることができます。

DTM専門店 – DTM機材を集めてみました

ここから商品が売れて「お小遣いゲットだぜ!」と思ってたのですが、ストアを作ってるうちに本人が欲しくなってしまうパターンになりそう…。

ワイヤーフレームを作るのが好きなんです。真っ白なノートに「こんな機能も付けたいな」「こんなコンテンツも面白いだろうな」と自由に考えを巡らす作業(自分が運営するサイトであればなおさら)。空想と現実がせめぎ合います。

基本的には手書き派なんですが、ワイヤーフレーム作りをバックアップするアプリやサイトは沢山あります。それをまとめてくださってる記事の紹介です。

ウェブの画面設計に使えるまとめ
http://www.designwalker.com/2008/05/wireframe.html
ダウンロードして使える素材が多めです。「SimpleWireFrame」という素材が好みかな。

ワイヤーフレーム / モックアップを作成するためのフリーアプリ10
http://blog.creamu.com/mt/2010/01/_10.html
Web上で利用できるサービスが中心です。「Pencil Project」というFirefoxアドオンは時々使いますね。

ウェブサイトの設計図 ワイヤーフレームを活用しよう
http://www.designwalker.com/2009/04/wireframe-2.html
I ♥ wireframes はtumblrで色んなワイヤーフレームを
公開してるのでフォロー必須。ワクワクします。