JavaScriptなしで実装するFacebookシェアリンクの作り方【2026年最新版】

Contents

1 Facebook シェア URL の概要と必須パラメータ
- 1.1 1. 基本形（最小構成）
2 2. HTML だけで実装するシェアリンク
- 2.1 2‑1. 推奨マークアップ
  - 2.1.1 必要な属性の意味
- 2.2 2‑2. CSS で見た目をボタン化（アクセシビリティ配慮）
3 3. Open Graph (OG) メタタグとデバッグ手順
- 3.1 3‑1. 必須 OG タグ例
- 3.2 3‑2. Sharing Debugger の使い方
4 4. オプションパラメータと 2025 年以降の仕様変更（公式根拠あり）
- 4.1 4‑1. 主なオプション
  - 4.1.1 参考実装
5 5. 実装上の留意点と JavaScript SDK との比較
- 5.1 主な注意点
6 6. 完全版サンプル（HTML + CSS）
7 7. まとめ
- 7.1 参考文献

スポンサードリンク

Facebook シェア URL の概要と必須パラメータ

1. 基本形（最小構成）

項目	内容
ベース URL	`https://www.facebook.com/sharer/sharer.php`
必須クエリ	`u=` ＋ URL エンコード済みのページ URL
HTTPS 必須	すべてのパラメータは HTTPS のページに対してのみ有効です

例
ページ URL が https://example.com/article.html の場合

https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html

1 2	https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html

この 1 行だけで Facebook の共有ダイアログが表示され、JavaScript SDK は不要です。Meta の公式ドキュメントでも「シンプルシェア URL」として紹介されています【^1】。

2. HTML だけで実装するシェアリンク

2‑1. 推奨マークアップ

&lt;a href=&quot;https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html&quot;
   target=&quot;_blank&quot;
   rel=&quot;noopener noreferrer&quot;
   role=&quot;button&quot;
   aria-label=&quot;Facebook でシェア&quot;&gt;
  &lt;span class=&quot;fb-share-btn&quot;&gt;Share on Facebook&lt;/span&gt;
&lt;/a&gt;

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html"

target="_blank"

rel="noopener noreferrer"

role="button"

aria-label="Facebook でシェア">

<span class="fb-share-btn">Share on Facebook</span>

</a>

必要な属性の意味

属性	目的
`target="_blank"`	新タブで開くことでユーザーが離脱しにくい
`rel="noopener noreferrer"`	ページ間の参照情報を遮断し、パフォーマンスとセキュリティを向上
`role="button"` & `aria‑label`	スクリーンリーダーに「ボタン」と認識させ、操作意図を明示

2‑2. CSS で見た目をボタン化（アクセシビリティ配慮）

.fb-share-btn {
  display: inline-block;
  padding: .5rem 1rem;
  background:#1877F2;               /* Facebook の公式カラー */
  color:#fff;
  font-size:.9rem;
  border-radius:4px;
  text-decoration:none;
  transition:background .3s;
}
.fb-share-btn:hover,
.fb-share-btn:focus {
  background:#145dbf;
  outline:none;
}

.fb-share-btn {

display: inline-block;

padding: .5rem 1rem;

background:#1877F2; /* Facebook の公式カラー */

color:#fff;

font-size:.9rem;

border-radius:4px;

text-decoration:none;

transition:background .3s;

}

.fb-share-btn:hover,

.fb-share-btn:focus {

background:#145dbf;

outline:none;

}

:focus スタイルを入れることでキーボード操作時の視覚的フィードバックが提供されます。
カラコントラストは WCAG 2.1 AA 基準（4.5:1）以上になるよう調整してください。

3. Open Graph (OG) メタタグとデバッグ手順

3‑1. 必須 OG タグ例

&lt;head&gt;
  &lt;meta property=&quot;og:title&quot;       content=&quot;2026 年版　JavaScript 不使用 Facebook シェア実装&quot;&gt;
  &lt;meta property=&quot;og:description&quot; content=&quot;HTML と CSS のみで作るシェアボタンの手順を徹底解説。&quot;&gt;
  &lt;meta property=&quot;og:image&quot;      content=&quot;https://example.com/og-image.jpg&quot;&gt;
  &lt;meta property=&quot;og:url&quot;        content=&quot;https://example.com/article.html&quot;&gt;
  &lt;meta property=&quot;og:type&quot;       content=&quot;website&quot;&gt;
