読者です 読者をやめる 読者になる 読者になる

HSKぐうたらジャーナル

カメラ、ガジェット、かっこいいもの、かわいいもの、おいしいものが大好きな個人トレーダーのぐうたらな日常をマイペースに綴ります。

【B】10分ではてなブログに「他にこんな記事も読まれています」を表示する簡単な方法!の巻

[B] はてなブログ

f:id:hisoka_maki:20130512002339j:plain

たとえば、ずらーっと並んだレストランの中から、一店だけ選んで
ご飯を食べるとき。どうやって選ぶでしょうか?
数多くのウェブサイトがあるなかで、自分のブログを選んで、読んでもらうことって
似たようなことだと思うのです。

  • 食べログにある他の人の評価で選ぶのと同じように
    はてブのブックマークされた数で選ぶ、とか
  • お店の雰囲気で選ぶのと同じように
    ブログのデザインで選ぶ、とか
  • 店頭にある見本で料理の内容を確認するように
    記事の内容が面白そうか確認してから選ぶ、とか

過去にご紹介させていただいた記事は、これらの中でも
デザインに関することだったり、記事の内容をチラ見せすることだったり
いかに「選んでいただくか」という点を良くしていくための内容でした。

今回は、「選んでいただいた」あとで、
いっぱい注文してもらう(=他の記事もあわせて読んでもらう)ための
カンタンな方法をご紹介できればと思います。

f:id:hisoka_maki:20130428134611g:plain

店主としては、一品でも多くの品を頼んで頂いた方が嬉しいもの。
「本日の定食 (=最新のエントリ)」だけじゃなくて
時間のある方にはサイドメニュー(=他の記事)も
食べていっていただきたいものです。

しかし、深夜食堂じゃあるまいし、メニューが見つけられないことには
注文のしようがありません。

あったかいごはんにかつぶしのっけて
おしょうゆかけてたべたいんだけど。
(深夜食堂 第3夜 猫まんま より)

なんて、ちょっと憂いのあるお客さんがメニューを聞いてくる店じゃないのです。
ウチの店は。

深夜食堂 1 (ビッグコミックススペシャル)

深夜食堂 1 (ビッグコミックススペシャル)

サイドバーなんて見えちゃいない

もちろん、はてなブログをカスタマイズしなくても
他の記事へのリンクはサイドバーにあります。

しかし、そんなモノはほとんどの人にとって
のぞみに乗りながら三河安城の駅のホームにあるメニューを見るがごとし、です。
時速270キロで周辺視野を通過していってしまうのです。

←ほら、いま、ちょうどこの記事の左側を新着記事の一覧が通過しつつあります。

他の記事を確実に紹介するための方法

他の記事も見て頂くためには、その存在をしっかりと知って貰う必要があります。
お客様がランチを食べ終えたら、すかさずデザートメニューを試食とともに
オススメするくらい、アグレッシブにいきましょう。

そう、記事を読み終えた直後の、確実に目に付くところ
他の記事へのリンクを設置するのです。
やり方はめちゃめちゃカンタン。10分もあれば十分です!
(…前置きが長くなってごめんなさい。
この時点ですでに2分くらい経過してますね…。)

f:id:hisoka_maki:20130428134609g:plain

LinkWithinを使えばカンタンなのだ

ようやく本題にやってきました。
まずは、LinkWithinのサイトに向かいましょう。

さっそく、必要な情報を入力していきます。(下図参照)

f:id:hisoka_maki:20130511230009j:plain 

メールアドレスとブログのURLを入力したら、
Platformは”Others”に変更(※はてなブログの場合)、
Width(=ヨコ方向にいくつの記事を表示するか)を適当に選択します。

f:id:hisoka_maki:20130511230632j:plain

そして表示されたコードをコピーします。

f:id:hisoka_maki:20130511230908j:plain

f:id:hisoka_maki:20130428134612g:plain

あとは、はてなブログの管理画面でそのコードを貼り付けて
ちょいちょいっと修正するだけ。

はてなブログ管理画面から、記事下のHTMLを表示する画面にいきましょう。

f:id:hisoka_maki:20130511231043j:plain

「HTML記述欄」に先ほどコピーしたコードを貼り付けます。
その際、以下の赤字部分を追記します。

<script>
var linkwithin_site_id = XXXXXXX;
linkwithin_text='他にこんな記事も読まれています'  
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>

はい。これで完了!おつかれさまでした。

あとは設定を保存して、自分のサイトを見てみましょう。
他のおすすめ記事が表示されているはずです。

もっとアグレッシブにオススメしたい!という方には

ちなみに、日本語で提供されているzenbackというサービスもあります。
客の懐具合などおかまいなしに、サイドメニューをガンガン推してくる
定食屋のおばちゃんぐらいのアグレッシブさが欲しい方は
zenbackさんのサービスを検討してみてもよいかもしれません。

今後も当サイトでは、デザインを変えながら試行錯誤して
おすすめできそうな内容があれば、ご紹介していきたいと思っています。

ではでは、またー。

f:id:hisoka_maki:20130428134606g:plain

こちらの記事もどうぞ:

デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)

デザインの教室 手を動かして学ぶデザイントレーニング(CDROM付)

 
広告を非表示にする