WebStationビジネス書の書評を中心に、Webデザインなどの情報を紹介しています。
  • toshi@Twitter
  • Facebookページ
  • RSSリーダーの登録

スポンサーサイト

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

はてなブックマークボタンをFC2ブログに設置する方法

habetu_03.png

オンラインで自分のブックマークを保存し、共有することができる「はてなブックマーク」、通称「はてブ」。自分が公開しているブログ、またはブログ記事を「はてブ」してもらえると、かなり嬉しいですよね。

そこで今回は、FC2ブログで「はてブ」ボタンを設置する方法について紹介したいと思います。簡単なのでぜひ導入してください。

はてなブックマークボタン設置方法

まずはじめに、以下のURLにアクセスします。

『はてなブックマークボタンの作成・設置について』

以下、FC2ブログに簡単に設定できる入力方法を説明していきます。

habetu_01.png

①の「URL」には、ブログのURLを、「タイトル」には、ブログのタイトルを入力します。
このブログ(WebStation)なら
URL:http://engultrasoul.blog.fc2.com
タイトル:WebStation
と入力します。

②の「ボタンのタイプ」は好きなものを選択してください。

habetu_02.png

③のコードをそのまま好きなところに貼り付ければ終了です。ただし、これはブログのブックマークになるため、記事ごとにブックマークを設置したい場合は、以下の変更が必要です。

③のコードを次のように修正します。

  • ①で入力したURLを探し、<%topentry_link>に置き換える。
  • ①で入力したタイトルを探し、<%topentry_title>に置き換える。
あとは、FC2ブログのテンプレートで<!--topentry-->から<!--/topentry-->の間の好きなところに貼るだけです。

コピペで設置できるコード

「今までの説明がよくわからない」「なんか面倒くさそう」という方のために、コピペするだけで設置できるコードを公開しておきます。

●シンプル(ボタンのみ)

HTML
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="simple" 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>

●シンプル(ブックマーク数あり)

HTML
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="simple-balloon" 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>

●スタンダード

HTML
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="standard-balloon" 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>

●バーティカル

HTML
<a href="http://b.hatena.ne.jp/entry/<%topentry_link>" class="hatena-bookmark-button" data-hatena-bookmark-title="<%topentry_title>" data-hatena-bookmark-layout="vertical-balloon" 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>

ソーシャルリンク

トラックバック

トラックバックURL

この記事にトラックバックする(FC2ブログユーザー)

コメント

ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。