青龍会血風録

del.icio.us,はてなブックマークとアンテナ,ニフティクリップ,livedoor クリップ,FC2ブックマーク、追加ボタン全部のせタグ実装例

　自分のblogにdel.icio.us、はてなブックマーク、はてなアンテナ、ニフティクリップ、livedoor クリップ、FC2ブックマーク等の、いわゆるソーシャルブックマークに追加してもらうためのボタンを付けよう、それも、追加ボタン提供しているところ全部。
　等と無茶を思い立つ。
　まるでラーメン屋の「全部入り」とか「全部のせ」のノリだ。

　具体的には同じircチャンネルにいるArvinedの小部屋　ベランダの人がいけない、真犯人。

　ここの人が急に「矢野さん、blog始めたんだからはてブボタン付けているもんだと思った」などと言うので、そもそもそういうボタンの存在すら知らなかった私は、いきなり興味を持ってしまった。

　ircでやはりそのチャンネルのメンバーが「やっぱ全部やるんでしょ？」と明らかな挑発をするので「そういうことを言ったらやっちゃう人、ここには２人はいるね」と言い、主犯格の人も結局やることになり、「やり過ぎ」とか「オーバーキル」とか「限度を知らない」とか「完膚無きまでに」というのが大好きな私も、嬉々としてこの企てに参画してしまった。

　というわけで、本日の実装となるわけですが。（前置き長すぎでした）

　有名なblogサービスでもなく、MTのようにメジャーなスクリプトではないんだけど、スキンいじればたいていのことは解決するblogだったので、サックリ改造完了。

　でも、このシステム、Web Diary Professional(以下「このシステム」)で、このボタンを付けた改造例というのを見たことがないので、参考までにスキンのいじり方を。
　同じシステムの方なら、そのままコピペでいけますし、MTとか他のシステムでも、変数部分を変えれば使えます。

具体的にやってみる手順

　まず、アイコン画像を公式か、使ってる他人のblogか、さもなくばうちからパクってダウンロードします。
　アイコン画像をskin/以下にimd/のディレクトリを掘って、そこにアップロードします。

　他のサービスやシステムをお使いの方は、FTPが使えるならFTPで、さもなくばblogシステム上で画像をアップロードして、その時のURLをどっかに控えておいて、後のhtmlソース中に示す画像のパスを適宜に書き換えていってください。

　次に、このシステム(Web Diary Professional)をお使いの方なら、skin/Diary.htmlの20行から30行当たりにある、日記テキスト部分の右下の編集とか削除かのある行

<!--ARTICLE_ADMIN_START--><li><a href="${INFO_PATH}?mode=admin&work=edit&edit=${ARTICLE_NO}&exec_form=on">編集</a>・<a href="${INFO_PATH}?mode=admin&work=edit&del=${ARTICLE_NO}&exec_confirm=on">削除</a></li><!--ARTICLE_ADMIN_END-->
</ul>

の直後から

</div>　で閉じるところのすき間

　に以下のをコピペします。CSSによってはリンクしたときにアイコンの回りのボーダーがでる可能性もあるので、できればCSSで消しちゃったり、あとは微妙な修正なりは各自でしましょう

<ul class="info">
<li><a href="http://del.icio.us/post?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}"><img src="${INFO_URL}skin/img/delicious.gif" width="12" height="12" alt="このエントリーをdel.icio.usに追加する" title="このエントリーをdel.icio.usに追加する" /></a></li>
<li><a href="http://clip.nifty.com/create?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}"><img src="${INFO_URL}skin/img/nifty_add.gif" width="14" height="14" alt="このエントリをニフティクリップに追加" title="このエントリをニフティクリップに追加" /></a></li>
<li><a href="http://clip.livedoor.com/clip/add?link=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}"><img src="${INFO_URL}skin/img/ld_add.gif" width="16" height="16" alt="このエントリをLivedoor クリップに追加" title="このエントリをLivedoor クリップに追加" /></a></li>
<li><a href="http://bookmark.fc2.com/user/post?url=${ARTICLE_URL}&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}"><img src="${INFO_URL}skin/img/fc2_add.gif" width="16" height="16" alt="このエントリをFC2ブックマークに追加" title="このエントリをFC2ブックマークに追加" /></a></li>
<li><a href="http://b.hatena.ne.jp/append?${ARTICLE_URL}"><img src="${INFO_URL}skin/img/append.gif" alt="このエントリーをはてなブックマークする" title="このエントリーをはてなブックマークする" width="16" height="12" /></a></li>
<li><a href="http://b.hatena.ne.jp/entry/${ARTICLE_URL}"><img src="${INFO_URL}skin/img/b_entry.gif" alt="このエントリーを含むはてなブックマーク" title="このエントリーを含むはてなブックマーク" height="12" width="16" /></a></li>
<li><a href="http://a.hatena.ne.jp/append?${INFO_URL}"><img src="${INFO_URL}skin/img/a_append.gif" width="16" height="12" alt="このblogをはてなアンテナに追加" title="このblogをはてなアンテナに追加" /></a></li>
<li><a href="http://b.hatena.ne.jp/entry/${ARTICLE_URL}"><img src="http://b.hatena.ne.jp/entry/image/large/${ARTICLE_URL}" alt="&nbsp;" /></a></li>
</ul>

