2010-07-21
はてなダイアリーにDiggボタンを設置しようと試みた
はじめに
"Digg"って何??という方はこちらや http://ja.wikipedia.org/wiki/Digg
本家サイト http://digg.com/ へどうぞ
すごーくざっくりと説明すると、英語圏のはてなブックマークのようなものです。
以下、この記事にDiggボタンを設置しようと試行した際のメモです
Diggボタンの設置方法は、こちらのページを参照しました。
Integrate: The Digg Button > Smart Digg Button
成功すれば以下のようなDiggのボタンやアイコンが表示できます。
これらがあれば、ブログ記事から別ページにジャンプしてしまうことなく、
その場で気軽にDigg!してもらえます。
はてなダイアリーの 管理>デザイン>デザイン編集の"詳細"タブからページのフッタに以下のコードを挿入しています。
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium">
が、どうもはてなダイアリーではスクリプトの制限により設置できないみたいです...
【参照】はてなダイアリーヘルプ:ヘッダ・フッタに情報を載せる
(右カラムに表示されているように)<ご指定のscriptタグは許可されていません。詳しくははてなダイアリーで使えるブログパーツをご覧ください> "となり、
Diggボタンは設置・実装できませんでした。。
それでもDiggしてもらいたい場合の方法
以下のようなコードでDiggのページへのリンクを張って、リンク先でポチッとボタンを押してもらう、ということはできそうです。
【参照】Digg Badges http://about.digg.com/badges
<a href="http://digg.com/design/Trying_to_Integrate_The_Digg_Button_in_Hatena_Diary" target="_blank">
<!--リンク先はあらかじめSubmitしておいたDiggのエントリ-->
<img src="http://digg.com/img/badges/100x20-digg-button.png" width="100" height="20" alt="Digg!" />
</a>
するとこうなります
![]()
※クリックするとDigg.comのページへジャンプします
リンク先のページで、
ポチっ!としてもらえればOKです。
※Diggのアカウントが必要です。お持ちの方は、試しにポチっとお願いします(笑)
その他のブログサービス・CMS
今回は、はてなダイアリーのみで試行しましたが、
「クロスサイトスクリプティング=XSS脆弱性の回避」などのために、他のブログサービスでもDiggボタンの設置は難しいかもしれません。
【参照】はてなダイアリーXSS対策 http://bit.ly/bDU2bE
サーバー上でWordPressやMovableTypeなどのCMSを使用されている方は、おそらく設置できると思います。
近々WordPressで試して、結果をUpdateしようと思います。
⇒レンタルサーバーにインストールしたWordPressを使ったブログで、上記方法でのDiggボタンの設置に成功しました。
ブログはこちら http://daoki.me/2010/07/digg-button-in-wordpress/
daoki @はてなダイアリー初心者
【追記】
TypePadでは、"上級者テンプレート"を使用して設置できるそうです。
【参照】上級者テンプレートで「Digg」ボタンを表示する方法
http://help.sixapart.com/tp/jp-tp1/footerdigg.html
'Digg ボタン 設置'などでGoogle先生に聞いたらありました。他のサービスでも色々方法はありそうですね。
【追記2】
上記のTypePadの"「Digg」ボタン"はリンク先でDiggする方のボタンのようですね。
【追記3】ついに英語圏でBuzzり始めた、"iDish"へのDiggリンクを作成してみました。
"Let's start a new life with iDish"
![]()
ぜひ、あなたのサイトに設置して、"iDish"を世界に広めましょう!


