Hatena::ブログ(Diary)

My Life Between Geek and Suit (はてな分室) RSSフィード

2010-07-21

はてなダイアリーにDiggボタンを設置しようと試みた


f:id:daoki:20100721113440p:image※イメージ画像(さびしい...)

はじめに

"Digg"って何??という方はこちらや http://ja.wikipedia.org/wiki/Digg

本家サイト http://digg.com/ へどうぞ

すごーくざっくりと説明すると、英語圏はてなブックマークのようなものです。


以下、この記事にDiggボタンを設置しようと試行した際のメモです


Diggボタンの設置方法は、こちらのページを参照しました。

Integrate: The Digg Button > Smart Digg Button

http://about.digg.com/button


成功すれば以下のようなDiggのボタンやアイコンが表示できます。

f:id:daoki:20100721113532p:image

これらがあれば、ブログ記事から別ページにジャンプしてしまうことなく、

その場で気軽に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">


が、どうもはてなダイアリーではスクリプトの制限により設置できないみたいです...

【参照】はてなダイアリーヘルプ:ヘッダ・フッタに情報を載せる

http://bit.ly/bKjEfr


(右カラムに表示されているように)<ご指定の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!

※クリックするとDigg.comのページへジャンプします


リンク先のページで、

f:id:daoki:20100721114001p:imageボタンを

ポチっ!としてもらえれば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"

Digg!

ぜひ、あなたのサイトに設置して、"iDish"を世界に広めましょう!