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

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

なんとかしたい

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

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

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

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 = "0"; }
$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’] > 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;

}
[/php]

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

でも問題がある

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

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

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

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

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

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

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

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

コード例
<a href=”http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>”data-hatena-bookmark-title=”技術関係ブログ”data-hatena-bookmark-layout=”standard” title=”このエントリーをはてなブックマークに追加”><img src=”http://b.st-hatena.com/images/entry-button/button-only.gif” alt=”このエントリーをはてなブックマークに追加” width=”20″ height=”20″style=”border: none;” /></a><script type=”text/javascript” src=”http://b.st-hatena.com/js/bookmark_button.js” charset=”utf-8″ async=”async”></script>

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

twitterのボタン設置

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

コード例
<a href=”<a rel="nofollow noopener" href="http://www.google.com/url?sa=D&q=http://twitter.com/share" target="_blank">http://twitter.com/share</a>” data-count=”horizontal” data-via=”mitakasound” data-lang=”ja”>Tweet</a><script type=”text/javascript” src=”<a rel="nofollow" href="http://www.google.com/url?sa=D&q=http://platform.twitter.com/"target="_blank">http://platform.twitter.com/</a><br /> widgets.js”></script>

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

facebookのボタン設置

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

コード例
<br /> <iframe src=”<a rel="nofollow noopener" href="http://www.google.com/url?sa=D&q=http://www.facebook.com/plugins/like.php%3Fhref%3D" target="_blank">http://www.facebook.com/plugins/like.php?href=</a><?php<br /> the_permalink(); ?</p> <div id="qhide_37958">>&amp;layout=button_count&amp;show_faces=true&amp;width=80&amp;action=like&amp;colorscheme=light&amp;height=21″ scrolling=”no” frameborder=”0″ style=”border:none; overflow:hidden;</div> <p>width:80px; height:21px;” allowTransparency=”true”></iframe><br />

こちらも、個別記事に設置するので <?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で色んなワイヤーフレームを
公開してるのでフォロー必須。ワクワクします。

WordPressを最新版の2.9.1にアップデートしようとしたら、2.9以降はMySQL4.1.2以上が必要になるんですね…。

WordPress 2.9 日本語版リリースのお知らせ
http://ja.wordpress.org/2009/12/19/wordpress-29-ja/

このブログは「さくらインターネット」のサーバを借りているので、MySQLは4.0です。5.1に上げることもできるみたいだけど、仕事だったらともかくデータの移行は面倒でしょうがない。

それでもセキュリティのこととか考えたら上げざるを得ないんでしょうね。仕方ないな…。

さくらインターネット
http://support.sakura.ad.jp/page/news/20090303-004.news

MySQLを4から5へ（参考になります）
http://kita2.net/nisshi/2009/03/140611

twitterの「Follow me」バッジをサイドに表示してみました。

設置方法はWebサービスからタグを書き出す方法と、Wordpressのプラグインで対応する方法があります。今回は前者を選びました。（デザインが好みだったので）

今っぽい感じになりますね。

Webサービスを利用して設置
http://www.go2web20.net/twitterFollowBadge/

WordPressのプラグインを利用して設置
http://wordpress.org/extend/plugins/wp-followme/

wordpressを最新版2.8.4に上げてみました。そしてiPhoneのクライアントアプリを使って投稿してます。これで少しはブログを書くペースが上がればいいんだけど。

ということで、写真を撮って添付してみるテスト。お、うまくいった。これは便利だ。

PDFをブログ上でうまく表示することが出来ないかと思い探していると「lightwindow」というスクリプトを発見しました。

http://www.stickmanlabs.com/lightwindow/

このブログでも使っている「lightbox」のライバル的なスクリプト。「lightbox」は画像のみですが、「lightwindow」はPDFやWebページ、Youtubeまでを貼り付けることが可能です。実際に試してみました。

http://takahashisystem.com/demo/lightwindow/sample.html

設置方法は簡単で、所定のファイルを設置して、ヘッダにcssとjsを指定するだけ。あとは上記サイトのサンプルにあるように、表示したいメディアごとに記述すればOKです。
Youtubeこんな感じ。

<a href=”http://www.youtube.com/v/g93MMg_At6c” _fcksavedurl=”http://www.youtube.com/v/g93MMg_At6c” class=”lightwindow page-options” params=”lightwindow_width=425,lightwindow_height=340,lightwindow_loading_animation=false” title=”youtube表示” >youtube表示</a>

毎日楽しみに拝見している「ホームページを作る人のネタ帳」さんから「あなたのwebプロジェクトに根本的に足りない3つの事」という興味深い記事をご紹介。

柱を決める・ターゲットを絞るという当たり前のことなのですが、大きなプロジェクトであっても見失ってしまうことがあります。その根源には「信念があるのか？」という問題がありそうです。

信念 – wikipedia
http://ja.wikipedia.org/wiki/%E4%BF%A1%E5%BF%B5

ある個人がある命題ないしは前提が真であると考えている心理状態あるいは思考状態のことである。

ということらしいです。webプロジェクトだけに限らず、何事においても大事なことですね。ヒットするものの裏には何かしらの「信念」があるものです。柱がなくては折れてしまいますから。信念があれば理由は後付けでもよかったり。このブログには信念があるのでしょうか？

以前からやってみたいなと思ってたタブ表示を勢いで実装してみました。

参考サイト（感謝！）
http://a-h.parfe.jp/einfach/archives/2006/1012175043.html

設置して数行記述すれば簡単に使えます。情報量が多いときなど、ブログの記事内でうまく利用できたら面白いですね。

今日は、いつもお世話になっているブログ「MOONGIFT」さんの記事から、軽快に画像を拡大できる、javascript「Magic Zoom™」をご紹介します。

商用利用のフルバージョンは￡25～ですので、商品のデーティールを見せたい場合など使ってみても面白いかもしれません。

[関連リンク]

Magic Zoom™

MOONGIFT: » JavaScriptで画像をズーム「Magic Zoom」:オープンソースを毎日紹介