シェアボタンはウェブページの訪問者にSNSでシェアしてもらう有効な方法です。しかし、SNSごとにボタンのリンク方法は異なります。
[external_link_head]この記事では、Twitter，Facebook，LINE，はてなブックマーク，Pocket，さらにFeedlyのシェアリンクの書き方をまとめています。JavaScriptを使わない最も簡単な方法を解説していますので、導入はとても簡単です。
Mục Lục
各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 がセットされるようです。
- https://twitter.com/intent/tweet
- <a href="https://twitter.com/intent/tweet?
- text={ツイートテキスト}&
- url={ウェブページのURL}&
- hashtags={ハッシュタグ}&
- via={Twitterユーザー名}&
- related={追加のTwitterユーザー名}＆
- in-reply-to={親ツイートのID}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにアイコンが入ります。</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。 例えば、サイトまたは作成者アカウントからの最初のツイートなどです。 |
0908603917 |
リソース: Tweet Button
- https://www.facebook.com/sharer/sharer.php
- <a href="https://www.facebook.com/sharer/sharer.php?u={ウェブページのURL}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにアイコンが入ります。</a>
パラメーターの意味：
| パラメーター | 説明 | 例 |
|---|---|---|
| u | ウェブページの絶対URL | https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F |
リソース: シェアボタン
[external_link offset=2]LINE
- https://social-plugins.line.me/lineit/share
- <a href="https://social-plugins.line.me/lineit/share?url={ウェブページのURL}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにアイコンが入ります。</a>
リソース: LINE Social Plugins
はてなブックマーク
- http://b.hatena.ne.jp/add
- <a href="http://b.hatena.ne.jp/add?&url={ウェブページのURL}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにアイコンが入ります。</a>
リソース: はてなブックマークボタンの作成・設置について
- https://getpocket.com/edit?url={URL}
- <a href="https://getpocket.com/edit?url={URL}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにボタンが入ります。</a>
リソース: Pocket Button
Feedly
- https://feedly.com/i/subscription/feed/{フィードのURL}
- <a href="https://feedly.com/i/subscription/feed/{フィードのURL}"
- target="_blank"
- rel="nofollow noopener noreferrer"
- >ここにボタンが入ります。 </a>
リソース: Feedly button [external_footer]