スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[FC2 ブログカスタマイズ] はてなブックマークボタン

FC2のブログにはてなブックマークボタンを取り付ける方法。

ブログに表示させる

ブログURLのボタンを表示させたい場合。
<a href="http://b.hatena.ne.jp/entry/<%url>" class="hatena-bookmark-button" 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>

各記事(エントリー)に表示させる

FC2独自変数<!--topentry-->~<!--/topentry-->内で以下のHTMLタグを追加すればいい。
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" 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>

全ての記事のタイトル(archives.html、?all)に表示させる

FC2独自変数<!--titlelist-->~<!--/titlelist-->内で以下のHTMLタグを追加すればいい。
<a href="http://b.hatena.ne.jp/entry/<%titlelist_url>" class="hatena-bookmark-button" 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>

ボタンの表示を整える

cssに次のコードを追加。
a.hatena-bookmark-button img, /* javascript無効時 */
iframe.hatena-bookmark-button-frame { /* javascript有効時 */
	vertical-align: middle;
}

FC2ノウハウ
関連記事

コメントの投稿

非公開コメント

プロフィール

Yamapikarya

Yamapikarya

Firefox アドオンとかを開発してます。

最新記事
最新コメント
カテゴリ
月別アーカイブ
検索フォーム
RSSリンクの表示
QRコード
QR
その他
  • あわせて読みたい
アフィリエイト
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。