プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法 | WEMO
プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法 2019 8/15 SNSシェアボタンをプラグインなしで実装した時の備忘録です。（このブログのシェアボタンはこの記事の方法で実装しています。） PHPだけで実装するパターンと、html(php) + javascriptで実装するパターンの二種類をメモしていきます。アナリティクスとの連携もわかる範囲で合わせてメモ。 今回対応していくのは、 Facebook Twitter Google+ はてな ポケット LINE の６種類のSNSボタンです。 *シェア数の「表示」に関しては、プラグインを頼った実装になります。
SNSボタンの設置方法＆デザインレギュレーション ｜ Tips Note by TAM
セキュリティなどの問題で規約に変更があったり、コードの書き方が微妙に変わっているものがありましたので、2018年12月現在の情報を調べ直してみました。 ※各SNSでは、複数の便利なボタンや埋め込み表示サービスやカスタマイズ方法がありますが、こちらでは「定番のもの」のみをまとめています。 弊社デザイナーに聞いたところ「レギュレーションが意外と厳しい！」との声がありましたので、ボタンやロゴの文言・余白などを調整したい場合は、デザイン規約について触れているページの URL も併せてどうぞ！ （ボタンのカスタマイズ方法は複数ありますが、基本的には「支給されているそのまま」で使うことを推奨。） 目次 Facebook（「いいね！」ボタン、シェアボタン） Twitter（「ツイート」ボタン） LINE（「LINEで送る」ボタン） はてなブックマークボタン Pocketボタン おまけ（Google+、m
SNSのシェアボタンの設置方法まとめ (サンプルコード付き)
サンプルデモ真ん中寄せをして、ウィンドウの横幅が480px以上の場合は、5つのシェアボタンを横並びで表示し、スマホなど、ウィンドウの幅が狭いブラウザでは、LINEを含めた6つのボタンを1行に3つずつ表示するレスポンシブ仕様になっています。ここで表示している個々のボタンは画像を使用していますが、実際と同じように動作するので、ウィンドウの幅を広げたり縮めたりしてみて下さい。実際のシェアボタンでのデモを見たい人は、「サンプルデモを見る」のボタンから別ページにアクセスして下さい。 HTML <h2>シェアボタンの表示</h2> <p>横幅を狭めると、2行になり、LINEボタンが出現します。LINEボタンの画像は、<a href="https://media.line.me/howto/ja/" target="_blank">公式ウェブサイト</a>よりダウンロードする必要があります。</p> <
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
