スポンサーリンク
ホーム»WordPress» STINGER5にソーシャルボタン３種を追加する方法（トップページ）

STINGER5にソーシャルボタン３種を追加する方法（トップページ）

当サイトは、アフィリエイト広告を利用しています

2015.05.26

最初から、STINGER5では、Facebook、Twitter、Google+、はてなブックマークの４種類のソーシャルボタンが表示されるようになっています。

このサイトでは、Pocket、feedly、LINEの3種類のボタンを追加しています。

ソーシャルボタンの追加方法はとっても簡単。
ボタンの追加方法を、わかりやすく（細かく？）説明します。

STINGER5では、ソーシャルボタンはトップページと、各投稿ページに表示されています。
最初は１つにまとめる予定でしたが、長くなったため分けることにしました。

先ずは、トップページへのソーシャルボタン追加方法を説明します。

WordPress管理画面にログイン

まず、WordPressの管理画面にログインします。

そして、「外観」⇒「テーマの編集」と選択して下さい。

SNSボタンカスタマイズ画像1
※クリックすると画像が大きく表示されます

編集ファイルsns-top.phpを開く

トップページ（このサイトでは、http://www.hirominomi.com）に表示されるソーシャルボタンを変更する場合は、sns-top.phpファイルを編集します。

画面右側に、太字で「テンプレート」と表示された下に、ファイル名が並んでいます。

下のほうに、sns-top.php　と表示されていますので、そこ（画像の中で赤く〇がついているところ）をクリックして下さい。
sns-top.phpファイルが表示されます。

SNSボタンカスタマイズ画像2※クリックすると画像が大きく表示されます

Pocketボタンを追加

Pocketのボタン設置サイトを開きます。
Pocketボタン設置サイト　⇒　http://getpocket.com/publisher/button

下のような画面が表示されます。

SNSボタンカスタマイズ画像3※クリックすると画像が大きく表示されます

表示したいボタンを選びましょう

「Choose Button Style」と表示された下に、ボタンが３パーターンありますので、表示したいボタンをチェックします。

ちなみに、このサイトでは一番左のボタンを使っています。

現在選択しているボタンが、右側の「Preview」に表示されていますので、確認してください。（プレビューいらない気もするのですが？）

ボタン表示コードをコピーします

ボタンを選択したら、「Copy Code」と書かれた下に表示されている、コードをコピーします。

下の画像の赤い〇の部分です。

SNSボタンカスタマイズ画像4※クリックすると画像が大きく表示されます

sns-top.phpにコードを追加

コピーしたコードを、sns-top.phpに追加します。

WordPressの管理画面に戻ります。
（もし、sns-top.phpが表示されれていなかったら、こちらを見て表示して下さい。）

次のコードを、sns-top.phpに追加して下さい。

        <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>は、Pocketでコピーしたコードには含まれていませんので追加して下さい。（STINGER5のコードと合わせるためにいれています。）
あるいは、このサイトと同じ表示形式でよければ、下のコードをそのままコピーしても使えます。

コードを追加すると、次のようになります。

<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>
    </ul>
  </div>

13～16行が追加されたコードです。

以上で、Pocketボタンの設置は完了です。

feedlyボタンを追加

feedlyのボタン設置サイトを開きます。
feedlyボタン設置サイト　⇒　http://feedly.com/factory.html

下のような画面が表示されます。
SNSボタンカスタマイズ画像5※クリックすると画像が大きく表示されます

表示したいボタンを選びましょう

「Step 1: Select your design」と表示された下に、ボタンが表示されています。
表示したいボタンをクリックします。

このサイトでは下の段の左から2番目のボタンを使っています。
（選択したボタンは、画面下の「Step3」の下に表示されています。）

RSSフィードのURLを入力します。

