ブログやサイトの記事をSNSで共有する為のボタンには、こだわってます。
今回記事タイトルの下に、アニメーション付きのSNS共有ボタンを取り付けました。
モバイルフレンドリー、フラットデザインのご時勢、よりシンプルでかつアピール力のあるボタンを設置する必要を感じたからです。
まずは、SNSボタンを設置する。
WordPressの場合、SNS共有ボタンのプラグインは無数にあります。
今回はその中でもカスタマイズ性に優れた、Simple Share Buttons Adderを使用しました。
プラグインのインストール後は、「インストール済みのプラグイン」一覧のSimple Share Buttons Adderにある「Settings」から各種設定ができます。
設置するSNSの選択や、設置場所は「Core」タブで行います。
僕がこのプラグインの気に入っている点は
①使用できるアイコンの種類が豊富。
（「Styling」タブのImagesのImage setから選択）
さらに、ImagesのImage setから「Custom」を選ぶと、アイコンファイルのアップロードも可能です。
②アイコンの大きさやレイアウトを細かく設定できる。
SNSボタンは表示スペースが限られているので、アイコンの大きさ（Button Size）だけでなく間隔（Padding）を細かく設定出来るのはとても重要。
③表示部のCSSを変更や追加が可能
詳しくは後述しますが、ここにCSS3からサポートされたアニメーション指定を記述します。
僕の場合記事タイトルの直下に設定したので、下の様にアイコンが2行にまたがってしまうと非常に不細工です。
よって、スマホでもアイコンが一行に収まるように大きさと間隔を調節しました。
最近はディスプレーの大型化が進んでいます。しかしまだiPhone5を使っている方もちらほら見受けます。よって回線契約が切れたiPhone5sを持ち出し、レイアウトの確認を行いました。
カウンターなど他にも色々と細かく設定出来るみたいですが、僕がいじったのは上の3箇所です。
SNSボタンにアニメーションを付けてみる。
さて、「CSS」タブに入力するアニメーションですが、「Bounce.js」というCSSアニメーションジェネレーターを使いました。
まずサイトにアクセスし、左上の「ADD CONPONENT」をクリックの上、各種設定をしていきます。
中央の「▶︎PLAY ANIMATION 」でプレビューできますので、色々と試行錯誤して、イメージするアニメーションを作っていきます。
イメージ通りのアニメーションが出来れば、右上の「EXPORT CSS」をクリックしてCSSを書き出します。
書き出されていたCSSは、クラス名が.animatipn-targetになっています。
これらを一旦Simple Share Buttons AddeのCSSタブ内のAdditional CSSの所にコピペし、クラス名をSimple Share Buttons Adderが挿入するボタン達のクラス名（僕の場合は.ssba.ssba-wrap）に変更の上、保存します。
アニメーションの出来具合をスマホやブラウザで確認し、狙った通りイメージでなければ、「Bounce.js」で作り直します。
僕の場合SNSアイコンがボールのように丸いので、ボールがバウンドするような動きを付けてみました。
実際にスマホやブラウザで動き確認してみると、ボタンが読み込まれるのと同時にアニメーションが開始されました。この段階はページの色んな要素が読み込まれている時なので、せっかくのアニメーションでも共有ボタンが目立ちません。
そこでCSSの末尾に
.ssba.ssba-wrap {
-webkit-animation-delay: 5s;
}
を加え、ボタンの読み込みから5秒後（5s）に動き始めるようにしました。
こうする事により、共有ボタンをよりアピール出来るようになると考えたからです。
最後になりましたが、Simple Share Buttons Adderは、今まで使ってみたSNSボタンのプラグインでは最も優れていると感じています。
ちょっと残念なのは、LINEやmixiのボタンが無い点です。日本製ではないので仕方ないのですが・・・
またSNSではないですが、Pocketやはてブのボタンも欲しい所です。
SNS共有ボタンの設置に関しては、ネット上ではブラグインを使用しない方法が色々と紹介されてます。しかし細かくカスタマイズするには、PHP等のプログラミングに通じてないと厳しいと感じています。
若干重くはなるでしょうが、無料のプラグインとツールで、いとも簡単にここまで出来るとはWordPress、やっぱ凄いなと感じました。