各種SNSシェアボタンのURLの書き方まとめ

シェアボタンはウェブページの訪問者にSNSでシェアしてもらう有効な方法です。しかし、SNSごとにボタンのリンク方法は異なります。

この記事では、Twitter,Facebook,LINE,はてなブックマーク,Pocket,さらにFeedlyのシェアリンクの書き方をまとめています。JavaScriptを使わない最も簡単な方法を解説していますので、導入はとても簡単です。

各SNSで共通のこと: <a>要素に関して

URLのパーセントエンコード

URLの中で使用できる文字というのは規格で決まっており、それはIETFによる RFC2396 と RFC3986 で定義されています。

例えば、「https://example.com」をTwitterでシェアする場合、「https://twitter.com/intent/tweet?url=https://example.com」としたいところですが、これは間違いであり、正しくは「https://twitter.com/intent/tweet?url=https%3A%2F%2Fexample.com」です。

しかしながら、多くのSNSがパーセントエンコードを行わなくても問題なく動作するようなので、本記事ではパーセントエンコードを行った説明をしていません。試してみて、文字化けするなどした場合はパーセントエンコードを見直してみてください。

target 属性

可能ならば rel="nofollow noopener noreferrer" を追加しておくと良いでしょう。

意味は次のとおりです。

  • nofollow– 検索エンジンにリンクを辿らないように指示します。
  • noopener– リンク先のページをリンク元のページとは別プロセスで開くようブラウザに指示します。
  • noreferrer– リンク先にリンク元情報 (Referer) を通史しないようにブラウザに指示します。

因みに、WordPressで「新しいタブで開く」でリンクすると、 noopener と noreferrer がセットされるようです。

Twitter

Twitter シェアボタンのURL
  1. https://twitter.com/intent/tweet
Twitter のシェアボタンの書き方(全パラメーター使用時)
  1. <a href="https://twitter.com/intent/tweet?
  2. text={ツイートテキスト}&
  3. url={ウェブページのURL}&
  4. hashtags={ハッシュタグ}&
  5. via={Twitterユーザー名}&
  6. related={追加のTwitterユーザー名}&
  7. in-reply-to={親ツイートのID}"
  8. target="_blank"
  9. rel="nofollow noopener noreferrer"
  10. >ここにアイコンが入ります。</a>

パラメーターの意味:

パラメーター説明
text事前に設定された Tweet テキスト。Hello%20World
urlウェブページのURL。
HTTPまたはHTTPSスキームの完全修飾で記述します。
https%3A%2F%2Fexample.com%2F
hashtagsハッシュタグ。
複数の場合はコンマで区切ります。
nature,sunset
viaサイトのTwitterアカウントなど、ツイートに関連付けるTwitterユーザー名。
指定されたユーザー名は、「via @username」というテキストと共にツイートの最後に追加されます。アカウントは、ユーザーがツイートを投稿した後にフォローするアカウントとして提案される場合があります。
twitterdev
relatedツイートに関連する追加のTwitterユーザー名。
複数の場合はコンマで区切ります。ユーザー名の後にURLエンコードされたコンマとテキストを使用して、アカウントがツイートにどのように関連するかについての簡単な説明を提供できます。
twitter%3ATwitter%20News,twitterapi%3ATwitter%20API%20News
in-reply-to会話内の親ツイートのツイートID。
例えば、サイトまたは作成者アカウントからの最初のツイートなどです。
525001166233403393

リソース: Tweet Button

Facebook

FacebookのシェアボタンのURL
  1. https://www.facebook.com/sharer/sharer.php
Facebookのシェアボタンの書き方(全パラメーター使用時)
  1. <a href="https://www.facebook.com/sharer/sharer.php?u={ウェブページのURL}"
  2. target="_blank"
  3. rel="nofollow noopener noreferrer"
  4. >ここにアイコンが入ります。</a>

パラメーターの意味:

パラメーター説明
uウェブページの絶対URLhttps%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F

リソース: シェアボタン

LINE

LINEのシェアボタンのURL
  1. https://social-plugins.line.me/lineit/share
LINEのシェアボタンの書き方
  1. <a href="https://social-plugins.line.me/lineit/share?url={ウェブページのURL}"
  2. target="_blank"
  3. rel="nofollow noopener noreferrer"
  4. >ここにアイコンが入ります。</a>

リソース: LINE Social Plugins

はてなブックマーク

はてなブックマークのシェアボタンのURL
  1. http://b.hatena.ne.jp/add
はてなブックマークのシェアボタンの書き方
  1. <a href="http://b.hatena.ne.jp/add?&url={ウェブページのURL}"
  2. target="_blank"
  3. rel="nofollow noopener noreferrer"
  4. >ここにアイコンが入ります。</a>

リソース: はてなブックマークボタンの作成・設置について

Pocket

PocketのシェアボタンのURL
  1. https://getpocket.com/edit?url={URL}
Pocketのシェアボタンの書き方
  1. <a href="https://getpocket.com/edit?url={URL}"
  2. target="_blank"
  3. rel="nofollow noopener noreferrer"
  4. >ここにボタンが入ります。</a>

リソース: Pocket Button

Feedly

FeedlyのシェアボタンのURL
  1. https://feedly.com/i/subscription/feed/{フィードのURL}
Feedlyのシェアボタンの書き方
  1. <a href="https://feedly.com/i/subscription/feed/{フィードのURL}"
  2. target="_blank"
  3. rel="nofollow noopener noreferrer"
  4. >ここにボタンが入ります。 </a>

リソース: Feedly button