はてなダイアリーにいいねボタンを置く方法

たっち！

みなさん、こんにちは

お元気ですか、僕はアイスのあとラーメンを食べて気持ち悪い状態ですが元気です。

さてさて

最近は、フェイスブックやミクシィやツイッターなどの SNS で面白いと思ったモノを紹介し合う文化が定着してきているような気がします。
そんな中で、ウェブページを紹介するために使われるためにウェブページに置かれるものが「いいね！」ボタンだったり、「ツイート」ボタンだったりするわけですね。
というわけで、はてなダイアリーにそういったボタンを配置する方法を紹介したいと思います。
ここで紹介する方法は、ちゃんと理解して置きたい人向け、 XML や HTML を分かっている人向けとなります。

はてなダイアリーには自由な HTML を貼り付けられない

まあ、普通に自由に HTML を貼り付けられる環境であれば、ただ単に提供されるボタン用の HTML を張り付けるだけなので簡単です。
でも、はてなダイアリーの場合は自由な HTML を貼り付けることが出来ません。*1
と言うわけで、はてなの許可された形の HTML 内で貼り付ける必要があるわけですね

グーグルガジェットの作り方

グーグルガジェットとは、様々なページに貼り付けやすいように設計されたブログパーツみたいなもんです。
はてなダイアリーにはグーグルガジェット用の HTML を張り付けることが出来るので、グーグルガジェットとして様々なボタンを貼り付けようということですね。

まず、簡単な XML を書く

グーグルガジェットは、以下のような XML ファイルをどこか URL を持つ場所に公開すれば良いです。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

ここにボタンの HTML を貼り付ける

]]></Content>
</Module>

XML からグーグルガジェット用の HTML を取得する

たとえば、上の XML を http://callee.jp/socialbuttons/sample/000.xml に置いてみました。
これから HTML を作るには http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/000.xml にアクセスして、「Get the Code」を押します。そうすると HTML が表示されると思います。
具体的には以下のようなものです。

<script src="http://www.gmodules.com/ig/ifr?url=http://callee.jp/socialbuttons/sample/000.xml&amp;synd=open&amp;w=720&amp;h=150&amp;title=%E3%81%AF%E3%81%A6%E3%81%AA%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AA%E3%83%BC%E3%82%BD%E3%83%BC%E3%82%B7%E3%83%A3%E3%83%AB%E3%83%9C%E3%82%BF%E3%83%B3&amp;border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script>

これをはてなダイアリーの日記に貼り付ければ良いのです。

これで

グーグルガジェットは作れるようになりましたね。
次は、具体的に様々なボタンをこのグーグルガジェットを書いてみましょう。

グーグルガジェットにツイッターのボタンを貼り付ける

ツイッター用のツイートボタンは、以下のページから作ることが出来ます。
http://twitter.com/goodies/tweetbutton

今回は以下のように作りました

水平方向にカウントを表示

とりあえずツイートテキストは適当に入れておきます（グーグルガジェットの場合、タイトルの自動取得はうまくいきません。）

とりあえず URL も適当に入れておきます（グーグルガジェット内の場合、 URL の自動取得はうまくいきません。）

言語は日本語で

一緒にツイッターユーザー名もツイートさせることもできますが、これは使いません（とくに理由はありません）

そうすると、 HTML が出来ますね。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/001.xml

次に、フェイスブックのボタンを貼り付ける

フェイスブックのいいね！ボタンは以下のページで作ることができます。
いいね！ボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook

以下のように作ります

なるべく、シンプルなボタンになるようにしてみました。

「Get Code」ボタンを押して、上のほうの iframe って書いてあるテキストボックスから HTML をコピーします。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

]]></Content>
</Module>

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/002.xml

次に、はてなブックマークのボタンを貼る

はてなブックマークのボタンは以下のページで作ることができます。
はてなブックマークボタンの作成・設置について - はてなブックマーク

以下のように作ってみました

適当に URL とタイトルを入れて、アイコンのタイプを選びます。
右側の HTML をグーグルガジェットの XML に貼り付けます。

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" 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>

]]></Content>
</Module>

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/003.xml

最後にミクシィイイネ！ボタンを貼り付ける

ミクシィのチェックボタンを作るのは結構めんどくさいです。

まず、 mixi Plugin の登録をする

以下のページに行きます
ソーシャル・ネットワーキングサービス [mixi(ミクシィ)]

新規サービスの追加を押します。

このように必要事項を埋めて、同意→作成と進みます

HTML を取得する

このページの一覧から、以下のようなページに進むことが出来ます

上記のように設定してタグを取得してみます

で、貼り付けるとグーグルガジェットの XML は以下みたいな感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<Content type="html"><![CDATA[

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&amp;layout=button_count&amp;show_faces=false&amp;width=110&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a href="http://twitter.com/share" class="twitter-share-button" data-url="http://d.hatena.ne.jp/amachang/" data-text="IT戦記" data-count="horizontal" data-lang="ja">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<a href="http://b.hatena.ne.jp/entry/http://d.hatena.ne.jp/amachang/" class="hatena-bookmark-button" data-hatena-bookmark-title="IT戦記" 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>

<iframe scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

]]></Content>
</Module>

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/004.xml

対象 URL、タイトルをカスタマイズ可能にする

とりあえずだいぶ出来てきましたが、この手順を毎回ブログを書くたびに行うのは面倒です。なので、 URL やタイトルなどはカスタマイズ可能にしておきましょう。

UserPref という仕組みを使う

さっきまでの URL に以下のように UserPref というタグを追加します。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[
...省略
]]></Content>
</Module>

UserPref の値を HTML の中で使う