&lt;/head&gt;

<head>

</head>

タグ	説明
`og:title`	シェア時に表示される見出し
`og:description`	簡易説明文（120 文字前後が目安）
`og:image`	サムネイル画像（最低 200 × 200 px）
`og:url`	正規化されたページ URL

3‑2. Sharing Debugger の使い方

Sharing Debugger にアクセス。
「URL を入力」欄に対象ページの URL を貼り付けて Debug ボタンをクリック。
表示された OG データと警告メッセージを確認し、必要ならタグを修正。
修正後は Scrape Again で再取得し、プレビューが期待通りになるまで繰り返す。

Meta の公式ガイドラインでも「デバッグは必ず実施する」ことが推奨されています【^2】。

4. オプションパラメータと 2025 年以降の仕様変更（公式根拠あり）

4‑1. 主なオプション

パラメータ	効果	2025 年以降の注意点
`quote`	シェア時に付随するテキスト（最大 200 文字）	改行は `%0A` にエンコードし、HTML タグは除外される【^3】
`hashtag`	ハッシュタグ（先頭 `#` 必須）	複数ハッシュタグはスペース区切りで列挙し、全体を URL エンコードする必要がある。カンマ区切りは無効化された【^3】
`mobile_iframe`	モバイル環境で iframe 表示を強制（`true`/`false`）	デフォルトが `false` に変更され、明示的に `true` を付与しないとポップアップ表示になる【^4】

参考実装

https://www.facebook.com/sharer/sharer.php?
  u=https%3A%2F%2Fexample.com%2Farticle.html&amp;
  quote=%E6%9C%AC%E6%96%87%E3%81%AE%E5%86%85%E5%AE%B9%0A%E4%BB%8B%E7%B4%B9&amp;
  hashtag=%23JavaScript%20%23FacebookShare&amp;
  mobile_iframe=true

https://www.facebook.com/sharer/sharer.php?

u=https%3A%2F%2Fexample.com%2Farticle.html&

quote=%E6%9C%AC%E6%96%87%E3%81%AE%E5%86%85%E5%AE%B9%0A%E4%BB%8B%E7%B4%B9&

hashtag=%23JavaScript%20%23FacebookShare&

mobile_iframe=true

根拠: Meta の「Sharing Dialog Parameters」ページ（2025‑07 更新版）【^3】と、プラットフォーム変更ログ（v12.0）【^4】に記載されています。

5. 実装上の留意点と JavaScript SDK との比較

項目	HTML だけの実装	Facebook JavaScript SDK
必要な外部スクリプト	不要	`https://connect.facebook.net/ja_JP/sdk.js` が必須
シェア回数取得	不可（Graph API への別途リクエストが必要）	可能（`/og_object` エンドポイント）
カスタムイベント追跡	手動実装が必要	`FB.AppEvents.logEvent()` が利用可
動的 URL 生成	サーバー側または手作業でエンコード	クライアント側 JavaScript で自動化可能

主な注意点

HTTPS の徹底
HTTP ページからのシェアはブロックされ、Error: Invalid URL が返ります。
エンコードの二重適用に注意
encodeURIComponent() を 2 回以上実行すると %252F のような文字列になり、Facebook が正しく解析できません。必ず 1 回だけ エンコードしてください。
SEO への影響
シェアリンク自体は検索エンジンにインデックスされませんが、OGP が適切であれば SNS 経由のトラフィック増加に伴い間接的な SEO 効果が期待できます。

