シェアボタン・フォローの案内・投稿の埋め込みを7つの型に分け、AIへの指示文・動く見本・コードを載せています。
SNSはどの型を選ぶか
サイトに SNS を置く目的は、大きく分けて3つです。記事を人に送ってもらう（シェア）、公式アカウントを知ってもらう（フォロー）、SNS の投稿をサイトでも見せる（埋め込み）。まず目的を1つ決めてから型を選びます。シェアの型は組み合わせて使うこともできます。
| こんなとき | 向いている型 |
|---|---|
| 読み物の記事を、読み終えた人に送ってほしい | 記事末尾シェア型 |
| SNS よりも、社内のチャットやメールで回されることが多い | URLコピーつき型 |
| 長い記事で、途中でも送れるようにしたい | 追従シェア型（記事末尾シェア型と組み合わせる） |
| 読み手の多くがスマホで、ボタンを何個も置きたくない | 共有シート型 |
| PC で見た人にスマホで読み返してほしい、店頭や説明会で案内したい | QRコード併記型 |
| 公式アカウントのフォロワーを増やしたい | フォロー導線型 |
| 写真の多い SNS の投稿を、サイトでも見せたい | 投稿の埋め込み型 |
記事末尾シェア型の並びに「共有する」ボタンを1個加え、共有シート型の働きを持たせることもできます。
どの型でも守ること
- 各 SNS が配る公式のスクリプトを、何本も読み込まない。シェアボタンはリンクで作れます。読み込みが減り、ページの表示も速くなります。
- 並べる SNS を絞る。読み手がよく使うものを2〜3個にします。押されないボタンが増えると、本命のボタンが埋もれます。
- ボタンの名前で、何が起きるかを伝える。絵柄しかないボタンは、
aria-labelに「Xでポスト」などの名前を入れます。 - ロゴを使うときは、各社の利用規定を読む。色や形を変えてはいけない決まりがあります。ここの見本では、ロゴの代わりに文字だけのボタンを使いました。
- 別のタブで開くリンクには
rel="noopener"を付ける。
よくある質問 (FAQ)
SNS は2〜3個に、URL のコピーを1つ足した数が目安です。読み手がよく使う SNS は、サイトの分野や年代で変わります。アクセス解析で、どの SNS から来た人が多いかを見て決めます。
ページを開くたびに、各社のスクリプトを読み込むことになるからです。表示が遅くなるうえ、読み手の閲覧の情報が各社に送られます。各社が用意している共有用 URL に飛ぶ、ただのリンクにしておけば、通信が起きるのは押したときだけです。
スマホのブラウザの多くと、一部のパソコンのブラウザで使えます。使えるのは https のページで、ボタンを押したときだけです。使えない環境のために、URL をクリップボードへ写す代わりの動きを必ず入れておきます。
Instagram のビジネス用またはクリエイター用のアカウントと、Meta が出している API の利用の手続きが要ります。取得した投稿は自分のサーバーで受け取り、JSON にしてページへ渡します。アクセストークンはページの JavaScript に書かず、期限が切れる前に更新します。