_IG_Prefs というオブジェクトを HTML の中の JavaScript から使うことが出来ます。
最終的には、以下のような感じになります。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="720" height="150" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" />
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" />
<Content type="html"><![CDATA[

<iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe>

<a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a>

<a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" 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>

<iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe>

<script type="text/javascript">
/* Get UserPrefs Values */
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/005.xml

グーグルガジェット内のデザインを調整

次に、グーグルガジェット内のデザインを調整

以下のように構造化して、適当に CSS を書きます

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#FFFFFF" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" href="" class="hatena-bookmark-button" 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></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

続けるにはENTERを押すかコマンドを入力してください
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="はてなダイアリーソーシャルボタン" author="amachang" width="500" height="21" />
<UserPref name="articleUrl" datatype="string" display_name="記事の URL" required="true" default-value="http://d.hatena.ne.jp/"/>
<UserPref name="articleTitle" datatype="string" display_name="記事のタイトル" required="true" default-value="title" />
<UserPref name="backgroundColor" datatype="string" display_name="背景色" required="true" default-value="#F9F9F9" />
<Content type="html"><![CDATA[
<style>
body, html {
    overflow: hidden;
    margin: 0;
}

body {
    font-size: 14px;
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    display: inline;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    list-style: none;
}

#mixi-check-for-article {
    margin: 0 0 0 5px;
}
</style>

<ul>

    <li><iframe id="facebook-like-for-article" src="" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:21px;" allowTransparency="true"></iframe></li>

    <li><a id="twitter-share-for-article" target="_top" href="http://twitter.com/share" class="twitter-share-button" data-url="" data-text="" data-count="horizontal" data-lang="ja">Tweet</a></li>

    <li><a id="hatena-bookmark-for-article" target="_top" href="" class="hatena-bookmark-button" 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></li>

    <li><iframe id="mixi-check-for-article" scrolling="no" frameborder="0" allowTransparency="true" style="overflow:hidden; border:0; width:140px; height:20px" src="http://plugins.mixi.jp/favorite.pl?href=http%3A%2F%2Fd.hatena.ne.jp%2Famachang%2F&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140"></iframe></li>

</ul>

<script type="text/javascript">
var prefs = new _IG_Prefs();
var articleUrl = prefs.getString('articleUrl');
var articleTitle = prefs.getString('articleTitle');

document.body.style.background = prefs.getString('backgroundColor');

/* Facebook Like for Article */
var facebookLikeForArticleEl = document.getElementById('facebook-like-for-article');
facebookLikeForArticleEl.src = 'http://www.facebook.com/plugins/like.php?href=' + encodeURIComponent(articleUrl) + '&layout=button_count&show_faces=true&width=110&action=like&colorscheme=light&height=21';

/* Twitter Share for Article */
var twitterShareForArticleEl = document.getElementById('twitter-share-for-article');
twitterShareForArticleEl.setAttribute('data-url',  articleUrl);
twitterShareForArticleEl.setAttribute('data-text', articleTitle);

/* Hatena Bookmark for Article */
var hatenaBookmarkForArticleEl = document.getElementById('hatena-bookmark-for-article');
hatenaBookmarkForArticleEl.href = 'http://b.hatena.ne.jp/entry/' + articleUrl;
hatenaBookmarkForArticleEl.setAttribute('data-hatena-bookmark-title', articleTitle);

/* Mixi Check for Article */
var mixiCheckForArticleEl = document.getElementById('mixi-check-for-article');
mixiCheckForArticleEl.src = 'http://plugins.mixi.jp/favorite.pl?href=' + encodeURIComponent(articleUrl) + '&service_key=c5892ab99a0d2928d6383cfefd07fd5ae021920d&show_faces=false&width=140'

</script>
<!-- Twitter Share for Article -->
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<!-- Hatena Bookmark for Article -->
<script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
]]></Content>
</Module>

背景の色は、 IT 戦記の背景色に合わせてみました。

この XML を試したい場合は以下で試せます

http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/006.xml

実際に貼り付ける

次は実際に貼り付けてみましょう。ぺた

以下のように微妙な感じになります

び、微妙ですね。

不要な部分を CSS で隠します

貼り付けられたグーグルガジェットは、以下のような HTML の構造をしています。

table.gadget
- tbody
  - tr
    - td
      - span.title
        
        a
  - tr
    - td
  - tr
    - td
      - div
        
        iframe （これ以外は不要！！！）
  - tr
    - td
      - a
        
        img
    - td
      - span.powered
        
        a
        
        #text

貼り付ける HTML のそばに以下のような CSS を一緒に貼り付けます。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>

この CSS は大変便利なのではてなダイアリーの詳細デザイン設定で、ブログ全体の CSS として設定しておくのもいいかもしれません。

というわけで

ついに完成！！！お疲れ様でした！

こんなめんどくさいことできない＞＜！！！

そういう人のために、汎用化したものも作っておきました。
http://www.gmodules.com/ig/creator?url=http://callee.jp/socialbuttons/sample/complete.xml
ここで生成された HTML を、前述した以下の CSS と一緒に貼り付けてくださいね。

<style>
/* IE 以外用 */
/* IE では、 nth-child が使えない */
table.gadget tr:nth-child(1), table.gadget tr:nth-child(2), table.gadget tr:nth-child(4) {
    display: none !important;
}

/* IE 用 */
/*  IE ではテーブルはコンテンツがあればつぶれないので、不要なものを消して td の高さを 0px にし iframe だけ残す */
table.gadget td {
    height: 0px !important;
    padding: 0px !important;
}

table.gadget img, table.gadget span, table.gadget a, table.gadget a:hover {
    display: none;
    height: 0px !important;
    font-size: 0px !important;
}

/* 共通 */
table.gadget td, table.gadget tr, table.gadget iframe, table.gadget div ,table.gadget {
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
}
</style>