Close

Web技術Tips

Homepage Tips Homepage Tips

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

SHARE

HTML5 2016.12.15(公開)

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

DOE(横浜)のニュースとブログ

News News

横浜のWeb制作会社DOEはホームページ制作に関連するWeb技術、Webデザイン、SEO対策情報など人気&おすすめ記事を随時公開中です。
尚、Twitterでは現場の声がリアルタイム配信中です。良かったらShareして繋がってください。