STINGER3のSNS(ソーシャル)ボタンの種類を追加して増やす方法

この記事では、当サイトで使用しているWordPress用テーマSTIGER3(スティンガー3)において、記事下に表示されるSNS(ソーシャル)ボタンの種類を増やす際の設定方法を紹介しています。具体的にはPocket(ポケット)とLINE(ライン)のボタンを追加しています。

なぜSNSボタンを増やすのか?

そもそも、なぜ私がSNSボタンの種類を増やそうと思ったかについて、はじめに少し説明しておきます。

データハブのアクティビティ

アクセス解析ツール、Googleアナリティクスの機能のひとつに「データハブのアクティビティ」というのがあるのをご存知でしょうか?

Googleアナリティクスで「集客>データハブのアクティビティ」を選択し「表示中のセグメント」で「イベント」をクリック。
・・・と、以下のように自分のサイトの記事がブックマークされたりした履歴が表示されます。

snsbotton_001

これは、自分のサイトのページがSNS(ソーシャル)関係で取り上げられた履歴を把握できる便利機能です。まあ、といってもこの機能に対応しているデータハブで、日本でもお馴染みなのは「Google+」「はてな」「Pocket」くらいでしょうか?

で、この「データハブのアクティビティ」を見ていて気づいたんですが、このサイトを訪れてくれるみなさんの中で、Pocketという「あとで読む」サービスを利用している方が結構多いんですね(上図のピンクのハートマーク型のアイコン)。

なので「本文下にPocketのソーシャルボタンがあったら、当ブログの記事を読んでくれる方に便利になったりするのかも・・・」と思ったわけです。

いわゆる「ユーザビリティの向上」を目指すのであれば、SNSボタンの種類はもう少し増やしてもいいのかもしれない・・・と考えたのが、今回の記事の発端です。

STINEGRデフォルトのSNSボタン

当サイトで使用している、STINEGR3というテーマは無料ながら非情によくできており、デフォルト(初期状態)で既にSNSボタンを設置してくれています。ただし、初期状態では「ツイッター、フェイスブック、Google+、はてなブックマーク」の4つだけになっており、わたしが望む「Pocket」が含まれていません。

snsbotton_002

正直、デフォルトの4つだけでも十分だとは思うのですが、前述のように、Pocketユーザも結構多いようなので、今回は勉強も兼て追加方法を調べてみることにしました。

また、せっかくなのでPocketだけではなく、LINEのソーシャルボタンを追加する方法も合わせて調べています。

SNSボタンの追加設定手順

それでは具体的に、STINGER3において、デフォルト(twitter、Facebook、Google+、はてブ)以外のSNSボタンを追加する具体的な設定の手順を紹介していきます。

SNS(ソーシャル)ボタンのタグを取得する

ますは、追加するSNS(ソーシャル)ボタンのタグを取得しましょう。
ちなみに、今回はPocket(ポケット)とおまけでLINE(ライン)のボタンを追加しますが、世の中にはこのほかにもたくさんのボタンがありますので、以下のリンクを参照にしてみるのもいいでしょう。

SNSボタンのまとめ(忍者おまとめボタン)
http://www.ninja.co.jp/omatome/button-list/

pocket(ポケット)のボタン用タグの取得

さて、Pocket(ポケット)用のタグは以下のページから取得できます。

…といっても、タグはみんな共通なので以下のタグをコピペすれば大丈夫。

LINE(ライン)のボタン用タグの取得

LINE(ライン)のボタンは以下のページからタグを取得できます。

LINEの場合はボタン画像をダウンロードして、自分のサーバにアップロードしてから利用する必要がありますが、STINEGRのほかのSNSボタンとデザインを合わせるのであれば「wideh:36px Height:70px」のものが最適だと思います。

以下がWordPresss用のタグです。

上のタグ中の[画像のURL]、[ボタン幅]、[ボタン高さ]は適宜、自分の環境に合わせて入力をしてください。

STINGER3にタグを追加する

あとは取得したタグをSTINGERに追加します。

「外観>テーマ編集」から「sns.php」を選択します。
「sns.php」というのは、記事の本文下(関連記事の上あたり)に表示されるSNSボタンに関するファイルです。私の環境では停止していますが、オーバーレイ表示でもSNSボタンを表示させている方は「sns02.php」のファイルも同様に設定してください。

以下の画像は、sns.phpのデフォルトの状態です。
「ツイッター、フェイスブック、google+、はてなブックマーク」がそれぞれ<li>タグで囲まれています。

snsbotton_003

なので、「はてなブックマーク用タグ」のあとの</li>と</ul>の間に、追加したいPocketとLINEのタグを<li></li>で括って入れてあげればよいわけです(*LINEは画像のURLと幅、高さの指定を忘れずに!)。挿入箇所は上の画像を参照してください。

タグを追記したのが以下の画像。

snsbotton_004

あとは「ファイルの更新」ボタンを押して終了です。
実際に、確認してみると、以下のように無事にボタンが追加されました。

snsbotton_005

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

最小化したFiretools(ファイアツールズ)のウィンドウを再度表示させる方法

無料ストレージの「Firestorage(ファイアストレージ)」をちょくちょく利用させていただいてい

ソースネクスト「DropboxPro3年版」購入時の注意点と感想

デバイス間のファイル同期を自動で行ってくれる便利なストレージサービス「Dropbox(ドロップボック

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり幅を調整したりする際のCSS設定

STINGER3の本文記事とサイドバー(ウィジェット部分)の左右位置を入れ替えたり、幅を調整したりす

DESTROYでシステムディスク(OSのHDD)内のデータを完全消去する方法

自宅で使用していたパソコンを知り合いにゆずることになりました。 データのバックアップと消去(ゴ

それは詐欺メール! 三菱東京UFJ銀行(bk@mufg.jp)からメールアドレスを確認する旨のメールが届いた

まず結論から言いますと「三菱東京UFJ銀行(bk@mufg.jp)名義のメールが届き"メールアドレス

WEBの文章をEverenoteにコピペする際に 書式を無視してペーストする方法

仕事にプライベートに便利に利用しているEvernote(エバーノート)ですが、WEBページの文章など

WordPressで誤って削除してしまった記事を復活・復元させる方法

とてもまぬけなお話なのですが、他で運営しているブログのとある記事(1ページ)を誤って削除してしまい、

ThunderBird 返信メールが簡体字中国語(GBK)になる場合の対処方法

メールソフトThunderBird(サンダーバード)を使用しています。 本日、届いたメールに返

楽天カードを不正利用された際の対処法 【重要】楽天カードから緊急のご連絡が届いたら

去る、5月31日(日)に何者かによって楽天カードを不正利用されてしまいました。 幸いにして実質

自分のサイトを開くと強制的にblog-apart.comに転送されてしまう場合の対処方法

本日、急にこのサイト(SimpleStock3)にアクセスすると「http://blog-apart

Message

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

足元の冷えを解消!デスクワーカーにおすすめの足温グッズまとめ!

日がな一日座り続けで作業をしていると、血流が悪くなるのか、足元(つま先

足元の冷え解消!足温グッズレビュー(3) ホットマルチヒーター

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(2) 山形電気あんか*参考

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

足元の冷え解消!足温グッズレビュー(1) デュアルヒータースリッパ

デスクワークの際の足元の冷えを解消すべく、あれこれ模索しているうちに

掃除機にペットボトルの蓋が詰まってしまった場合の対処方法

部屋を掃除していたところ、掃除機でペットボトルのフタを吸い込んでしまい

→もっと見る

PAGE TOP ↑