Top  スポンサー広告  ブログに色々なボタンを設置してみた。「はてなブックマークボタン」編 Top  義経の備忘録  ブログに色々なボタンを設置してみた。「はてなブックマークボタン」編
--------(--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
関連記事

Category : 義経の備忘録

2012-01-27(Fri)
ども…皆さんこんにちは。義経です。

FC2ブログに各ボタンを設置する解説を行っております。
Twitter:ツイートボタン →Twitterツイートボタン編
Google:Google+1ボタン →Google+1ボタン編
mixi:イイネ!ボタン →mixi:イイネ!ボタン編
Facebook:いいね!ボタン →Facebook:いいね!ボタン編
はてなブックマーク:はてなブックマークボタン →今回

さて、今回ははてなブックマークボタンの追加です。

はてなブックマークって昔っからあるイメージだが…何故か変わりが全く無いというw

今回ははてなブックマークボタン編です。基本的にFC2ブログ用に書いていきます。
はてなブックマークボタンの設置方法

はてなブックマークにブックマークを追加するためのボタンです。
はてなブックマークボタンの作成・設置についてこちらのページより、作成していきます。

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

①ボタンを設置するページの情報を入力
ここではブックマークさせたいURLとタイトルを入力します。
各記事のURLタイトルを使用したい場合は、URLに<%topentry_link>をタイトルに <%topentry_title>を入れますが、ここで入れると問題が有るので後でこれに変更します。
とりあえず何かしら目印を入れておいてください。

②ボタンのタイプを選択
好きなボタンを選んでくださいw

③プレビューを確認。コードを貼り付けて完了
読んで字のごとくですwとりあえずプレビューを確認しますと言っても、ただ単にボタンのタイプで選択した物が出てるくらいですが…

<a href="http://b.hatena.ne.jp/entry/ゆーあーるえる" class="hatena-bookmark-button" data-hatena-bookmark-title="たいとる" data-hatena-bookmark-layout="vertical" 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>
この様な形でソースコードが出来ます。
赤文字部分で書かれたところが、①でてきとーに入れておいた部分です。

なぜ直接<%topentry_link>や<%topentry_title>を入れないのか?と言う事ですが、直接入れてしまうと、上記の赤文字の部分が&lt;%topentry_link&gt;&lt;%topentry_title&gt;となってしまいます。
&lt;%topentry_link&gt;の&lt;と&gt;は元々 < と > でないと機能しません。
&lt;と&gt;は < と > のURLソース上での代替え文字なのです。
ですので&lt;と&gt;を < と > に変えて上げる必要があります。
となるとめんどくさいのでソースコードを取得した後に変更すると言う形です。
それを踏まえて変更すると…
<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" 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>
この様になりますので任意の場所に貼り付けます。
但し<%topentry_link>や<%topentry_title>を使用する際には、テンプレートの<!--topentry--> ~ <!--/topentry-->のなかに収まっていなければ意味がありません。

という感じで結構簡単に設置出来ますね。


↓役に立った・面白かったなど思っていただけましたら是非クリックをお願いします。
このエントリーをはてなブックマークに追加
コメント
コメントを書く

管理者にだけ表示を許可する

トラックバック

http://areda.blog9.fc2.com/tb.php/1263-5ce21c6d

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

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