nlog(n): Delicious の縦型ソーシャルボタンを自力で作る

Thu November 28, 2013

Delicious の縦型ソーシャルボタンを自力で作る

Delicious がソーシャルボタンのバリエーションを作ってくれないので，自力で縦型のボタンを作った。需要はあまりなさそうだけど。

■ ■ ■

はじめに

かつては人気ソーシャルブックマークだった Delicious だが，最近は勢いがない感じがする。多くのサービスがソーシャルボタンをサイトに貼り付けて欲しくて公開している中で，Delicious もソーシャルボタンはあるのに，バリエーションが極端に少ない (Tools – Delicious)。そこで CSS と Javascript を使って独自に作ることにした。XHTML 環境で Valid に設置する (コードはきれいとは言えないが ^^;)。他のソーシャルボタンは設置済み (nlog(n): XHTML にソーシャルボタンを Valid に設置する)。

仕様

↑
作成するボタン (画像です。クリックできません)。

仕様としては次のようにすることにした。

縦型にする (サービスによって tall, vertical 等の表現がある)
バルーンの中にブックマーク数を表示する
バルーン内の数字をクリックすると，Delicious に飛んで，ブックマークしているユーザを表示する
下のボタンをクリックすると，自分の Delicious ブックマークに追加するためのウィンドウを表示する

コード

ボタン表示部分

ボタンを表示するための HTML のコードは以下の通り。

<div class="social_button">
<div class="s_balloon">
<a href="#" id="delicious">&zwnj;</a>
</div>
<div class="s_button">
<a href="#" onclick="window.open('https://delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="https://delicious.com/img/logo.png" height="16" width="16" alt="Delicious" /> delicious</a>
</div>
</div>

バルーンは s_balloon，下のボタンは s_button，バルーンとボタンを包むのに social_button という CSS クラスを使っている。クラスの実装は後述する。

注意点としては，Delicious のロゴである。https://delicious.com/img/logo.png は，何と 1000x1000 の PNG 画像である。これを縮小して 16x16 で表示させているので非常に効率が悪い。実際に設置するときは，16x16 に縮小した PNG か GIF を自分のサイトに置いて，これにリンクした方がよい (当サイトもそうしている → delicious.gif)。

CSS

CSS は以下のとおり。冗長かも知れない。CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる | アイデアハッカーを参考にした。感謝感激。cssarrowpleaseを使ってもできそう。

.social_button {
   width: 65px;
}
.social_button a {
   text-decoration: none;
   color: #333333;
}
.s_balloon {
   font-size: 14px;
   margin: 0 auto;
   padding: 5px;
   border: 1px solid #AAAAAA;
   border-radius: 3px;
   text-align: center;
   background: #FFFFFF;
   position: relative;
}
.s_balloon:before {
   content: "";
   border: 4px solid transparent;
   border-top: 4px solid #FFFFFF;
   position: absolute;
   left: 28px;
   bottom: -8px;
   z-index: 2;
}
.s_balloon:after {
   content: "";
   border: 4px solid transparent;
   border-top: 4px solid #AAAAAA;
   position: absolute;
   left: 28px;
   bottom: -9px;
   z-index: 1;
}
.s_button {
   font-family: arial, sans-serif;
   font-size: 10px;
   letter-spacing: 0;
   line-height: 10px;
   margin-top: 8px;
   border: 1px solid #AAAAAA;
   border-radius: 3px;
}
.s_button img {
   vertical-align: middle;
   border-width: 0px;
}

問題としては，バルーンの中の数字が中央よりも少し左側に寄ってしまっていることである。高さをピクセルで指定できていないところにも不満が残っている。display: table-cell を使えば，上下左右の中央揃えもできるし高さ指定もできるが，吹き出しの三角形部分を綺麗に表現できないのである。

Javascript

Javascript のコードは以下の通り。del.icio.usの被ブックマーク数を表示する方法 - Open MagicVox.net のコードを少し変更しただけである。感謝感激。

ブックマーク数の取得には，Delicious のかつてのサイト del.icio.us が使われている。新しい API も公開されているようだが，動作していない。また，Delicious が公開している API の情報は多くない (Developers – Delicious)。

<$MTEntryPermalink$> は Movable Type のテンプレートタグで，その記事の URL にレンダリングされる。Movable Type でない CMS の場合は，置き換えで可能。最初は location.href を使って CMS インデペンデントにしようとしてやってみたのだが，どうしても上手くいかなかった。

上のコードでは script が2つに分かれているが，詳しい人が書けば1つにできて，しかも無名関数にできるのではないかと思う。

課題

上の手順で Delicious のソーシャルボタンを設置することができるが，課題はいくつかある。

ボタン表示の HTML が div の入れ子になっていて不格好 (1つの div で書けると格好いい)
CSS が冗長っぽい (スリムにできそう)
バルーンの中の数字が中央から少しずれているような気がする (ど真ん中にしたい)
Javascript のコードが美しくない (無名関数で書けそう)

詳しい方は上記を直して使ってください。

Posted by n at 2013-11-28 23:50 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments