ウェブサイトによくあるSNSのシェアボタン。使いたいなと思い、いろいろ調べたときの備忘録。
アイコンを探す
アイコンは色を変えたりなどしたいので、CSS fontがいい。 - Font AwesomeとかLigature Symbolsを見てみる - なければ、Simple IconsでSVGを探して、IcoMoon Appでiconフォントに変換
URLでシェアする場合
基本URLしていでシェアできるので、<a href="...">
などで指定しておけばOK。
const url = "シェアするページのURL" const pageTitle = "シェアするページのタイトル" // Twitterのみ const tweetMessage = "ツイート文" const hashtags = "ハッシュタグのカンマ区切り。Hash,Tag,です" const twitterId = "Twitterアカウント。「@twitterIdさんから」が追加される" const related = "関連するTwitterアカウント。" // Facebook `https://www.facebook.com/share.php?u=${url}` // Twitter `https://twitter.com/intent/tweet?url=${url}&text=${tweetMessage}&hashtags=${hashtags}&via=${twitterId}&related=${related}` // Hatena Bookmark `https://b.hatena.ne.jp/add?mode=confirm&url=${url}&title=${pageTitle}` // Pocket `https://getpocket.com/edit?url=${url}&title=${pageTitle}` // LINE `https://social-plugins.line.me/lineit/share?url=${url}&text=${pageTitle}` // Google puls `https://plus.google.com/share?url=${url}`
公式のシェアボタン
それぞれ公式のシェアボタンが用意されているので、公式アイコンがよければ、こっちが良いかも。 いずれもHTMLスニペットを埋め込む形。
- Twitter: Twitter Publish
- Facebook: シェアボタン - ソーシャルプラグイン
- Line: LINE Social Plugins
- Google+: Share | Google+ Platform for Web | Google Developers
- Pocket: Pocket for Publishers: Pocket Button
以上!!
参考にしたサイト様
- はてなブックマークなどのブランドロゴiconをアイコンフォントにする方法
- Simple Icons
- IcoMoon App - Icon Font, SVG, PDF & PNG Generator
- Ligature Symbols
- Icons | Font Awesome
- WebサイトにSNSシェアボタンを設置&効果測定する方法のまとめ - Qiita
- SNS(Twitter/Facebook/LINE)シェアボタンを超簡単に設置する方法 - Qiita
- オリジナルのシェアボタンを作ろう!各種SNSのボタン設置用URLまとめ | Web Design Trends
- プラグインなしでSNSシェアボタンを自作するための基本知識と実装コード、アナリティクス解析方法 | WEMO