　という感じでコピペしましょう。

　ここでは、私が使っているシステムの使っているスキンに合わせて、リスト形式にしてますが、普通にトラックバックとかコメントとか右下に書いてあるところにアンカーと画像でずらずら続けたり、長いので改行するとかにしてもいいでしょう。

他のシステムのための変数説明

　なお、使われている変数ですが、お使いのblogサービスやシステムにあわせて一括置換して変えるだけで大丈夫だと思われます。

　${ARTICLE_URL}と言う変数が、各記事のURLを吐き出している変数なので、ここを変えればいいです。
　Movable Typeなら<$MTEntryPermalink$>に置換するという感じですね、使ったこと無いから知らないけど。

　各サービスとかの変数なんかは、各サービスの説明書とか、はてなブックマークの追加ボタン設置例なんか見ればいいと思います。

　各ソーシャルブックマークへのリンク部分に引き続き&amp;title=${ARTICLE_SUBJ}-${INFO_TITLE}と有るのは、${ARTICLE_SUBJ}が記事のタイトルに該当する変数、${INFO_TITLE}がblogのタイトルに該当する変数です。はてな以外はその辺の情報を自動で持っていかないので、付けてください。無くてもユーザ側で書き換えられるので必須ではありません。（他のblogをお使いの方は、ここも適当な変数に置き換えてください）

　あともう一つ、blogをアンテナに登録するときとアイコン画像のパスのために使っている変数${INFO_URL}がありますが、これはここのシステムで使われている「スクリプトを設置したパスを示す」変数で、同じblogを使っている人が使うときにそのままコピペで使えるよう汎用性を持たせるため使っているだけですので、他のシステムの場合はそれに相当する変数か、さもなくば、ご自分のアップロードされたアドレスに各自書き換えるでも良いでしょう。

　なお、変数に入る記事タイトルやblogタイトルが日本語など2バイトコードの時、a要素中にASCII文字以外が入ってしまうので厳密に言うと不正ですし、送信した先のblogが巧く変換しないと文字化け（特に外国のブックマーク）します、そのため、blogでお使いの文字コードがUTF-8以外の時は、ご注意下さい。回避する方法論としては、記事タイトルやblogのタイトルをwikiのURLなんかで見られるようにエンティティ化して吐き出させるようにするとか、リンク時のa要素中でリンク先の文字コードを指定しておくとか良いかもしれません（ただ、a要素中でのリンク先の文字コード指定って、ちゃんと解釈しているブラウザって有ります？）

　と言うわけで、ついキシャーっとなってやってしまいましたが、反省はしておりません、この記事を参考にして一括設置された方、おられましたら是非コメントとかトラックバックいただけると嬉しいです。blogタイトルが任侠とか極道とか圧力団体とか政治団体とか幕末の愚連隊とかそっち方面にしか見えませんが、危険性はありませんのでお気軽にどうぞ。

　より多くのblogでも同様のカスタマイズをされる方が増えると楽しそうなので、私からもトラックバック送り返したいと思います。

結局、16:15に更新しています、色々とまずいところが見つかったのでー

追加で、11/22の17:22に最終更新しています、altのないimgにalt追加したり、&にちゃんとamp;付け加えて実体参照をしてみたり変数の説明を追加したりこっそり書き換えたりです。

以下忘れた頃にこっそり更新するお仲間リンク

• MovableTypeの場合(Arvined神)
• Blogn Plusの場合(如月ニイチさん)

　そして、さらに病気が悪化する2回目へと続くのであった…