Facebook

Facebookシェアリンクでメッセージをカスタマイズする方法と注意点

ⓘ本ページはプロモーションが含まれています

お得なお知らせ

スポンサードリンク
タイプ別にすぐ選べる

SNS運用のノウハウ、インプット手段はタイプ別に

Instagram・X・TikTokの攻略本は流行り廃りが早いので、読み放題サブスクで"広く・速く"拾うのが正解です。

▷ 個人・副業アカウントでフォロワーを伸ばしたい人（活字でガッツリ派）

Kindle Unlimited 30日無料｜SNSマーケ本読み放題▶

▷ 企業アカ担当・忙しくて読む時間が取れない人（ながら学習派）

オーディオブックAudible

※無料期間中に解約すれば料金は発生しません

▶ 運用ツールや自動化を深掘りしたい方は Appsカテゴリー のツール比較も併せてどうぞ。

スポンサードリンク

1. Facebook Share ボタンの実装概要

Facebook のシェアボタンは次の 2 通りで実装できます。どちらも URL（共有対象ページ） を渡すだけです。

実装方法 主な特徴
HTML 形式（SDK 不要） シンプルな <a> タグに sharer.php の URL を指定するだけ。デザインは自由にカスタマイズ可能。
JavaScript SDK fb-share-button 要素と sdk.js が必要。レイアウトやカウント表示を簡単に切り替えられる。

1‑1. 公式ジェネレータでコード取得

Meta for Developers が提供する Share ボタンジェネレータ（公式ページ）では、対象 URL とオプションを入力すると自動的に HTML スニペットが生成されます。

取得手順

  1. ページ URL を入力
  2. 「コード設定ツール」ボタンをクリック → コードが表示
  3. 必要に応じて SDK 版 と HTML 版 のどちらかをコピー

実装例

HTML 版（SDK 未使用）

SDK 版

実装後は Sharing Debugger（下部参照）でプレビューを確認してください。

2. Open Graph (OG) メタタグの基本設定

シェアカードに表示される情報は OG タグで制御します。必須ではありませんが、未設定だと Facebook が自動的にページ内容を推測し、意図しないプレビューになることがあります。

OG タグ 目的 推奨値
og:title カードの見出し 60文字以内（日本語は約30文字）
og:description 説明文・サブタイトル 110文字前後
og:image サムネイル画像 最小 1200×630px、ファイルサイズ 8 MB 以下、HTTPS 必須
og:url 正規化 URL（canonical） 絶対パスで記載
og:type コンテンツ種別（例: website, article） 任意

実装例（<head> 内）

注意点
- og:image は HTTPS が必須です。
- 複数画像を指定したい場合は <meta property="og:image" …> を複数記述できますが、最初の 1 枚だけがプレビューに使用されます。
- 設定変更後は Sharing Debugger の「再取得」ボタンでキャッシュをクリアしてください。

3. Share ダイアログ URL パラメータの詳細

シェアダイアログ（https://www.facebook.com/sharer/sharer.php）では、以下のクエリパラメータが利用可能です。

パラメータ 必要性 説明
u (href) 必須 共有したいページの URL（URL エンコード必須）
quote 任意 カード下部に表示される引用文。最大 300 文字（正確な上限は公式ドキュメントで確認）。
hashtag 任意 ハッシュタグを自動付加。先頭の # は不要です。1 件まで指定可能。

3‑1. quote パラメータの文字数上限

3‑2. 実装例（エンコード済み）

  • quote に日本語テキストを URL エンコード（encodeURIComponent()）して渡すと、カード下部に「“新問題の公開を共有します”」のように表示されます。
  • ユーザーが自由に入力できるコメント本文は 事前に埋め込むことはできません（後述の公式ポリシー参照）。

4. 「メッセージの事前入力は禁止」の公式根拠

4‑1. Platform Policy の該当項目

このポリシーは 「ユーザーのコメント欄を事前に埋めることは禁止」 であることを明確に示しています。

4‑2. 実装上の留意点

禁止事項 代替手段
quote や OG タグ以外でコメント本文を事前設定すること og:* タグや quote パラメータで情報提供し、ユーザーに自由記入させる
API 経由で message フィールドを送信すること（publish_actions 廃止後） シェアダイアログのみ使用し、ユーザーが最終確認できる UI を確保

5. Graph API / Feed Dialog の利用条件と現在の推奨手段

5‑1. 歴史的背景

  • publish_actions 権限 は 2018 年に廃止。サーバー側から直接投稿できなくなりました。
  • 現在は Share Dialog（UI） と Feed Dialog のみが利用可能で、どちらもユーザーの最終確認が必須です。

5‑2. Feed Dialog の基本構造

  • app_id と redirect_uri は必須。
  • メッセージ本文は入力不可（前述ポリシーと同様）。
  • 現実的には Share Dialog を使用する方が手軽です。

6. デバッグ・検証ツールと実装チェックリスト

6‑1. Sharing Debugger の使い方

公式ツール：https://developers.facebook.com/tools/debug/

  1. URL を入力 → 「デバッグ」 ボタンをクリック
  2. 表示された OG プロパティで og:title、og:description、og:image が正しく取得できているか確認
  3. 変更があれば 「再取得」 を実行してキャッシュをクリア

6‑2. 実装チェックリスト

  • [ ] OG タグ：title / description / image のすべてが設定済み
  • [ ] 画像サイズ：1200×630px 以上、HTTPS が適用されているか
  • [ ] quote／hashtag：URL エンコード済みで正しい文字数・形式になっているか
  • [ ] Sharing Debugger で最新情報が反映されたことを確認（再取得実施）
  • [ ] PC とモバイルの両方でプレビューが期待通りに表示される

6‑3. プライバシーポリシー例文

7. まとめ

  • 実装は HTML または SDK のどちらかで完結。公式ジェネレータを活用するとコード生成が容易です。
  • OG タグでカードの見た目をコントロールし、quote（最大300文字）や hashtag で補足情報を付加できます。
  • ユーザーコメントは事前入力不可 ― 公式 Platform Policy（リンク）に基づき、必ずユーザー自身が入力する UI を提供してください。
  • Feed Dialog / Graph API の直接投稿は廃止されているため、現在は Share Dialog が唯一の推奨手段です。
  • 実装後は Sharing Debugger とチェックリストで必ず検証し、キャッシュや画像サイズの問題を防ぎましょう。

これらのポイントを抑えておけば、Facebook でのシェア体験がスムーズかつポリシー遵守されたものになります。

スポンサードリンク

お得なお知らせ

スポンサードリンク
タイプ別にすぐ選べる

SNS運用のノウハウ、インプット手段はタイプ別に

Instagram・X・TikTokの攻略本は流行り廃りが早いので、読み放題サブスクで"広く・速く"拾うのが正解です。

▷ 個人・副業アカウントでフォロワーを伸ばしたい人（活字でガッツリ派）

Kindle Unlimited 30日無料｜SNSマーケ本読み放題▶

▷ 企業アカ担当・忙しくて読む時間が取れない人（ながら学習派）

オーディオブックAudible

※無料期間中に解約すれば料金は発生しません

▶ 運用ツールや自動化を深掘りしたい方は Appsカテゴリー のツール比較も併せてどうぞ。

-Facebook