SNSのシェアボタンを自前のコードで設置する際のリンク設定まとめ

主要なものをまとめてみました。主に自分用ですが、よければ参考にして下さい。

注意点

sampleコードのダミーテキストについて

sampleコードのダミーテキストには正しいコードを当てはめて下さい。

###url###	リンクurlを入れて下さい
###text###	テキストを入れて下さい

日本語URLを使用する場合は

URLの一部に日本語が入っている場合はパーセントエンコーディングをしてURLエスケープをしておきます。

URLエンコード・デコード｜日本語URLをサクッと変換 | すぐに使える便利なWEBツール | Tech-Unlimited

phpの場合は rawurlencode() 関数を使うことでパーセントエンコーディングが出来ます。

Twitter

sample

https://twitter.com/share?url=###url###&text=###text###

パラメータ

参照：Tweet Button Parameter Reference — Twitter Developers

パラメータ	意味	必須
url	ツイートに含めるURL	◯
text	事前入力済みのテキスト
hashtags	ハッシュタグ
via	アカウント名
related	ツイート後にこのアカウントへのフォローを促す

Summaryカード

 

TwitterではSummaryカードを設定することで、Twitter上での記事のプレビューを設定できます。

Facebook

sample

https://www.facebook.com/sharer/sharer.php?u=###url###

OGP設定

OGPを設定することでFacebookでリンクをシェアしたときのプレビューを設定できます。

OGPを設定するためにはFacebook Developersでの新規アプリの作成と、metaタグの設定をします。

参照：Open Graph story - シェア機能

OGP設定はFacebook以外でも有効になる場合があるようです。（Google+、Linkedin等）

Google+

※Google+ は2019年にサービス終了しました。

sample

https://plus.google.com/share?url=###url###

はてなブックマーク

sample

http://b.hatena.ne.jp/add?url=###url###

もしくは

http://b.hatena.ne.jp/entry/###http://なしのurl###

後者はブックマークのコメントが表示されるので、こっちを使ったほうが良さそうです。

LINE

sample

http://line.me/R/msg/text/?###url###

LINEのシェアボタンはiOSとAndroidのみ有効です。

PCで押すとLINEのWEBサイトに行くだけで特に何もありません。

feedly

feedlyボタンはRSSリーダーへの登録なので、厳密にはシェアボタンではありませんが、一応ご紹介。

###feedurl###にサイトのフィードURLを置換します。

sample

http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2F###feedurl###

pocket

sample

http://getpocket.com/edit?url=###url###

Linkedin

sample

http://www.linkedin.com/shareArticle?mini=true&url=###url###

まとめ

SNSのシェアボタンは、自動生成されたコードで設定するよりもオリジナルで作ったほうがかっこいい感じになるので、デザインにこだわるなら独自カスタマイズがおすすめです。