役に立つ情報、楽しい情報を発信するブログです。

Stinger5にPocketボタンを設置する手順

   

stinger5-pocket-2
WordPressテーマStinger5のデフォルト設定ではPocketボタンがありません。なので、設置する手順を書いていきます。

だいたいの手順はこんな感じ。

Pocketボタンのソースコードをコピー

sns.phpに追記

ボタン位置の調整

スポンサーリンク

Stinger5にPocketボタンを設置する

stinger-pockets00

Stinger5の記事下のSNSボタンはデフォルトではこんな感じになっています。ここにPocketボタンを追加していきます。

stinger-pockets01-2

Pocket for Publishers: Pocket Button

Pocetのパブリッシャー向けページで①好きなデザインを選択し、②下部のソースコードをコピーします。

stinger-pockets02-2

WordPressのメニュー → 外観 → テーマ編集 → sns.php と移動します。

stinger-pockets03-2

liタグを追加して、Pocketボタンのソースを記述します。

上記のようなソースコードを</ul>の手前に追記して、ファイルを更新します。

※<li>~</li>がひとつひとつのボタンのソースになっています。

stinger-pockets04

サイト上で確認すると、Pocketボタンが追加されています。

stinger-pockets05

しかし、このままだとスマホで見たときにこんな感じでボタンが1個ズレることになります。

5つボタンがあると収まりが悪いので、Google+のボタンをコメントアウトしていきます。(残したい人はそのままにしてください)

stinger-pockets06-2

①Google+のボタンをコメントアウトしました。

それと、ボタンの並びも変更します。②<li>~</li>ごと順番を入れ替えれば、ボタンの順番が変わります。

Twitter Facebook はてブ Google+ Pocket

Twitter Facebook Pocket はてブ

こうしたいわけです。
変更したらファイルを更新します。

stinger-pockets07

確認してみると、ばっちりですね。
これで完了です☆

スポンサーリンク

おわりに

Pocektはソーシャル経由の拡散にはあまり寄与しませんが、TwitterやFacebookよりもボタンが押されやすいです。

ボタンが押されて数字が増えていると「賑やかし」になりますので、できるだけ設置したほうが良いと思います。

「あとで読みたい」と思われるような記事を作るのが先決ですけどね。

 - Stinger5

スポンサーリンク
もしも記事がお役に立ったら、ぜひぜひシェアしていただけるとうれしいです。

Message

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

  関連記事

adsense-responsive
アドセンスのレスポンシブ広告ユニットを設置する方法 [Stinger5]

アドセンスのレスポンシブ広告ユニットを設置する方法を説明していきます。このブログ …

stinger5-adsense06
Stinger5のスマホ表示に320×100サイズのアドセンス広告を設置する手順

Stinger5のアドセンス広告は、スマートフォンで表示すると300×250サイ …

stinger5-affiliate-br
[Stinger5] テキストタイプのアフィリエイトリンクがimgタグで勝手に改行される

このブログのテーマ(テンプレート)はStinger5を使わせてもらっています。デ …

Top