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で送る

関連記事

blog_apart

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

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

word_hozon_001

WORD(ワード)2013で"名前をつけて保存(別名保存)"のショートカットキーを変更する方法

以前「WORD(ワード)2013でルビを振る動作にショートカットを割りあてる方法」という記事を書きま

excel_macro_001

excel(エクセル)2013でマクロを有効化して使用できるようにする

最近のexcel(エクセル)は、デフォルト(初期設定)の状態だと、マクロの実行が出来ないような設定に

air_004

エアー(送風)クッションでお尻の蒸れを回避する! 購入後のガチな感想 

座り仕事がメインの私にとって、夏場は"お尻の蒸れ"との孤独な戦いでもあります。

stinger3_design_1

STINGER3をあれこれカスタマイズした記録

このサイトはテーマ(テンプレート)としてSTINGER3を利用させていただいています。 シンプルで

medium_73248430

大沢逸美がソープ嬢を演じた名作!『おとこ喰い』鑑賞記

"あなたはギターを弾いてお金を稼ぐ。 わたしは 尺八を吹いて そいつを突っ込ませてお金を

wp_link_none001

WordPressで画像挿入時にリンク先の設定をデフォルトで「なし」にする方法

WordPress(ワードプレス)で文章内に画像を入れ込む場合は「メディアを挿入」ウィンドウで対象の

thum_001

ShareHtmlメーカーで作成したタグのCSSを調整できるように設定する方法

リンク先のサムネール画像を自動取得してくれる便利なツール「ShareHtmlメーカー」。当サイトでも

wp_error_001

WordPressで記事の公開/更新ボタンがグレーアウトしてしまう問題の対処方法

当ブログはWordPressで作成しているのですが、記事の作成中(編集中)、たまに 公開(更新)ボタ

medium_3036254720

自分的に便利だから入れておきたいWordPressのプラグインのメモ

photo credit: zetson via photopin cc 自分的に便利だから入

Message

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

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

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

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

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

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

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

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

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

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

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

→もっと見る

PAGE TOP ↑