シェアボタン

シェアボタンがあれば、利用者はパーソナライズしたメッセージをリンクに追加してから、Facebook Messageで自分のタイムライン、グループ、または友達にシェアできます。

iOSやAndroidのネイティブアプリの場合は、ネイティブのiOS版シェアダイアログとAndroid版シェアダイアログを使用することをおすすめします。

ウェブサイトでシェアダイアログを開くためのボタンを使用しない場合や、Facebookが提供するボタンがウェブサイトのデザインに合わない場合は、リンクをシェアするためのウェブ版シェアダイアログを使用することもできます。このプラグインを使用するために、Facebookログインを実装したり、アプリレビューを通じて追加のアクセス許可をリクエストしたりする必要はありません。

シェアボタン設定ツール
コードサンプル
設定
よくある質問

手順

1. URLまたはFacebookページを選択する

シェア対象のウェブサイトまたはFacebookページのURLを選択します。

2. コード設定ツール

URLをコード設定ツールに貼り付け、シェアボタンのlayout設定を調整します。シェアボタンのコードを生成するには、Get Codeボタンをクリックします。

3.HTMLスニペットをコピーして貼り付ける

スニペットをコピーし、埋め込み動画プレイヤーを設置するウェブサイトのHTMLに貼り付けます。

シェアボタン設定ツール

シェアするURL

レイアウト

button_count

ボタンサイズ

small

コードを取得

全コードサンプル

コードサンプルをコピーして自分のウェブサイトに貼り付けてください。data-hrefの値を自分のウェブサイトのURLに変更します。次に、og:***メタタグを使用して、リンクのプレビューを調整します。og:urlとdata-hrefには同じURLを使用してください。

<html>
<head>
<title>Your Website Title</title>
<!-- You can use Open Graph tags to customize link previews.
Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
<meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
<meta property="og:type"          content="website" />
<meta property="og:title"         content="Your Website Title" />
<meta property="og:description"   content="Your description" />
<meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

<!-- Load Facebook SDK for JavaScript -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- Your share button code -->
<div class="fb-share-button" 
data-href="https://www.your-domain.com/your-page.html" 
data-layout="button_count">
</div>

</body>
</html>

設定

設定	HTML5属性	説明	デフォルト
`href`	`data-href`	シェアされるページの絶対URLです。	XFBMLバージョンとHTML5バージョンでは現在のURLがデフォルトとなります。
`lazy`	`data-lazy`	`true`を指定すると、`loading="lazy"` iframe属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。`true`、`false` (デフォルト)のいずれか1つを指定できます。	`false`
`layout`	`data-layout`	プラグインに使用できるレイアウトの中から1つ選択します。`box_count`、`button_count`、`button`のいずれかを選択します。	`icon_link`
~~`mobile_iframe`~~ 廃止	~~`data-mobile_iframe`~~	`true`に設定すると、シェアボタンを押した場合に、(ポップアップではなく)モバイルのウェブサイトの上部のiframeにシェアダイアログが表示されます。このオプションはモバイルでのみ使用できます。デスクトップでは使用できません。詳細については、モバイルサイトシェアダイアログをご覧ください。	~~`false`~~
`size`	`data-size`	ボタンには`large`と`small`の2つのサイズがあります。	`small`