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

攻めは飛車角銀桂守りは金銀三枚

ITとアコースティックギター、そして日常のひとこま。

記事下のソーシャルボタンとGoogleAdsenseの位置を入れ替える方法

はてな
スポンサーリンク

はてなブログでソーシャルボタンを表示し、記事下にGoogle Adsenseの広告を設定すると、

  1. 記事
  2. はてなスター
  3. ソーシャルボタン
  4. GoogleAdsense

の順番に表示されます。

f:id:lightgauge:20150115233245p:plain

こんな感じですね。

基本は記事読んでもらって、スターをつけてもらって、ブックマークしてもらって広告を踏んでもらってとフルコース辿っていただければうれしいのですが、そこまで欲張ってはいけませんね。


今回はちょっとした実験として、広告を少し目立たせてみてクリックされやすいかどうか調べてみます。

並べ替える順番

今回は少しGoogleAdsenseの表示を前に持って行って、

  1. 記事
  2. はてなスター
  3. GoogleAdsense
  4. ソーシャルボタン

と言う順番してみます。
(実ははてなスターを下に持っていく方法がわかりませんでした。また調べてみます。)

それでは作業開始です。

1.デザインで表示させているソーシャルボタンをやめる

まずはデザインで表示させているソーシャルボタンをやめます。

f:id:lightgauge:20150115234302p:plain

こんな感じではてなスター以外はチェック外します。

2.自力でソーシャルボタンを作る

ここまでできればあともう少しです。

消したソーシャルボタンを自力で表示します。

表示方法はid:zentooさんの

はてなブログの記事上に吹き出し型のソーシャルボタンを設置する方法を、勝手に添削 - エンジニアが株式投資と副業で年収2000万を目指すブログ

という記事を参考にさせていただきました。


この記事に書かれてあるスクリプトをちょっと改造して、Pocketのボタンを追加して

<ul style="list-style-type:none;margin-left:-40px;">
<li style="display:inline-block;">
<a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a>
</li>
<li style="display:inline-block;">
<iframe src="http://www.facebook.com/plugins/like.php?href={Permalink}&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>
</li>
<li style="display:inline-block;">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="{Permalink}" data-count="vertical">Tweet</a>
</li>
<li style="display:inline-block;">
<div class="g-plusone" data-size="tall" data-href="{Permalink}"></div>
</li>
<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en"></a>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
</ul>

と言うコードを記事下のGoogleAdsenseを表示した後に追加します。

これで完成です。
f:id:lightgauge:20150115235641p:plain

これで思惑通りに並びました。

あとはしばらく運用して効果のほどを確かめてみましょう。

スマホも同じようにすれば同じ並びになります。

この記事「はてな記法」で書きましたがどうも慣れませんね。
練習あるのみです。

Google AdSense 成功の法則 57

Google AdSense 成功の法則 57

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)

GoogleAdSense グーグルアドセンスで<本気で稼ぐ>コレだけ!技 (得するコレだけ!技)