tkimura.info

はじめに

1年以上このブログをほったらかしにしていましたが、CSSフレームワークのバージョンアップに伴う修正作業の必要もあって久しぶりにWordPressを触りました。その中で以前からやりたかったオリジナルのソーシャルボタンの作成。なんとか出来上がりましたので備忘録兼ねてメモに残します。

以前から工夫していたけどやっぱり気になっていた

ソーシャルボタンは読み込みに時間がかかる

ソーシャルボタンはどうしても読み込みに時間がかかりました。なので、ソーシャルボタンの設置する数を減らしたり、非同期読み込みをさせたりと出来る限りの工夫をしてきました。しかし、ページを表示させた時、記事をスクロールさせている最中にどうしても引っかかる感じは残っていました。

デザインに制約がある

デザインうんぬんを語るほどの腕なんぞまったくないのですが一応気を遣うところでした。ソーシャルボタンは形が決められています。だから、ソーシャルボタンを自分のブログにどうやって馴染ませるかみたいなところは工夫していましたが、正直無理やりな感じはありました。

数が増えれば書くコードも増える

当たり前と言えば当たり前ですが、設置するソーシャルボタンの数が多ければそれだけ必要なコードが増えます。ページ表示時間短縮のためにbodyタグの直前にjavascriptのコードを書いていましたが、ソーシャルボタンの数が多ければそれだけソースが長くなる訳でして。とりあえず放り込むように書いていたコードは気になっていました。

いくつかの記事を参考にさせて頂きました

さて、オリジナルで作成しようと思い早速調べてみました。すると、とても参考になる記事がありました。今回はこちらの記事を参考に作成に取り掛かりました。

なんとか書いてみたPHPのコード

記事を参考にしながらオリジナルボタンの作成に取り掛かり完成したPHPのコードがこちらです。WordPressで使われるsingle.phpに書いています。最終的にはaタグ（リンク）を新しいウインドウを開く形で出力させており、見た目（HTMLやCSS）などは別途個別に設定しています。

Facebook

Twitter

はてなブックマーク

Google+

Pocket

やってみたら全然違った

公式のソーシャルボタンを設置していた時と比べてページを表示させた時の引っかかる感じが無くなり、見た目もスッキリ。HTMLやCSSもシンプルに。つかえが取れました。

おわりに

ソーシャルボタンを設置しようとツールを使ったりプラグインを使ったりしていたのが一番最初。それから、自分でコードを書いていい感じに公式のソーシャルボタンを設置してみようとやってみて。ちょうどこの頃にWordPressの高速化に取り組んでみたり。

いろいろ試行錯誤してきた中で常にソーシャルボタンの読み込みには悩まされてきました。それで今回ソーシャルボタンの読み込みの悩みが解消されたおかげか、束縛から解放されたような気分です（言い過ぎ！？）。