シェアボタン

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

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

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

手順

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

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

2. コード設定ツール

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

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

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

シェアボタン設定ツール

シェアするURL
レイアウト
ボタンサイズ

全コードサンプル

コードサンプルをコピーして自分のウェブサイトに貼り付けてください。data-hrefの値を自分のウェブサイトのURLに変更します。次に、og:***メタタグを使用して、リンクのプレビューを調整します。og:urldata-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属性を設定してブラウザーの遅延読み込みメカニズムを使用します。こうすると、プラグインがビューポートの近くにない場合、ブラウザーはプラグインをレンダリングしないので、プラグインは表示されないかもしれません。truefalse (デフォルト)のいずれか1つを指定できます。

false

layout

data-layout

プラグインに使用できるレイアウトの中から1つ選択します。box_countbutton_countbuttonのいずれかを選択します。

icon_link

mobile_iframe

廃止

data-mobile_iframetrueに設定すると、シェアボタンを押した場合に、(ポップアップではなく)モバイルのウェブサイトの上部のiframeにシェアダイアログが表示されます。このオプションはモバイルでのみ使用できます。デスクトップでは使用できません。詳細については、モバイルサイトシェアダイアログをご覧ください。false

size

data-size

ボタンにはlargesmallの2つのサイズがあります。

small