Thủ Thuật Facebook

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

Posted on by Manh Vinh
各種SNSシェアボタンのURLの書き方まとめ
30
Aug

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

[external_link_head]

この記事では、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」です。

[external_link offset=1]

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

target 属性

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

意味は次のとおりです。

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

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

Twitter

Twitter シェアボタンのURL
     
  1. https://twitter.com/intent/tweet
    2.
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。

例えば、サイトまたは作成者アカウントからの最初のツイートなどです。		 0908603917

リソース: Tweet Button

Facebook

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

パラメーターの意味：

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

リソース: シェアボタン

[external_link offset=2]

LINE

LINEのシェアボタンのURL
     
  1. https://social-plugins.line.me/lineit/share
    2.
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
    2.
はてなブックマークのシェアボタンの書き方
  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}
    2.
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}
    2.
Feedlyのシェアボタンの書き方
  1. <a href="https://feedly.com/i/subscription/feed/{フィードのURL}" 
  2.  target="_blank"
  3.  rel="nofollow noopener noreferrer"
  4. >ここにボタンが入ります。 </a>

リソース: Feedly button [external_footer]

Scores: 4.2 (19 votes)

Manh Vinh