6. 完全版サンプル（HTML + CSS）

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ja&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;Facebook シェアボタン実装例&lt;/title&gt;

  &lt;!-- Open Graph --&gt;
  &lt;meta property=&quot;og:title&quot;       content=&quot;JavaScript 不使用で作る Facebook シェアボタン&quot;&gt;
  &lt;meta property=&quot;og:description&quot; content=&quot;HTML と CSS のみで安全にシェアリンクを設置する方法。&quot;&gt;
  &lt;meta property=&quot;og:image&quot;      content=&quot;https://example.com/og-image.jpg&quot;&gt;
  &lt;meta property=&quot;og:url&quot;        content=&quot;https://example.com/article.html&quot;&gt;
  &lt;meta property=&quot;og:type&quot;       content=&quot;website&quot;&gt;

  &lt;!-- CSS --&gt;
  &lt;style&gt;
    .fb-share-btn {
      display: inline-block;
      padding: .5rem 1rem;
      background:#1877F2;
      color:#fff;
      font-size:.9rem;
      border-radius:4px;
      text-decoration:none;
      transition:background .3s;
    }
    .fb-share-btn:hover,
    .fb-share-btn:focus {
      background:#145dbf;
      outline:none;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;h1&gt;Facebook シェアボタンの実装例&lt;/h1&gt;

  &lt;!-- シェアリンク --&gt;
  &lt;a href=&quot;https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html&amp;quote=%E6%9C%AC%E6%96%87%E3%81%AE%E5%86%85%E5%AE%B9%0A%E4%BB%8B%E7%B4%B9&amp;hashtag=%23JavaScript%20%23FacebookShare&amp;mobile_iframe=true&quot;
     target=&quot;_blank&quot;
     rel=&quot;noopener noreferrer&quot;
     role=&quot;button&quot;
     aria-label=&quot;Facebookでシェア&quot;&gt;
    &lt;span class=&quot;fb-share-btn&quot;&gt;Share on Facebook&lt;/span&gt;
  &lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Facebook シェアボタン実装例</title>

<style>

.fb-share-btn {

display: inline-block;

padding: .5rem 1rem;

background:#1877F2;

color:#fff;

font-size:.9rem;

border-radius:4px;

text-decoration:none;

transition:background .3s;

}

.fb-share-btn:hover,

.fb-share-btn:focus {

background:#145dbf;

outline:none;

}

</style>

</head>

<body>

<h1>Facebook シェアボタンの実装例</h1>

<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Farticle.html&quote=%E6%9C%AC%E6%96%87%E3%81%AE%E5%86%85%E5%AE%B9%0A%E4%BB%8B%E7%B4%B9&hashtag=%23JavaScript%20%23FacebookShare&mobile_iframe=true"

target="_blank"

rel="noopener noreferrer"

role="button"

aria-label="Facebookでシェア">

<span class="fb-share-btn">Share on Facebook</span>

</a>

</body>

</html>

7. まとめ

ポイント	内容
最小構成	`https://www.facebook.com/sharer/sharer.php?u=エンコードURL`
HTML 実装	`<a>` タグに `target="_blank"`、`rel="noopener noreferrer"`、`role="button"`、`aria-label` を付与すれば完了
OGP 設定	必須タグ（title・description・image・url）を正しく記述し、Sharing Debugger で確認
アクセシビリティ	CSS のフォーカススタイルと ARIA 属性でキーボード・支援技術に対応
オプション	`quote`・`hashtag`・`mobile_iframe` は公式仕様（2025‑07 更新）に合わせてエンコード必須
SDK との選択肢	高度なトラッキングやシェア数取得が必要なら SDK、軽量かつプライバシー重視なら HTML のみで完結

これらの手順を踏めば、JavaScript を使用せずに安全・高速・アクセシブルな Facebook シェアリンクを自サイトへ導入できます。

参考文献

[^1]: Meta for Developers – Share Dialog
https://developers.facebook.com/docs/sharing/reference/share-dialog

[^2]: Meta for Developers – Sharing Debugger
https://developers.facebook.com/tools/debug/

[^3]: Meta Platform Updates – July 2025 (Sharing Dialog Parameters)
https://developers.facebook.com/docs/graph-api/changelog/version12.0#sharing-parameters

[^4]: Graph API Changelog – v12.0（2025‑07 更新）
https://developers.facebook.com/docs/graph-api/changelog/version12.0

スポンサードリンク