はてなブックマークボタンの設置例


はてなブックマークボタンの設置トップページ

はてなブックマークボタンの作成・設置について へアクセス


はてなブックマークボタンの設置トップページ

はてなブックマークボタンの作成・設置までページをスクロール。項目1にURLとページのタイトルを入力し、項目2でボタンのスタイルを選択、項目3に出力されたコードをWebサイトの表示したい場所にコピペし完了です。

なお複数のページにスタンダードボタンで設置する場合は項目1、2は飛ばして項目3のボタンコードをそのまま設置で良さそうです。URLとタイトル(head要素のtitle要素の内容)は自動で取得、ボタンタイプのデフォルト値がスタンダード。

文法の誤りを訂正

data-hatena-bookmark-titleやdata-hatena-bookmark-layoutなどの独自データ属性とasync属性は、XHTML1.*で書かれたページではサポートしていないので削除します。(赤文字で示した箇所)

なお、data-hatena-bookmark-title=""を削除しても値のタイトルもブックマークボタンを押せば取得され、data-hatena-bookmark-layout=""を削除してもデフォルト値がstandardなので大丈夫そうです。また、async属性も、ボタンを設置するページがよほど大きな文書でなければ削除しても大丈夫そうです。

例)

<a href="http://b.hatena.ne.jp/entry/http://homepagelecture.web.fc2.com/" class="hatena-bookmark-button" data-hatena-bookmark-title="いまさらHTML,CSS入門講座" 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>


このエントリーをはてなブックマークに追加

関連)

はてなブックマークボタンの設置例facebook いいね!ボタンの設置例facebook いいね!ボタンの設置例 2014facebook いいね!ボタンの設置例2Google +1 ボタンの設置例twitterボタンの設置例各ボタンを綺麗に横に並べる各ボタンを綺麗に横に並べる 2トップページへ戻る


RAWで撮ろうLife with a cameraLife with a camera 2


inserted by FC2 system