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

category_05_m

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

Pocket

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

 

注意点

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カードを設定することで、つぶやいた記事のプレビューを設定できます。

 

参照:Summaryカード — Twitter Developers

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

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. 無料で使える明朝体の日本語WEBフォント
  2. Google Mapがエラーで表示されなくなった場合の直し方
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. スマホサイト制作の基礎知識まとめ
  5. カスタムタクソノミー一覧を任意の順番にソートする方法

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。