WordPressの記事一覧(ループ)ではてなブックマークのボタンをそれぞれのページのブックマークとして設置する方法

WordPressの記事一覧(ループ)ではてなブックマークのボタンをそれぞれのページのブックマークとして設置する方法
このエントリーをはてなブックマークに追加
PR

はてなブックマークのボタンがありますが
そのまま設置すれば、そのページのブックマークが出来ます
URLとタイトルを指定すれば、指定されたURLとタイトルでブックマークされます

これをWordPressで記事一覧のページで動的に処理をして
それぞれの記事へのURLとタイトルとなるようにしてはてなブックマークのボタンを設置する方法です

 

はてなブックマークをループで使うときの加工コード

<a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="simple-balloon" title="" data-hatena-bookmark-title="<?php the_title("");?>"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" 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>

 

ボタン吹き出しのデザインは、 data-hatena-bookmark-layout = ここ を変更してください

 

変更できる値は以下の5つです

standard-balloon 数を表示する

standard-noballoon 数を表示しない

vertical-balloon 上の方に数を表示する

simple 数を表示しないアイコンのみ

simple-balloon 数を表示するアイコンのみ

 

また、アイコンではない方では次のパラメータをaタグに加える必要があります

data-hatena-bookmark-lang=”ja”

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)