SNSにPocketボタンを追加しました!(WordPress stinger3)

Pocketとは

Pocketとは、現在世界中で利用者急増中の「あとで読むサービス」の代表格です。

インターネットには情報が溢れかえり、気になるけど後でじっくり読みたいというものがたくさんあります。

そういうときに、このPocketを利用すると、ページをクリップでき、後で自分の好きなときに呼び出して読むことができます。

なにより便利なのは、Pocketで取り込むと、オフラインでも閲覧できるという点です。

地下鉄での移動中など圏外の場所でも読めるので、ストレスフリーで使えます。

もちろん利用は無料です。

詳しい使い方については、こちらの記事が大変よくまとめられていると思います。

 

Pocketの導入

導入には2つのステップが必要です。

1.Pocketのコードをコピーする。

2.SNSのコード欄にペーストする。

これだけです。

私の使っているstinger3では5分で出来ました。

以下、stinger3を題材に、導入方法を記載いたします。

1.Pocketのコードをコピーする

Pocketのコードは共通です。

特に変更する点はありませんので、以下のテキストをそのままコピー頂いて結構です。

 

<li><a href="https://getpocket.com/save"class="pocket-btn"
data-lang="en"
data-save-url="<?php get_permalink(); ?>"
data-pocket-count="vertical"
data-pocket-align="left" >Pocket</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>

 

2.SNSのコード欄にペーストする

ここから、お使いのwordpressテーマにより、設置方法が異なります。

この記事ではStinger3で実際に設置した際の手順を記載いたします。

sns.phpへ

まず、ダッシュボード⇒外観⇒テーマ編集

2014-08-16_15h17_36

 

 

次に「sns.php」を選択します。

2014-08-16_15h17_51

sns02.phpについて

※ここで、sns02.phpというのもありますが、これは左下の追従型SNSボタンの記述です。

追従型に単純に追加するとデザインが崩れてしまうため、何かと置き換える等の処置が必要です。

なお、当ブログでは追従型には変更を加えていません。

 

変更前の記述

私の使っていたバージョンでは変更前はこの様な記述でした。

 

<div id="snsbox03">
  <div class="sns03">
    <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="https://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="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
    </ul>
  </div>
</div>

上から順に見ていくと、twitter,facebook,google,hatenaと記述が進んでいるのが分かります。

それぞれ<li>で始まり、</li>で終わる様に書かれています。

今回、最後にPocketを追加しますので、一番最後のhatenaの</li>の後に、先ほどコピーしたテキストを貼り付けます。

変更後の記述

該当箇所にペーストした結果、この様なコードになりました。

 

<div id="snsbox03">
  <div class="sns03">
    <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="https://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="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> 
      </li>
<li><a href="https://getpocket.com/save"class="pocket-btn"
data-lang="en"
data-save-url="<?php get_permalink(); ?>"
data-pocket-count="vertical"
data-pocket-align="left" >Pocket</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>
</div>

これで完了です。

最後に

設置が完了したら、実際にサイトを表示させてみましょう。

表示が成されていることと、クリックしたときにPocketのサイトに飛べば成功です。

スマホでは横幅の関係で2段目に表示されていましたが、特に問題はありません。

この他、feedlyやlineのボタンも設置していきたいので、また挑戦して記事にしていきたいと思います。

もし良ければ、どんどん当サイトの記事を「あとで読んで」頂ければ幸いです^^

[amazonjs asin=”4844334832″ locale=”JP” tmpl=”Small” title=”いちばんやさしい WordPress の教本 人気講師が教える本格Webサイトの作り方”]

最後まで記事をお読みいただき、有難う御座います664789c6oez1lkq4

あなたに合格が訪れます様に