趣深い.com

コケの成長を眺めて暮らしています

高速化!自作SNSシェアボタンの作り方。本物に似ているけど微妙に違う、この違和感。ざっくりコピペできます。

 2015/11/21      ブログ運営


作りました。今更。超いまさら。知っていますか?小柳ルミ子。

せっかく苦労してやったので、自作SNSシェアボタンの作り方を紹介します。
フラットデザインが味気ないとか思っている人、しっくり来ないと感じている方にオススメです。

オリジナルのシェアボタンはやたらめったら読み込みに時間が掛かるので、特に思い入れとか拘りがないのであれば切り替えた方が良いと思います。機能は一緒ですから。

似ているけど微妙に違うSNSシェアボタンを作る手順

取り敢えず、細かい話はさておき、これから紹介するコードをコピペすればすぐ完成します。
※これはStinger5の子テーマを使った場合の話です。人それぞれ微妙に違うと思いますが、多分だいたいいけるはずです。

①アイコンフォントをダウンロードして使えるようにしておく。
②はてブ用の関数をfunctions.phpに書く
③HTMLを書く
④CSSを書く
⑤プラグインでシャア数を表示させる

これで出来ます。

①WEBアイコンを駆使して、効率よく洒落れてみる

アイコンをダウンロードする

Webフォントアイコンをダウンロードします。
出来る人はこの段階から気合を入れて自作しても良いのですが、ドウラクのさわさわさんがアイコンを作成し、無料で配布されています。
ブログのデザインでも使用している「Webフォントアイコン」を本当にオススメしたい!

ありがたいことです。

ダウンロードしたら、テーマ直下にアップロードします。

は?と思いまいすよね。私は思いました。

アイコンを使える状態にするFFFTPの場合

先ほどのアイコンのファイルをデスクトップにダウンロードして置いておいて下さい。

まずFFFTPを立ち上げます。立ち上げて、接続は出来るものとして話を進めます。

右側の窓から自分のサイトのドメインを選択し、ダブルクリックでどんどん突き進んで行きます。
「public_html」
 ⇩
「wp-content」
 ⇩
「themes」
 ⇩
「stinger-child」
 ⇩←ここです。
ここが『テーマ直下』です。もう先には行かないで下さい。

そして、今度は左側。

左側の半開きになっているフォルダのアイコンをクリックすると、ファイルを選ぶ場所をパソコンの中から選べます。

デスクトップには「icomoon」がありますよね?

(解凍して)ありますよね?

それを右クリックしてアップロードします。

これで、

ダウンロードしたファイルをテーマ直下にアップ

したことになります。

アイコンを使えるようにする②。CSSの呼び出し。

header.phpを開いて、の前上に以下のコードを貼り付けます。

子テーマの人はこれ。

親テーマの人はこれ。

これで「icomoon」専用のCSSを読み込めるようになりました。

完了です。

はてぶ準備。すぐ終わる。

はてなブックマーク用の準備

他は良いのですが、はてなブックマークだけは一手間あります。

「functions.php」に以下のコードを貼り付けます。
※子テーマを使っていてfunctions.phpがまっさらの人は、一番最初に<?phpを付け足して下さい。
逆に、既に何かしら利用している人で、functions.phpの最後が?php>になっている人は、それよりも上に書いて下さい。

SNSシェアボタンのリスト。HTML編

以下のコードを、「sns.php」か、それ用に新たにファイルを用意して、まるっと貼り付けて下さい。
調子にのって半角スペースじゃなくてTABを使ってみました。

CSS・SNSシェアボタンのリスト

以下のコードを、「style.css」の一番下に貼り付けます。

プラグイン「SNS Count Cache」でシェア数を表示する

SNS Count Cacheというプラグインをインストールします。
プラグインの新規追加画面で検索すれば出てきます。

インストールすれば、勝手に数え始めてくれる素晴らしいシステムです。

作者のまるぼんさんのブログに詳しい事が書いてあります。
・[試] WordPressプラグイン SNS Count Cache (Ver. 0.8.0)リリース | 日本語化、キャッシュ安定性向上等

数はいらないや、という人は上の吹き出しを全部取っ払うか、私のように好きな顔文字でも挿し込んでおけばいいんじゃないでしょうか。

完成予想図

最終的にこんな感じになります。


どうでしょうか。下がオリジナルバージョンです。(※時代が進み、Twitterボタンの雰囲気が変わってしまっています・・・)

どうでしょうか、この微妙な違い。ついでにここでF5ボタンを押して、読み込みの速さの違いを体感して欲しいです。

参考にしたサイト

仕組みから何から全体的にためになる

寝ログにお世話になりました。一から丁寧にわかりやすく書いてあります。
私のようにモノマネするのでなければ、こちらを参考にすると話が早いはずです。

jQueryでシェア数を取得し表示を高速化!WordPressに自作バルーンボタンを作成する全手順まとめ
この記事以外にも参考になるページがあります。仕組みを理解したい方は是非ご覧になって下さい。

WordPressで8種ソーシャルサービスに通常リンクからシェアアクションする方法まとめ

アイコンフォントをダウンロードさせて頂きました

ドラクウさわさわさん

プラグイン:SNS Count Cache

試行錯誤ライフハック:まるぼんさん

まとめ

なんとなく思いつきで始めたらかなり時間を食いました。とくにはてブが。「左側だけ青い」とかしんどかったんですがなんとか妥協できるところまで辿り着きました。

リストの横並びレイアウトはdisplayをinline-blockにするというのが大事なようです。

2015年11月20日以降、Twitterのシェア数が表示されなくなるため、みなさんそれぞれ対応しているようです。

どうなんでしょう。こういうのは変わるサイクルが早いですからね・・・