(記事内リンクにPR含む場合があります)

【WordPress】オリジナルSNSボタン設置方法!スマホ用シェア数つきSNSアイコンも公開

SNS対策/SMO/RSS

sns-button-original1ソーシャルボタンのオリジナル設置方法

このブログではオリジナルのソーシャルボタンを設置して、サイト表示速度を高速化し、独自デザインによる差別化も行っています。今回はPCだけでなくスマホサイト用のシェア数付きSNSアイコンの設置方法も紹介します。

ゆめぴょんです。こんちはっ(^^)/

今回の記事はAPIではなく、下のWordPressプラグインを利用します。通常のソーシャルボタンのシェア数の表示は高速化の妨げになりますが、このWPプラグインではDBキャッシュを使うため高速表示できます。

そのため、Webサイトやブログの表示が遅いという悩みから解消されて、スマホではPageSpeed93点を達成しました。PC版はまだまだですが。

スマホ用サイトを高速化

ソーシャルボタンについては、いくつも記事を書いています。表示の高速化はSEO対策の1つでもあるので、できることから取り組んでいきましょう。


完成イメージ:SNSシェア数つきソーシャルボタン

ソーシャルボタンとして、ツイートボタン、Facebookのいいね!やシェアボタン、Google+1ボタン、はてなブックマーク(はてブ)ボタンに、feedlyやLINEを加えて表示しています。

このブログのソーシャルボタンは日々改良しているため、現時点(2014.9.4)のものを紹介します。

トップページ/ホームや、カテゴリー一覧などでは、下のようにSNSアイコンとカウンタ数を表示しています。

sns-count-cache PC記事一覧のSNSカウント数

個別投稿記事では、記事上にシンプルなフラットデザイン風のソーシャルボタンを表示しています。もちろんSNSシェアのカウント数付きです。バイラルメディアの普及?により、オリジナルのSNSボタンもクリックされやすくなったと思います。

sns-count-cache PC用ソーシャルボタン

スマホサイト用のデザインでは、記事上も記事下にも自作のソーシャルボタンを設置しています。スマホサイトではPC以上に表示を高速化する必要があるので、通常のSNSボタンは一切読み込んでいません。

sns-count-cache スマホ版ソーシャルボタン

自作のSNSシェア数つきソーシャルボタンの設置方法

ツイートボタン、Facebookのシェア/いいね!ボタン、Google+1ボタン、はてなブックマーク(はてブ)のオリジナルボタンの設置方法を紹介します。

シェアのカウント数については、Pocket、LINEはAPIで取得できないため、今回は対象としません。LINEはリンクのみ紹介します。feedlyはソーシャルメディアではないし、少し改良中なので後日また別記事で書くつもりです。

また前提として、SNSアイコンは「Ligature Symbols」のWebフォントを利用しています。日本特有のはてブ、LINE、mixiなどにも対応してるし、空文字を使わないのでSEO対策にも配慮されているウェブフォントです。

いちおシンプルなスタイルシート/CSSも掲載しますが、設置環境によってはうまく表示されない場合もありますので、お好みで修正してください。

PC・スマホ共通!ホームなど記事一覧ページ用

sns-count-cache PC記事一覧のSNSカウント数

PCでもスマホサイトでも、ホームやカテゴリ一覧ページでは、表示件数が多いので通常のソーシャルボタンは高速化の妨げになり、SEO対策にもマイナスです。

しかし「SNS Count Cacheプラグイン」を使えば、かなり高速化することができます。

WordPressのテーマ/テンプレートファイルの「index.php」などに、下コードをコピペするだけでOKです。Ligature Symbols以外のウェブフォントを利用している場合は、class等を書き換えてください。

[html]

twitter

facebook

hatenabookmark
[/html]

今回CSSはアイコンの色だけ設定しています。色、フォントサイズ、アイコンとシェア数との間隔などは、お好みのスタイルシートでデザインしてみてください。

はてブは、0カウントの場合も多いため、0の時はシェア数だけでなくアイコンも非表示にしています。ツイッター、Facebookいいねボタンなども同様にできます。

PCの個別の投稿記事用

sns-count-cache PC用ソーシャルボタン

フラットデザイン風にして、SNSアイコンにはWebフォント「Ligature Symbols」を利用しています。スタイルシートは自由に編集してください。

WordPressのテーマ/テンプレートファイルの「single.php」などに、下コードをコピペしてください。Ligature Symbols以外のウェブフォントを利用している場合は、class等を書き換えてください。

(2014.9.4 15:10修正)ツイッターリンクから2重に開く問題を解決(「onclick」を削除)。
(2014.9.5 07:10修正)$url_encodeと、$title_encodeが逆に定義されてたので修正。

[html]

[/html]

スマホサイトの個別の投稿記事用

sns-count-cache スマホ版ソーシャルボタン

スマホサイトでは、フラットデザイン風ではタップしにくいので、少し高さのあるアイコン風に仕上げました。LINEボタンはPCでクリックしてもうまくシェアできないので、スマホやタブレットでのみ表示するのがおすすめです。

またPC版と違い、スマホ版ではSNSアイコンを単独で表示することもあるため、アイコンごとにCSS用のclassを設定しています。

スマホ用のWordPressのテーマ/テンプレートファイルの「single.php」などに、下コードをコピペして利用してください。テーマ切替プラグインが便利です。レスポンシブサイトの場合は、下記事の条件分岐を使う方法もあります、

(2014.9.4 15:10修正)1.リンクから「target=”_blank”」を削除。2.はてブのリンク先を変更。
(2014.9.5 07:10修正)$url_encodeと、$title_encodeが逆に定義されてたので修正。

[html]


google

hatenabookmark

[/html]

はてブだけは0カウントの場合に非表示にしています。他のSNSシェア数でも使えるので参考にしてください。

まとめ:今日のゆめぴょんの知恵

ソーシャルボタンをオリジナルにできれば、デザインの幅も広がります。シェア数をDBキャッシュから取得すれば高速化でき、SEO対策としても役立ちます。あなたのオリジナルデザインもぜひ教えてくださいね。

ソーシャルメディアのシェア数をAPIで取得したり、ソーシャルボタンをふきだし仕様にしたい場合などは、下記事もおすすめです。

PHPとJSでソーシャルカウントを取得する方法まとめ(全9サイト)
SNSボタンをオリジナルデザインに!設置方法&シェア数の取得方法まとめ | Design Color

ゆめぴょんでした。ちゃおっ!

タイトルとURLをコピーしました