SNSボタンなら、ユーザビリティに優れたCSSフラットボタンが「いいね!」

SNSボタン

いま風のフラットデザインのSNSボタンを記事下に設置してみました(=゚ω゚)ノ

SNS公式ボタンは重い。

SNSボタンの代名詞と言えば、「いいね!」ですよね。ブログメディア運営をやろうと、YouTubeの運営をやろうと、無視できない存在です。

ブログに埋め込むにしても、公式がきちんと準備してくれてるし、プラグインとかも充実しています。

しかし、公式のボタンを直接埋め込むと、読み込み速度が遅くなります。公式ボタンを設置したサイトでは、そのサイトの読み込みとは別に、一度ボタンの情報(画像とかCSSとか)を公式サイトまで読み込みに行きます。余計な通信が発生するわけですね。

最初は『WP Social Bookmarking Light』というプラグインを使って設置してみたのですが、設置できるのが公式ボタンで、読み込みが遅いので、さっさと消去してしまいました(´・ω・`)

(2016年6月23日追記):実験的に復活しますた。CSSフラットボタンの替わりに、『WP Social Bookmarking Light』で作ったボタンを並べてます(=゚ω゚)ノ

 

SNS公式ボタンは押しにくい。

スマホサイトとかで、ソーシャルボタンがズラーッ並んでるの見た事ありますか?たまに見かけるんですけどね、

 

押させる気あるの?

 

って真面目に心配しちゃいますw

なので、たまに実装してるのを見かける幅広でフラットデザインのSNSボタンは、スマホとかからシェアしたい時にはかなり有効なんじゃないかと。ユーザービリティ大切ですよね。

 

CSSで実装するカスタムSNSボタンは軽くて押し易い

1から作り直すのも面倒なので、CSSで実装するSNSボタンのコードとか公開してるところはないかなあ・・・っとググって見ると、ありました。

今どきのフラットなソーシャルボタンをWordPressに実装したのでソースコードを公開!

こちらで公開されているコードをコピペ!ちょくちょくっとCSSを調整して綺麗なボタンの出来上がりっと。いやあ、なんてありがたいんだ・・・。

ちなみに記事内ではsingle.phpにHTMLコードを書き込む用に説明されていますが、僕はcontent.phpの方に書き込みました。

・・・というか、content.phpの中で is_single() 関数を使った条件分岐を作ったのから、その中に放り込んだんですけど、はじめからsingle.phpを使えば良かったのか・・・ひとつ勉強になりました(´・ω・`)

Pocket