Sponsored Link
Stinger3にPocket・Evernote・feedlyのSNSボタンを追加表示させる方法

この記事を読むのに必要な時間は約 5 分です。

当サイトはStinger3テンプレートを使っていますが、いくつかカスタマイズも行っています。

Stinger3では、デフォルトで搭載されているソーシャルボタンは4つしかありません。

なので今回は、ソーシャルボタンを追加表示させる方法をご紹介していきますね。

Sponsored Link


Stinger3ではSNSボタンが4つしかない

Stinger3テンプレートでは、Twitterアイコン、Facebookアイコン、Google+アイコン、はてなブックマークアイコンの4つしかありません。

シェアボタンは、ブログでもわりと重要なアイテムですので、主要SNSアイコンは是非追加させておきたいところです。

多くしたほうがカスタマイズ感も出ますからね^^

ですので、その他の主要SNSであるPocket・Evernote・feedlyを追加させたいと思います。

SNSボタンを追加しよう

まず、各ボタンのタグを取得していきます。

ここではあらかじめ用意したコードをコピペするだけで追加できるように紹介しますが、一応ボタン用タグの取得サイトも載せてお伝えします。

Pocket(ポケット)のタグを取得

まず、下記のサイトからコードを取得します。

http://getpocket.com/publisher/button

getpocket

もちろんコードタイプはStinger3に合わせます。

Evernote「Site Memory Clip」のタグを取得

Evernoteのクリップは下記コードをコピペして使ってください。

もちろんEvernoteのボタンが不要なら表示させなくても大丈夫ですよ^^

feedlyボタンのタグを取得

feedlyは下記サイトからコードを取得します。

http://www.feedly.com/factory.html

取得したいアイコンをクリックし、自身のブログURLを入力します。

このとき、URLの最後に「/feed/」を入力します。

僕の場合「https://seonet.x0.com/feedly/」となります。

feedly   feedly3

上記コードをコピペして使います。


SNSボタンの表示

それでは上記コードを使って実際にSNSボタンを表示させます。

コードを貼付ける場所は、

ダッシュボードから「外観」⇒「テーマ編集」⇒「sns.php」より編集を行います。

貼付ける箇所は下記画像の通りです。

sns

そして貼付けるコードは、下記コードをコピペして使ってください。

feedlyで取得したコードはブログによって異なります。

下記のfeedlyのコード部分はご自身のコードを取得して入力してください。

僕のブログコードになっていますので変更をお願いします。

最後に「ファイルを更新」をクリックすると完了となります。

下記画像のように、反映されていたらオッケーですね☆

feedly2

ソーシャルボタンの追加コードは下記コードになります。

デフォルトでは「単一記事の投稿 (single.php)」にあると思います。

ただし、stinger3はアップデートを繰り返しているので現状どうなっているのかは把握できていません^^;

コードの勉強にもなると思うので、一応確かめてみてくださいね。

なければ上記コードを追加して表示させてください。

まとめ

stinger3テーマのSNSボタンを増やしたい方は是非導入してみてください。

ちなみに補足ですが、Stinger3に付属している追尾型ソーシャルボタンを削除する方法もご説明しているので、よろしければそちらもご覧下さい。

では!