STINGER5にソーシャルボタン３種を追加する方法（投稿記事）

先日、STINGER5で、トップページに
Pocket、feedly、LINEの3種類のソーシャルボタンを追加する方法を書きました。

http://www.hirominomi.com/snsbutton/

最初から、STINGER5では、Facebook、Twitter、Google+、はてなブックマークの４種類のソーシャルボタンが表示されるようになっています。このサイトでは、Pocket、feedly、LINEの3種類のボタンを追加しています。ソーシャルボタンの追加方法はとっても簡単。ボタンの追加方法を、わかりやすく（細かく？）説明します。STINGER5では、ソーシャルボタンはトップページと、各投稿ページに表示されています。最初は１つにまとめる予定でしたが、長くなったため分けることにしました。先ずは、トップページへのソーシャルボタン追加方法を説...

続きの記事で、投稿記事にボタンを追加する方法を説明します。

基本的には、トップページにソーシャルボタンボタンを追加する方法と同じなのですが、一部修正する場所があります。

[adsense]

sns-top.phpに追加したソースコードをコピーする
sns.phpを開いて編集する
Pocketボタンを編集する

sns-top.phpに追加したソースコードをコピーする

WordPress管理画面にログインをします。
そして、「外観」⇒「テーマの編集」と選択をします。
（ここまでは、トップページと同じ）

sns-top.phpをクリックして、ファイルを表示します。

このサイトの sns-top.php　の内容です。（正確にいうと、pocketとはてなの位置が逆になっています。わかりやすくするために変えていますのでご了承ください。）

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php echo home_url(); ?>" data-text="<?php bloginfo( 'name' ); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo home_url(); ?>&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><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php echo home_url(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php bloginfo( 'name' ); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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> 
      </li>
      <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>
      </li>
      <li>
        <a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.hirominomi.com%2Ffeed%2F%E3%80%80'  target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-medium_2x.png' alt='follow us in feedly' width='71' height='28'></a>
      </li>
      <li>
	<a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="http://www.hirominomi.com/wordpress/wp-content/uploads/2015/05/line.png　" width="40" height="auto" alt="LINEで送る" /></a>
      </li>
    </ul>
  </div>

13行目から22行目までが、Pocket、feedly、LINEで送るボタンを追加したコードです。

この、13行目から22行目までをコピーします。

sns.phpを開いて編集する

画面の右側にある、　sns.php（赤で囲われているところ）をクリックして、ファイルを表示します。

※クリックすると画像が大きく表示されます。

先ほどコピーしたものを、貼り付けます。

貼り付ける位置は、↓の12行目と13行目の間です。

<div class="sns">
    <ul class="snsb clearfix">
      <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="" data-url="<?php the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script> 
      </li>
      <li>
        <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_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><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
        <g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>
      </li>
      <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" 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> 
      </li>
    </ul>
  </div>

feedlyボタンとLINEで送るボタンは、トップ画面と同じもので大丈夫です。

Pocketボタンを投稿記事用に編集します。

Pocketボタンを編集する

投稿記事のタイトルを表示するように、ソースコードの14行目に
data-save-url=”<?php get_permalink(); ?>
を追加します。

      <li>
	<a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php get_permalink(); ?>"></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>
      </li>

追加すると、上記のようになります。（このままコピペしても使えます）

これで、Pocketボタンの編集は終了です。

以上で、Pocket、feedly、LINEで送るの、ソーシャルボタン3種の追加は終了です。