HOMEPAGE TIPS BLOG

ホームページ制作TOP > Web技術Tips > SNSのシェアボタンを自前のコードで設置する際のリンク設定まとめ
[期間限定] 標準クオリティープラン  WEBサイト制作20%OFF
失敗しないWeb制作会社の選び方
HTML5

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

HTML52016.12.15

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

注意点

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+

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

PAGE TOP