ようやくできた!ソーシャルボタンをオリジナル(PHP)で作成

 /  Tech

arsp_050
photo credit: Anthony Ryan via photopin (license)

 この記事について:以前からやりたかったオリジナルのソーシャルボタンの作成。なんとか出来上がりましたので備忘録兼ねてメモに残します。

スポンサーリンク

はじめに

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

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

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

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

デザインに制約がある

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

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

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

もはや過去の遺産か

プラグインを使わずにソーシャルボタンを設定しようとかんばっていたのが2013年9月(素人がWordPressでソーシャルボタンを手動設置した際に参考にした記事 | tkimura.info)。今となってはもはや過去の遺産なのでしょうか。

当時いろんなブログ記事を参考にしてソーシャルボタンの設置に取り組んだのですがいくつかリンク切れがあります。時の流れは速い・・・。

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

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

こちらの記事ではボタン作成時のPHPのコードを参考にさせて頂きました。

こちらの記事ではシェア数(ブックマーク数)を取得するPHPのコードを参考にさせて頂きました。

こちらの記事ではPocketのブックマーク数を取得するPHPのコードを参考にさせて頂きました。

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

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

Facebook

Twitter

2016/01/14追記
Twitterのシェア数は廃止に伴い、シェア数を取得・表示する部分を消しました。
旧コード

新コード

はてなブックマーク

Google+

Pocket

やってみたら全然違った

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

おわりに

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

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

 タグ:

スポンサーリンク
スポンサーリンク
Ads by Amazon