くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

SNSシェアボタンを追加するあれこれ(Facebook/Twitter/Google+/はてなブックマーク/LINE/Pocket)

ウェブサイトによくあるSNSのシェアボタン。使いたいなと思い、いろいろ調べたときの備忘録。

アイコンを探す

アイコンは色を変えたりなどしたいので、CSS fontがいい。 - Font AwesomeとかLigature Symbolsを見てみる - なければ、Simple IconsSVGを探して、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スニペットを埋め込む形。

以上!!

参考にしたサイト様