本文へジャンプ

トップページ > サンプル紹介 > 法則62 ソーシャルブックマークへの追加ボタンを設置する

サンプル紹介

法則62 ソーシャルブックマークへの追加ボタンを設置する

「ブックマークに追加」ボタンのテンプレートソース

<ul id="addBookmarks">
<!-- はてなブックマーク-->
<li><a href="http://b.hatena.ne.jp/append?<$MTEntryPermalink$>" title="Hatena ブックマークに追加"><img src="hatena.gif" width="16" height="16"alt="Hatena ブックマークに追加" /></a></li>
<!--del.icio.us-->
<li><a href="http://del.icio.us/post?url=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" title="del.icio.us に追加"><img src="delicious.gif" width="16" height="16" alt="del.icio.usに追加" /></a></li>
<!--POOKMARK Airlines-->
<li><a href="http://pookmark.jp/post?url=<$MTEntryPermalink encode_
url="1"$>&title=<$MTEntryTitle encode_url="1"$>" title="POOKMARK
Airlines へ追加"><img src="pookmark.gif" width="18" height="16" alt=
"POOKMARK Airlines へ追加" /></a></li>
<!--livedoor クリップ-->
<li><a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink encode_url="1"$>&title=<$MTEntryTitle encode_url="1"$>" title="livedoor クリップへ追加"><img src="livedoor_clip.gif" width="16" height="16" alt="livedoor クリップへ追加" /></a></li>
<!--@nifty クリップ-->
<li><a href="http://clip.nifty.com/create?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="@nifty クリップへ追加"><img src="nifty_clip.gif" width="16" height="16" alt="@niftyクリップへ追加" /></a></li>
<!--newsing-->
<li><a href="http://newsing.jp/nbutton?title=<$MTEntryTitle encode_url="1"$>&url=<$MTEntryPermalink$>" title="newsing へ投稿"><img src="newsing.gif" width="16" height="16" alt="newsing へ投稿" /></a>
</li>
<!--Buzzurl-->
<li><a href="http://buzzurl.jp/entry/<$MTEntryPermalink$>" title="Buzzurlにブックマーク"><img src="buzzurl.gif" width="16" height="16" alt="Buzzurl にブックマーク" /></a></li>
<!--Choix-->
<li><a href="http://www.choix.jp/bloglink/<$MTEntryPermalink$>" title="Choix へ追加"><img src="choix.gif" width="16" height="16" alt="Choix へ追加"/></a></li>
<!--Furl-->
<li><a href="http://www.furl.net/storeIt.jsp?t=<$MTEntryTitle encode_url="1"$>&u=<$MTEntryPermalink$>" title="Furl へ追加"><img src="furl.gif" width="16" height="16" alt="Furl へ追加" /></a></li>
<!--Blinklist-->
<li><a href="http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=<$MTEntryPermalink$>&Title=<$MTEntryTitle encode_url="1"$>" title="Blinklist へ追加"><img src="blinklist.gif" width="16" height="16" alt="Blinklist へ追加" /></a></li>
<!--reddit.com-->
<li><a href="http://reddit.com/submit?url=<$MTEntryPermalink$>&title=<$MTEntryTitle encode_url="1"$>" title="Reddit.com へ追加"><img src="reddit.gif" width="16" height="16" alt="reddit.com へ追加" /></a></li>
</ul>

「ブックマークの追加」ボタンのCSSソース

ul#addBookmarks {
    margin: 1em 0;
    padding: 0;
}
ul#addBookmarks li {
    display: inline;
    margin-left: 5px;
    list-style: none;
}
ul#addBookmarks li img {
    border: none;
}

リンク

ダウンロード

http://mt.web-100.jp/dl/mt/sbm_sample.zip

第4章 Webサイトの価値を高めるデザインの法則の一覧

  1. 法則58 ブログ記事のコメントに連番を振る
  2. 法則59 奇数、偶数でコメントやリストを交互に色分けする
  3. 法則60 トップページとそれ以外のページで見出しレベルを変更する
  4. 法則61 ソーシャルブックマークの被ブックマーク数を表示する
  5. 法則62 ソーシャルブックマークへの追加ボタンを設置する
  6. 法則63 RSSリーダーへのフィード登録ボタンを設置する
  7. 法則64 カテゴリやタグを利用して特定のブログ記事にのみアイコンを付ける
  8. 法則65 一定時間で自動的に消えるNewマークを付ける
  9. 法則66 最新のブログ記事のみデザインを変える
  10. 法則67 ブログ記事ごとに自動でデザインを変更する
  11. 法則68 カテゴリごとにデザインを変えて判別性を高める
  12. 法則69 投稿者別にアイコンやデザインを変更する
  13. 法則70 グローバルテンプレートと条件分岐でページごとにCSSを変更する
  14. 法則71 月別アーカイブのナビゲーションを折りたたんですっきり見せる
  15. 法則72 ブログ記事の日付を画像で出力する
  16. 法則73 美しいタグクラウドを作成する
取り扱いオンラインショップ