Contents
スポンサードリンク
Share Dialog は URL と少数のクエリパラメータだけで呼び出せ、ユーザー体験を阻害しません。このセクションでは必須パラメータの組み立て方と、Meta for Developers が提供する「Share Button」設定ツールの流れを解説します。
URL パラメータ
href（シェア対象 URL） と app_id（Facebook アプリ ID）の 2 つが最低要件です。app_id を省略するとエラーになるため、テスト環境でも実際に取得した App ID を使用してください。
|
1 2 3 4 5 6 7 |
<a href="https://www.facebook.com/dialog/share? app_id=YOUR_APP_ID& href=https%3A%2F%2Fexample.com%2Farticle.html" target="_blank" rel="noopener noreferrer"> Facebookでシェア </a> |
- 必須：
app_id（数値形式） - 必須：
href（URL エンコード必須）
レイアウト・サイズオプション
公式の「Share Button」ジェネレータでは、ボタン形状 layout と大きさ size を選択できます。デザイン統一性を保ちつつ、ページに最適な見た目を簡単に取得できる点がメリットです。
- https://developers.facebook.com/docs/plugins/share-button?locale=ja_JP にアクセス
- 「URL を入力」欄へシェアしたいページの URL を貼り付け
Layout（button,icon_link,box_countなど）とSize（small,large）を選択- 生成されたコードをコピーして HTML に貼り付け
|
1 2 3 4 5 6 7 8 9 |
<div class="fb-share-button" data-href="https://example.com/article.html" data-layout="button" data-size="large"> </div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v20.0"></script> |
- SDK の
versionは最新のv20.0を使用してください。 - 生成されたスニペットは Facebook が推奨する安全な実装です。
sharer.php は最も軽量なシェア手段で、ボタンの見た目を完全に自由にデザインできます。この章では基本形と quote パラメータ活用時の注意点を紹介します。
基本形（u パラメータだけ）
|
1 2 3 4 5 |
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fpost.html" target="_blank" rel="noopener noreferrer"> <img src="/images/fb-share.png" alt="Facebookでシェア"> </a> |
uにシェアしたいページ URL を URL エンコード して指定します。- JavaScript は不要で、HTML のみで完結できます。
quote パラメータの活用と文字数制限
quote を付与すると、シェア画面に任意テキストがプレビューとして表示されます。ただし自動ハッシュタグやユーザー名の挿入はポリシー違反となります。
|
1 2 3 4 5 6 7 |
<a href="https://www.facebook.com/sharer/sharer.php? u=https%3A%2F%2Fexample.com%2Fpost.html& quote=%E3%80%90%E6%8C%87%E7%A4%BA%E5%AD%97%E5%88%97%E3%80%91%E3%81%93%E3%82%93%E3%81%AB%E3%81%AF%E3%80%81230%E5%AD%97%E7%9A%84%E3%81%AA%E6%96%B0%E8%89%BA%E4%BD%93%E3%81%A7%E3%81%99" target="_blank" rel="noopener noreferrer"> Quote付きでシェア </a> |
quoteは UTF‑8 → URL エンコード が必要です。- 最大文字数は 300 文字（マルチバイト換算）で、超過分は切り捨てられます。
- テキストは「事前入力メッセージ」に留め、ユーザーが自由にコメントを追加できるよう配慮してください。
Open Graph meta タグ設定ガイド（2026年版）
シェア時の見た目は OG タグの品質で決まります。ここでは必須タグと 2026 年現在の画像要件・推奨フォーマットをまとめます。
必須 OG タグ
| タグ | 説明 |
|---|---|
og:title |
ページタイトル（最大 100 文字程度が目安） |
og:description |
要約文。120〜200 文字以内に収めると表示が安定 |
og:image |
サムネイル画像の URL |
og:url |
正規化されたページ URL |
og:type |
多くの場合 website |
|
1 2 3 4 5 6 7 |
<meta property="og:title" content="2026年版 SNS シェア最適化ガイド"> <meta property="og:description" content="Facebook のシェアボタンを自由にカスタマイズする手順とコードサンプルをまとめました。"> <meta property="og:image" content="https://example.com/assets/og-image.webp"> <meta property="og:url" content="https://example.com/share-guide.html"> <meta property="og:type" content="website"> <meta property="og:locale" content="ja_JP"> |
og:imageだけでなく、og:image:widthとog:image:heightを明示すると Facebook が事前にレイアウトを計算でき、デバッグが楽になります。
画像要件と最新推奨フォーマット
| 推奨フォーマット | 最小サイズ | アスペクト比 | 最大ファイルサイズ |
|---|---|---|---|
| WebP / AVIF / JPEG / PNG | 1200×630 px 以上 | 1.91:1（≈ 4:3） | 8 MB |
| SVG（ロゴ等） | 300×300 px 以上 | 正方形 | 2 MB |
- WebP が最も圧縮率が高く、ロード速度向上に寄与します。AVIF でも同様の効果がありますが、一部旧ブラウザでのサポート状況を確認してください。
og:imageのサイズは 1200×630 ピクセル以上 が推奨され、これ未満だと高解像度デバイスでぼやける可能性があります。
|
1 2 3 4 |
<meta property="og:image" content="https://example.com/assets/og-image.webp"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> |
カスタムシェアボタンのデザイン実装
公式プラグインは外観が限定的です。独自デザインを適用したい場合は、sharer.php リンクに任意の HTML/CSS を組み合わせます。
HTML / CSS 基本構造
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fpost.html" class="fb-custom-btn" role="button" aria-label="Facebookでシェア" target="_blank" rel="noopener noreferrer"> <svg width="24" height="24" viewBox="0 0 24 24" fill="#fff" xmlns="http://www.w3.org/2000/svg"> <path d="M22.675 0h-21.35C0.596 0 0 0.597 0 1.333v21.334C0 23.403 .596 24 1.325 24H12.82v-9.294H9.692V11.01h3.128V8.413c0-3.1 1.894-4.788 4.66-4.788 1.325 0 2.463 .099 2.795 .144v3.24l-1.918 .001c-1.504 0-1.796 .715-1.796 1.762V11.01h3.587l-.467 3.696h-3.12V24h6.116C23.404 24 24 23.403 24 22.667V1.333C24 .597 23.404 0 22.675 0z"/> </svg> シェア </a> <style> .fb-custom-btn{ display:inline-flex; align-items:center; background:#1877F2; /* Facebook ブランドカラー */ color:#fff; padding:8px 12px; border-radius:4px; text-decoration:none; transition:background .3s ease, transform .1s ease; } .fb-custom-btn:hover{ background:#145dbf; transform:scale(1.02); } .fb-custom-btn svg{margin-right:6px;} </style> |
role="button"とaria-labelを付与し、アクセシビリティに配慮しています。- カラーは公式の #1877F2（Facebook ブルー）を使用すると認識性が高まります。
アイコン・アニメーション例（Font Awesome）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fpost.html" class="fb-fa-btn" target="_blank" rel="noopener noreferrer" aria-label="Facebookでシェア"> <i class="fab fa-facebook-f"></i> シェア </a> <style> .fb-fa-btn{ background:#1877F2; color:#fff; padding:8px 14px; border-radius:4px; text-decoration:none; font-size:16px; display:inline-flex; align-items:center; transition:background .3s ease, transform .2s ease; } .fb-fa-btn i{margin-right:5px;} .fb-fa-btn:hover{ background:#145dbf; transform:scale(1.05); } </style> |
transform:scale()によるクリック感演出を加えると、ユーザー体験が向上します。- 常に
rel="noopener noreferrer"を付与し、外部リンクによるセキュリティリスクを低減してください。
デバッグとテスト：Sharing Debugger 活用チェックリスト
実装後は必ず Facebook Sharing Debugger で OG タグやキャッシュの状態を確認します。ここでは手順と具体的なチェック項目をまとめました。
キャッシュクリア手順
- https://developers.facebook.com/tools/debug/ にアクセス
- 「URL を入力」欄に対象ページ URL を貼り付けて 「Debug」 をクリック
- 表示された情報の下部にある “Scrape Again” ボタンを押す
Facebook は最初に取得した OG データを 最大 24 時間 キャッシュします。
Scrape Againにより最新情報が即座に反映されます。
プレビュー検証項目
| 項目 | 確認ポイント |
|---|---|
og:title |
正しい文字列か、長すぎて切れていないか |
og:description |
2 行以内で収まり、エンコードが正しく表示されるか |
og:image |
推奨サイズ（≥ 1200×630）・フォーマット（WebP/AVIF 等）が満たされているか |
og:url |
正規化された URL と一致しているか |
quote パラメータ |
文字化けや 300 文字超過がないか |
| キャッシュ状態 | “Fetched from cache” が表示される場合は Scrape Again を再実行 |
- エラーや警告が出たら、デバッグ画面の詳細情報を参考に OG タグを修正し、再度
Scrape Againを実施してください。
まとめ
- Share Dialog は SDK
v20.0と必須app_id・hrefでシンプルに呼び出せます。 - 手軽さが欲しいときは sharer.php、テキスト差し込みは
quote（300文字上限）を活用してください。 - OG タグは最低5項目＋画像サイズ・フォーマットの最新要件を満たすことがシェア成功の鍵です。
- カスタムデザインは HTML/CSS とアクセシビリティ属性を組み合わせ、ブランドカラーと軽いアニメーションで差別化できます。
- 実装後は Sharing Debugger でキャッシュクリアとプレビュー検証を必ず行い、問題が無いことを確認しましょう。
このガイドに沿って実装すれば、2026 年現在の Facebook シェア機能を安全・高速・見た目良く活用できます。 Happy sharing!
スポンサードリンク