こんにちは、みいさです😄このサイトはデザインに関係するプラグインを1つも使っていません😉
ここでは、プラグインやらAPIトークンやらを一切使わずに出来る「シェア数付きシェアボタン」の作り方を書いてます😊
簡単なので短い説明で終わっちゃいますけど、ご容赦ください😅
仕組みは、自分のサイトの分析結果を出してくれる「サービス公式の API」から、カウント数だけを抜き出し、html に表示させる…これだけです😉
殆どのサービスが、分析用のアドレスの最後に自分のページのアドレスを付けるだけで、そのページの分析結果を出してくれるアドレス(API)を公開してますから、
(公式の分析用アドレス) + (現在のページのアドレス) ＝ 分析結果
ここから最終的にカウント数だけ頂けばいいんです😄
Twitter は公式でやっておらず、代わりに分析してくれるサイトがありますから、そのサイトへ登録して下さい😉
登録はこちら → widgetoon.js & count.jsoon
Twitter、Facebook、はてなの3つ以外はあまり使われないんだとか😭
その他、pocket に関しては公式 API は存在せず、公式アイコンから更にカウント数だけを抜き取るというやり方はある様ですけど、解りやすく統一された方が好きなので、ここでは触れません😌💧
pocket はアドオンとかでラクラク追加してる人が大半で、ボタンは必要ないとの情報も😅
LINE は拡散効果は無いようで、今はボタンを使う人も少ないでしょうけど、利用者数—S (超スゴイ)なのと、モバイルファースト主義の当サイトで無いのも寂しいから、個人的に付けてます😅
話を戻しましてっ😳❗くわっ
例によって、こんな感じにテンプレートにして呼び出しています😄 解りやすい様に、最後の方のずらずら〜は改行しています💡
このページ自体がデモで、このページの最初と最後にあるシェアボタンは、CSS だけ変えた同じテンプレートのシェアボタンです💡
デザインはお好みでどんな形にも出来ると思いますけど、このサイトでやっているデザインを軽く説明すると…
- リストのスタイルを取り display:flex; で横並びに
- a をdisplay:block; にして大きさを指定
- a に背景画像を付けてアイコンの見た目に
- ul の親要素と li に position:relative; を付け absolute の適用範囲に
- ul を親要素のアイキャッチに重なる様に position:absolute; で位置調整
- リスト内のカウント数を position:absolute; で位置調整
あとは CSS を切ると文字で見れるように、普段は display:none; で消しているテキストもリストに入ってます💡
以上になります😊✨お疲れ様でした😄❗
デザインは好きにやる前提で、でもイメージは湧く様にと、私のサイトの例を書いてるんですけど、解りやすかったでしょうか🙂
また何かあればこのページを更新します😉✨
