【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ最近よくお問い合わせをいただく当ブログに設置しているオリジナルのSNSボタン8種類の全コードをご紹介します。コードはコピペでOK!STINGER5への設置方法も説明します。シェアボタンのコードはツイッター、フェイスブック、グーグルプラス、はてなブックマーク、LINE、Pocket、RSS、feedlyの8種類です。RSSはSNSなのか!?という突っ込みはスルーでお願いします。スポンサーリンク[toc]このSNSボタンのコードなどはゆめぴょんさんの記事を参考にさせていただきました。Cache】を利用するとシェアのカウント数を取得することができます。カウントするのはツイッター、フェイスブック、グーグルプラス、はてなブックマークのみです。Cache】をインストールし有効化しておきましょう。シェア数の取得に少し時間がかかるようです。シェア数取得が必要なければこのプラグインは必要ありません。Cache】の詳しい説明はプラグインの作者さまのサイトでご確認ください。Awesomeを使用します。以下サイトからCDNのコードを取得し</head>内に記載してください。Awesomecssコードレスポンシブのサイトでの設置を想定しています。PCでの表示では横4つに縦2つ、モバイルでは下図のように横2列の縦4列でボタンが並びます。{margin-right:0;}STINGER5でのCSS記述箇所STINGER5をご利用の初心者の方で、コピペする場所がわからない方は下記を参考にしてください。コピペする場所はstyle.cssです。←ここの上にコピペ!!!!!}phpコードsingle.phpのシェアボタンを設置したいところに以下を設置したいところにおいてください。STINGER5ではsns.phpファイルを全てこれに書き換えです。コードを微調整しました。詳しい変更箇所は別途記事に書きましたのでご確認ください。0.4.0)のアップデートによりシェア数取得するのに使用している関数を変えました。以前の関数も使えるようですが、プラグイン作者様は今回書き換えたものを使用することを推進しています。Awesomeのバージョン4.4よりPocketが追加されたそうです。Awesomeのバージョン4.4のCDNコードはこちら(STINGER5では既存のコードを書き換えます)、Pocketのコードはこちらから確認してください。Pocketのアイコンフォントに対応しました。AwesoneのCDNのヴァージョンが4.4以上でないと表示されませんので、header.phpなどにあるコードを書き換えてください。CDNコードを最新のものにしますとグーグル+のアイコンも新ヴァージョンへと切り替わります。feedlyのフォロー数を取得できるようになりましたので対応しました。feedlyなのでサイト全体の購読数を表示します。PointPCでの表示は別ウィンドウで小さい小窓が開きます。スマホでは開かないようにしています。if(function_exist~~】の部分を削除してください。シェア数が多い場合はフォントサイズなどで調整してくださいね!サイトTOPのURLとサイト名を取得するには上記コードは各記事のタイトル名とパーマリンクを取得するのですが、サイトのトップページURLとサイト名を取得したいときは以下のコードになります。シェア数はTOPページのURLをシェアした場合の数字です。記事のシェア数を表示する際にはシェアのないSNSには何も表示しませんが、これは「0」と表示されます。※STINGER5のSNS-top.phpも同じ要領で記述してください。AwesomeのアイコンフォントにはPocket、LINE、feedlyのアイコンはありません。feedlyにはRSSのアイコンフォントを入れています。はてぶはCSSでそれっぽくしているだけです。細かい所にこだわりたい方は、icomoonというアイコンフォントで必要な分だけ設置する方法があります。icomoonのくわしい説明は以前ご紹介しています。ShufulifeicomoonでSVG画像でアイコンフォントを自作できるのですが、こちらのサイトではPocket、feedlyのSVG画像を配布してくださっているのでダウンロードしicomoonでアイコンフォントを自作しましょう。ドウラク※LINEに関してはLINE側で提供するアイコン以外の利用を禁止しているようですので、任意でお願いいたします。ガイドライン|LINEで送るボタンまとめオリジナルシェアボタンは最近のフラットデザインのサイトに多く取り入れられているので違和感もあまり感じられなくなりました。サイトも軽量になるのでおすすめです。Share!!ツイートするシェアするはてブするこの記事のタイトルとURLをコピーする記事タイトル【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ記事URLhttps://shufulife.com/8type-snsbutton/お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。【エクセル帳簿】決算時に行うこともっと見るブログの中の人ちゅんこ@shufulife意識低い系主婦。夫と娘(5歳)と仲睦まじく暮らしています。毎日楽することばかり考えて、お手本はアニメ「あたしンち」のお母さん。Shufulife本サイト内にある記事や画像などの一切の無断転載を禁じます。