ページ

2010年10月27日水曜日

bloggerにソーシャルニュースDiggのボタンを追加する

[したいこと・しりたいこと・目標]

bloggerにソーシャルニュースDiggのボタンを追加する



[したこと]




(01)
Digg のサイトに行く。

Integrate: The Digg Button | Digg About
http://about.digg.com/downloads/button/smart

(02)
サンプルコードが表示されているのでコピーする


Wide、 Medium、 Compact、 Iconの4種類の中から残したいタイプを決める。
不必要なコードを削除する。


(03)
bloggerのHTMLを編集するタブを開き、ウィジェットのテンプレートを展開をチェックする。

(04)
テンプレートの編集画面で、以下のコードを探す。
<div class='post-footer-line post-footer-line-1'>

(05)
(04)で探したコードの下に(02)で編集したDiggのボタンを表示するコードを追加する。
今回は、Compactを使用する。

<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>
<!-- Compact Button -->
<a class="DiggThisButton DiggCompact"></a>

(06)
プレビューで確認する。
テンプレートを保存する。

0 件のコメント:

コメントを投稿