ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】ソーシャルボタンの自作設置方法!3種のシェア数つきSNSアイコン公開

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

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

ゆめぴょん(@yume_pyon)です。こんちはっ!

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

シェア数を高速表示!WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速いシェア数を高速表示!WordPressプラグインSNS Count CacheのDBキャッシュはAPIより速い17 shares

今回紹介するWordPressプラグイン「SNS Count Cache」は、S…

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

スマホ用サイトを高速化

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

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

完成イメージ: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対策にも配慮されているウェブフォントです。

ウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよウェブ制作やSEOも解決!アイコンWebフォントLigature SymbolsはLINE・はてブも使えるよ53 shares

ブログやウェブサイト制作では、アイコン用にWebフォントの活用も増えてます。今回…

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

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

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

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

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

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

今回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が逆に定義されてたので修正。

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

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

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

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

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

【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も【WordPress】Multi Device Switcherでスマホテーマ自動切替!Androidタブレット対応方法も

WordPressプラグイン「Multi Device Switcher」を使う…

【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法【WordPress】条件分岐で高速化!スマホ・ホーム・特定カテゴリで無駄表示しない方法23 shares

WordPressでブログを作成していると、スマホとタブレットとPCや、記事とホ…

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

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

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

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

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

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

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:シェア数の高速取得の決定版!WordPressプラグインSNS Count Cacheアップデートで進化【WordPress】Googleアナリティクスでカテゴリ解析する方法!コンテンツグループ設定で:次記事»
ページ
↑先頭
ホーム