シェアやフォローでとっておきの投稿の拡散方法を模索してみる。

先日から、ダカラちゃん効果なのか

瀬戸内海並みの凪のねこもりやのブログに

静かなさざ波が来ておりました。

ある日(1/20)のダカラちゃんの帽子の編み図の記事のアクセス。
QLOOKアクセス解析

 

Google Analytics

一番、ねこもりやが驚いてるのです( ̄w ̄) ぷっ

で、アクセス元を見てみると

何件かこの記事にリンクをはってご紹介していただいてるブログもあったりして。

そこで、ハタと気が付いたのだけど・・・

各々の投稿のリンクを簡単にコピーしてもらえるようにした方が親切なんじゃない?

ってことで、

さっそくやってみたよ♪

こんなん、なんでもないでしょうけど意外と見逃しがちのような・・・

↓の画像のピンクの囲み部分ですが、

実はソーシャル部分はページ上のソーシャルバーの二次使用(笑

追加したのは、「記事へのリンクはこちら↓・・・・」のところ。

ですが、その他の部分についても、記事にした覚えがないので改めて、今回はこのピンクの囲み部分全体について「拡散の種」と名づけてかるーく解説してみます。

拡散の種

 

「拡散の種」部分全体

<div class="post-sns">
<span class="text">もし、気に入っていただけたらシェアしていただけると嬉しいです♪</span>
<?php get_template_part( 'social' ); ?>
<span class="text">この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。<br /></span>
<textarea name="link" rows="2" class="search-input" onfocus="this.select()" style="width:78%;"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></textarea><br />
<span class="text">ブログの更新情報はこちらで配信中~</span>
<?php get_template_part( 'follow' ); ?>
<div class="feedburner">		
<!--RSSFEED-->
更新をメールでお知らせ 配信: <a href="http://feedburner.google.com" target="_blank">FeedBurner</a>
<form class="mailmag" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=nekomori', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<table>
<tbody>
<tr>
<td class="feed-input"><input type="text" title="メールアドレスを入力" onfocus="if (this.value == 'メールアドレスを入力') this.value = '';" onblur="if (this.value == '') this.value = 'メールアドレスを入力';" value="メールアドレスを入力"  class="feed-input" name="email"/></td>
<td class="feed-uri"><input type="hidden" class="feed-uri" value="nekomori" name="uri"/></td>
<td class="feed-loc"><input type="hidden" class="feed-loc" name="loc" value="ja_JP"/></td>
<td class="feed-submit"><input type="submit" id="feed-submit" class="feed-submit" value="購読する" /></td>
</tr>
</tbody>
</table>
</form>
<!--RSSFEED-->
</div>
</div>

テンプレートsingle.php(個別記事ページ)の任意の場所に挿入します。

全体をdivで括ってスタイルシートで調整できるようにクラスを付けてます。

Feedburnerを使ったメルマガ配信(今回は割愛します)や、ツイッターのフォロー、フェイスブックページやGoogle+へのいいね!なども 盛り込んでます。

ただし、先にも触れたとおりソーシャルのシェアボタンの部分は”social.php”、フォローなどの部分は”follow.php”と言う風に別ファイルにして使いまわしております。

そして、単一記事のページでしか必要ない部分は、single.phpに直接書いています。

シェアボタン部分

<span class="text">もし、気に入っていただけたらシェアしていただけると嬉しいです♪</span>
<?php get_template_part( 'social' ); ?>

social.phpというファイルを別に作って「get_tenplate_part」で呼び出してます。

social.phpの中身
<ul>
<![if !IE ]>
<li><a href="<?php bloginfo('url'); ?>" class="lsf home" title="トップページへ">home</a></li>
<li><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes,resizable=yes'); return false;" class="lsf facebook">facebook</a></li>
<li><a href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>&amp;via=nekomoriya" onclick="window.open(this.href, 'TWwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes,resizable=1'); return false;" class="lsf twitter">twitter</a></li>
<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="lsf google">google</a></li>
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button lsf hatena" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" >hatenabookmark</a></li>
<li><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="lsf pocket icon-pocket"></a></li>
<li><a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" class="lsf line">line</a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=nekomori&amp;loc=ja_JP" class="lsf rss">rss</a></li>
<![endif]>
<!--[if IE]>
<li><a href="<?php bloginfo('url'); ?>" class="home" title="トップページへ"><img src="<?php bloginfo( 'template_url' ); ?>/img/home.png" alt=""></a></li>
<li><a href="http://www.facebook.com/share.php?u=<?php the_permalink(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes,resizable=yes'); return false;" class="facebook"><img src="<?php bloginfo( 'template_url' ); ?>/img/facebook.png" alt=""></a></li>
<li><a href="http://twitter.com/share?count=horizontal&amp;original_referer=<?php the_permalink(); ?>&amp;text=<?php the_title(); ?>&amp;url=<?php the_permalink(); ?>&amp;via=nekomoriya" onclick="window.open(this.href, 'TWwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes,resizable=1'); return false;" class="twitter"><img src="<?php bloginfo( 'template_url' ); ?>/img/twitter2.png" alt=""></a></li>
<li><a href="https://plus.google.com/share?url=<?php the_permalink(); ?>" onclick="window.open(this.href, 'Gwindow', 'width=450, height=250, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="google"><img src="<?php bloginfo( 'template_url' ); ?>/img/google.png" alt=""></a></li>
<li><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button hatena" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加" ><img src="<?php bloginfo( 'template_url' ); ?>/img/hatena.png" alt=""></a></li>
<li><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="pocket"><img src="<?php bloginfo( 'template_url' ); ?>/img/pocket.png" alt=""></a></li>
<li><a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" class="line"><img src="<?php bloginfo( 'template_url' ); ?>/img/line.png" alt=""></a></li>
<li><a href="http://feedburner.google.com/fb/a/mailverify?uri=nekomori&amp;loc=ja_JP" class="rss"><img src="<?php bloginfo( 'template_url' ); ?>/img/rss2.png" alt=""></a></li>
<![endif]-->
</ul>

上記に関しては以下のページで解説しています。

ざっくり解説すると、インターネット・エクスプローラー(以下IE)とその他で表示を分けています。

記事へのリンクタグ部分

今回追加したのはこの部分。

<span class="text">この記事へのリンクはこちら↓コピーしてHTML編集画面に貼り付けでお使いください。<br /></span>
<textarea name="link" rows="2" class="search-input" onfocus="this.select()" style="width:78%;"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></textarea>

”rows=”は行数。
スタイルシートで適宜調整。もしくは上記の様に、「style=”~~”」で指定。

ココでは、クラス指定も使いまわしてるので、ご自身のサイトに合わせて。

<?php the_permalink(); ?>←各記事へのリンク

<?php the_title(); ?>←各記事のタイトル

フォロー部分

<span class="text">ブログの更新情報はこちらで配信中~</span>
<?php get_template_part( 'follow' ); ?>

follow.phpというファイルを別に作って「get_tenplate_part」で呼び出してます。

follow.phpの中身
<ul>
<![if !IE ]>
<li>
<a href="https://twitter.com/intent/user?screen_name=nekomoriya" class="lsf twitter" titel="Follow me">twitter<span style="font-size:50%;"> Follow!</span></a>
<a href="https://www.facebook.com/nekomoriya" class="lsf facebook" titel="いいね!">facebook<span style="font-size:50%;">  いいね!</span></a>
<a href="//plus.google.com/107650348676183841393?prsrc=3" rel="publisher" target="_blank" style="text-decoration:none;" class="lsf google" titel="プラスワン">google<span style="font-size:50%;">  +1</span></a>
</li>
<![endif]>
<!--[if IE]>
<li>
<a href="https://twitter.com/intent/user?screen_name=nekomoriya" class="lsf twitter" titel="Follow me"><img src="<?php bloginfo( 'template_url' ); ?>/img/twitter2.png" alt=""><span style="font-size:50%;"> Follow!</span></a>
<a href="https://www.facebook.com/nekomoriya" class="lsf facebook" titel="いいね!"><img src="<?php bloginfo( 'template_url' ); ?>/img/facebook.png" alt=""><span style="font-size:50%;"> いいね!</span></a>
<a href="//plus.google.com/107650348676183841393?prsrc=3" rel="publisher" target="_blank" style="text-decoration:none;" class="lsf google" titel="プラスワン"><img src="<?php bloginfo( 'template_url' ); ?>/img/google.png" alt=""><span style="font-size:50%;">  +1</span></a>

</li>
<![endif]-->
</ul>

これもまた、IEの場合とIE以外で表示を分けています。

シェアボタンやフォローボタンの部分はアイコンフォントを使って表示しています。

以下参照くださいませ。

後記

ご覧いただいた方に、ちょっとでもお役にたてているのならいいなーと思いながら毎回四苦八苦しながら投稿をしています。

きっと、現実にはお会いすることは無いかたがほとんどですが、こうしてねこもりやが書いたものに共感してくださったり、感謝して頂けるのは書いてる甲斐があるというものです!

なにをかくそう、ねこもりや自身、インターネット検索に救われた人間でございます。

御恩返しをするとともに、また有意義なサイト様にきっとお世話になりに伺います♪

 

コメントを残す

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

CAPTCHA