「Step 2: Insert your feed URL」の下に、ソーシャルボタンを表示するサイトのURL(このサイトの場合は、http://www.hirominomi.com/feed/　を入力します。

SNSボタンカスタマイズ画像6>※クリックすると画像が大きく表示されます

ボタン表示コードをコピーします

ボタンを選択したら、「Step 3: Copy and embed the HTML code snippet」と書かれた下に表示されている、コードをコピーします。
ここに、Step1で選択したボタン画像が表示されていますので、間違えていないか確認をして下さい。

下の画像の赤で囲われた部分です。
SNSボタンカスタマイズ画像7※クリックすると画像が大きく表示されます

sns-top.phpにコードを追加

コピーしたコードを、sns-top.phpに追加します。

WordPressの管理画面に戻ります。
（もし、sns-top.phpが表示されれていなかったら、こちらを見て表示して下さい。）

コピーしたコードを、sns-top.phpに追加して下さい。
Pocketと同じく、<li>と</li>を追加して下さい。

コードを追加すると、次のようになります。
※feedlyの場合は、自分のサイトURLを埋め込んでいますので、必ず、feedlyのサイトでコピーしたものを使用して下さい。

<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>
    </ul>
  </div>

17～19行が追加されたコードです。

以上で、feedlyボタンの設置は完了です。

LINEで送るボタンを設置

「LINEで送るボタン」設置サイトを開きます。
「LINEで送るボタン」設置サイト　⇒　https://media.line.me/howto/ja/

下のような画面が表示されます。
SNSボタンカスタマイズ画像8(LINE)※クリックすると画像が大きく表示されます

LINEボタンの画像をダウンロードします

ブラウザ画面で、一番下までスクロールして下さい。
すると、ラインボタンのダウンロードボタンがあります。

SNSボタンカスタマイズ画像8(LINE)※クリックすると画像が大きく表示されます

「ボタン画像をダウンロードする」（上の画像の赤〇の部分）をクリックして、画像をダウンロードします。

linebutton.zipファイルがダウンロードされます。

ダウンロードファイルを解凍して、使用するファイルを選びます。
このサイトの画像は、linebutton_36x60.png　を使っています。

画像をアップロードする

選んだボタン画像を、サーバにアップロードします。

アップロードする方法は、次の２つがあります。

1.　FTPで直接サーバ（STINGERテーマの　imagesディレクトリの下）にアップロードする
2.　WordPressのメディアライブラリにアップロードする

どちらでもよいのですが、より簡単でわかりやすい、
２のメディアライブラリにアップロードする方法で説明します。
（ちなみに、このサイトでは１の方法を使っています）

WordPressの管理画面で、「メディア」⇒「新規追加」を選択します。

SNSボタンカスタマイズ画像11※クリックすると画像が大きく表示されます

「メディアのアップロード」画面が表示されます。
さきほど選んだLINE画像ファイルをドロップして、画像ファイルをアップロードして下さい。

アップロードに成功すると、下のほうに小さくラインの画像が表示されます。（赤で囲まれた部分）
SNSボタンカスタマイズ画像12※クリックすると画像が大きく表示されます

sns-top.phpにコードを追加

LINEサイトに戻ります。https://media.line.me/howto/ja/
LINEサイトのダウンロードボタンより少し上に、「３．記載例」と表示されています。
そこに、「WordPressのテンプレートに記述する場合」と書かれていて、コードがかかれていますので、このコードをコピーします。（赤で囲まれた部分）

SNSボタンカスタマイズ画像10(LINE)※クリックすると画像が大きく表示されます

コピーしたコードを、sns-top.phpに追加します。
そして、同じく、<li>と</li>を追加して下さい。

<li>
    <a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"><img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" /></a>
</li>

コードの編集

コード中の、[ボタン画像のURL]、[ボタン幅]、[ボタン高さ]と書かれた部分を編集します。

[ボタン画像のURL]

さきほどアップロードした「ラインで送る」画像のURLを記載します。

URLの確認方法は、WordPress管理画面から行えます。

まず、「メディア」⇒「ライブラリ」を選択します。

アップロードした画像の一覧が表示されていますので、
その中から、「LINEで送る」の画像を選択します。

すると、「添付ファイルの詳細」画面が表示され、右側にURLが表示されています。（下の画像の赤で囲まれた部分）
このURLを、[ボタン画像のURL]と置き換えます。

SNSボタンカスタマイズ画像13※クリックすると画像が大きく表示されます

[ボタン幅]、[ボタン高さ]

画像を表示するときの、幅と高さを指定します。

例えば、画像のURLだとします。
http://www.hirominomi.com/wordpress/wp-content/uploads/2015/05/line.png　

このサイトでは、画像の幅を40、高さは自動的調整する指定をしています。

その場合のコードは次のようになります。

<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>

行20～22が追加部分です。

以上で、「LINEで送る」ボタンの設定は終わりです。

これで、Pocket、feedly、LINEの３つのボタンを追加できます。

最後にデザインを変更したい方向けに。
こちらのサイトがとても参考になりましたのでご紹介させて頂きます。

『【WordPress】8種類の自作SNSボタンのコードをご紹介！カウントも表示するよ』
http://shufulife.com/8type-snsbutton/

各投稿記事のソーシャルボタンの設定方法は、近日公開予定です。

だいぶ長くなってしまいましたが、
記事をお読み頂きありがとうございました。

スポンサーリンク

コメント

タイトルとURLをコピーしました