Sawalog

スマートフォンアプリの技術的な開発ログや企画、マーケティングに関する方法やノウハウをまとめたブログ

WordPressにはてなブックマークを表示させる方法

      2011/08/14

WordPressの日記や記事に「はてブ」されている数を表示したいときの設定方法。
このブログは上記のようにタイトルの横に出してます。(誰もはてブしてくれなかったら見れないw)

・被ブクマ数を画像として表示
・クリックするとはてなブックマークのページに飛ぶ

どのようにしてるかというと以下をphpファイルに追記する感じ。

[php]
<a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" />
<img src="http://b.hatena.ne.jp/entry/image/<?php the_permalink() ?>"border="0" align="center" />
</a>
[/php]

ググると皆さん大体こんな感じにしているようね。

phpで、表示するページのURL(the_permalink)を取得してhrefに入れてます。
画像にaタグでリンクを張っているのでborderを0にしてスッキリに。
という感じです。

これをWordpressのテーマ編集でお好きなところに貼れば、
クリックできるはてブリンク画像が表示されるはずです。

具体的には、以下の3つのファイルに追記しました。
・ トップページ(index.php)
・ 各記事ごとのページ(single.php)
・ アーカイブページ(archive.php)

■ やり方

1. 上のHTML文3行をコピーする
2. Wordpressの設定画面ひらく
3. 「テーマ編集」を選ぶ
4. 上記3つのphpそれぞれに適切にコピペして更新する

追記する場所が分からないという人は適当にそれっぽい場所(the_titleなど書かれている箇所の後ろとか)にペーストしてみて色々試せばいいと思います!

そんな感じで設置してみましたー。
はてブしてくれる人がいると嬉しいですw
 

 - Tips, WordPress

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  関連記事

no image
iOS5 beta 入れてからiPad2が頻繁に落ちる

iOS5 beta 入れてからiPad2が頻繁に落ちる。 風呂蓋閉じて、開いたら …

iOS6 にアップデートする方法

iPhoneをiOS6にアップデートする方法をご紹介。 (iOS6をダウンロード …

iOS6 beta2 にアップデートする方法

※注意 この記事は以前のアプリ開発者用です。    → 普通のiOS6のアップデ …

no image
さくらVPSにSubversion 1.6.11 をインストール

引き続き、さくらのVPSたんで遊んでいます! さくらのVPSにバージョン管理シス …

no image
新しくMacBookを買ったら設定することリスト

新しくMacbook Proを購入しました(ΦωΦ) 毎回、Macを購入すると行 …

no image
アプリ開発に必要な画像サイズ【iPhone6対応】

アプリ開発で用意する画像のサイズを個人用にまとめてみました。 デザイナーさんに伝 …

iPhone4Sを開発機として登録する方法

かわいいiPhone4Sさんがおうちに来ましたっ! 3GSと比べてしまうと、もう …

no image
iOS5 beta インストールしてみた

やっと帰宅したので、一日遅れだけど早速iOS5を入れてみた。 今回はiPad2に …

アプリ企画に使える!オズボーンのチェックリスト

  アプリの企画やアイデアを考えたいけど、どうも良いネタがない・・・ そんなとき …

iOS8 beta版にアップデートする方法

iOS8 beta をiPhone5にインストールした際のメモ。 開発者登録して …