2018年11月10日更新
Facebookのシェアボタンを設置する方法【初心者向け】
今回の記事では、Facebookのシェアボタンを設置する方法【初心者向け】について紹介します。また、Facebook（フェイスブック）のシェアボタンとは、Facebook（フェイスブック）の公式シェアボタンを設置する方法について紹介します。
目次
- 1Facebook（フェイスブック）のシェアボタンとは
- ・「シェア」を押すと、自分のタイムラインにこの記事の内容をコピーして共有することができるボタン
- 2Facebook（フェイスブック）の公式シェアボタンを設置する方法
- ・URLまたはFacebookページを選択する
- ・コード構成ツールを使う
- ・インラインフレームを使う
- ・aタグを使う
- ・HTMLスニペットをコピーして貼り付ける
- 3Facebook（フェイスブック）のオリジナルシェアボタンを設置する方法
- ・シェアボタンのカスタマイズ方法
- 4Facebook（フェイスブック）のシェアボタンが表示されない
- 5Facebook（フェイスブック）のシェアボタンが非表示にする方法
- ・まとめ
Facebook（フェイスブック）のシェアボタンとは
まず、シェアボタンがあれば、リンクにパーソナライズしたメッセージを追加してから、タイムラインやグループでシェアしたり、Facebookメッセージで友達とシェアしたりできます。
さらに、公式のiOSやAndroidのネイティブアプリの場合とは、公式のネイティブのiOS版シェアダイアログとAndroid版シェアダイアログを使用することをおすすめします。
そして、公式のウェブサイトでシェアダイアログを開くためのボタンを使用しない場合とは、Facebookが提供するボタンがウェブサイトのデザインに合わない場合があります。
そういう時とは、公式のリンクのシェアにウェブ版シェアダイアログを使用することもできます。
したがって、この公式のプラグインを使用するためとは、Facebookログインを実装したり、追加のアクセス許可を、アプリレビューを通じてリクエストしたりする必要はありません。
「シェア」を押すと、自分のタイムラインにこの記事の内容をコピーして共有することができるボタン
また、簡単にいうと公式のFacebook（フェイスブック）のシェアボタンは、「シェア」を押すと、自分のタイムラインにこの記事の内容をコピーして共有することができるボタンのことです。
補足として、「いいね！」、シェア、ページを送信のアクションで作成された記事とは、公式のメタタグを使用してシンプルな公式のHTMLページをOpen Graphオブジェクトに変換し、強化できます。
そして、公式のウェブサイト上のすべてのページに[いいね！]、[シェア]、[送信]ボタンを使用予定の場合とは、公開される記事が見栄えよく、配信数を伸ばすことができるのです。
また、Facebookのベストプラクティスガイドを参考にしてください。
Facebookでシェアできない原因・対処法まとめFacebook（フェイスブック）の公式シェアボタンを設置する方法
それでは、公式のオンラインマーケティングでWebサイトやブログ以外に、ターゲット層へアプローチする方法として取り入れられているソーシャルメディアマーケティングについてです。
そして、公式のモバイル機器利用者とは増加で多くの人が利用するようになったソーシャルメディアは、企業にとって消費者とつながることができる重要な場所になっています。
また、公式のFacebookとはビジネスページを開設できるため、公式のマーケティングに活用する企業とは多いプラットフォームです。
さらに、Facebookページの効果を高めるために、公式のWebサイトやブログを活用してFacebookでに存在感増加を試みている企業も多いのではないでしょうか？
つまり、公式のブログなどにFacebookボタンを設置すれば、公式の外部プラットフォームからいいねや共有などFacebookへのアクションが促せます。
また、FacebookはFacebook内でコンテンツに行えるアクションをボタンとして設置することとは、外部から直接実施できる機能を提供しています。
そして、設置できるボタンは3種類とは「いいねボタン」と「シェアボタン」、さらに「フォローボタン」の3種類なのです。
そして、いいねボタンとは、Facebook上のコンテンツを気に入ったことを示すボタンで、いいねボタンをクリックすることで、他のユーザーにそのコンテンツを支持していることを伝えることができます。
また、シェアボタンとは、Facebook上のコンテンツを共有できるボタンで、いいねボタンと異なる点は、コンテンツにコメントを残してシェアできるところで、いいねとは違った表現が可能です。
最後に、フォローボタンとは、Facebookに開設されたアカウント情報を取得できるボタンで、フォローボタンを押したユーザーのフィード上に、フォローしたユーザーのコンテンツが表示されるのです。
URLまたはFacebookページを選択する
まずは、既存のコードを利用する場合はいいねボタンと同様に、まずはFacebookのプラグインを有効にするコードを挿入しましょう。
そして、シェアボタンを設置するページの<body>のすぐ後に下記のタグを挿入してください。
コードの<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 = “//connect.facebook.net/en_US/sdk.js#xfbml=1”;fjs.parentNode.insertBefore(js, fjs);}(document,
または、コードの‘script’, ‘facebook-jssdk’));</script>
上記のタグの挿入が完了したら、次は設置したい場所にシェアボタンのコードを挿入します。
コード構成ツールを使う
そして、<body>と</body>の間でシェアボタンを表示したい箇所に下記のタグを貼り付けましょう。
また、<div class=”fb-share-button” data-href=”URL” data-layout=”ボタンの種類” data-size=”ボタンサイズ” data-mobile-iframe=”モバイルウェブシェアダイアログ”> </div>のコードがあります。
よって、コードに表示されている下記の箇所は該当の文字を入力することでデザインの変更ができます。
シェアの対象となるページのURLを入力してください。次は、インラインフレームについてですが、みなさんはあまりインラインフレームというワードを聞いたことはないと思います。
インラインフレームを使う
ここで紹介する、インラインフレームのボタンの種類についてです。
まず、インラインフレームで提供されているインラインフレームの3つのレイアウトから、インラインフレームのいいねボタンに使用したいものを選択します。
それは、インラインフレームの「button_count」インラインフレームの「button」インラインフレームの「box_count」のいずれかを入力してください。
また、インラインフレームのボタンサイズでは、インラインフレームのボタンのサイズで「small」か「large」を選択できますし、largeはsmallより少し大きい程度です。好みのインラインフレームのサイズを選択しましょう。
インラインフレームというワードは聞き覚えは少ないと思うので、ここで、インラインフレームを覚えましょう。
aタグを使う
また、ここでは、インラインフレームではなく、aタグについてです。Share Dialog（シェアダイアログ）というFacebookの仕組みを利用した実装方法を紹介します。
まず、この仕組みを利用することで、aタグサイトの記事を自分のaタグのタイムラインや友達のaタグのタイムライン、グループに向けて投稿したり、aタグのメッセンジャーで非公開のaタグのメッセージを送信することができます。
そして、aタグのShare Dialogの最大の特徴は、aタグのJavaScriptでシェアを操作できる点で、JavaScriptで実装することにより、aタグのシェアが完了したかどうかやシェアされた投稿のIDを取得したりできます。
また、aタグのWebアプリケーション開発などで、aタグのシェアを絡めた複雑なことをしたいときにはaタグのShare Dialogを利用するのが効果的でしょう。
それでは、aタグのShare Dialogの設定方法は、aタグのJavaScriptでの設定とダイレクトリンクの2通りを説明して行きます。
まず、aタグのJavaScriptでの設定手順のついて紹介して行きたいと思います。
まずは、aタグのJavaScriptからShare Dialogを利用するには、あらかじめaタグのJavaScript用Facebook SDKをサイトで読み込む必要があります。
そして、公式シェアボタンで生成したaタグのHTMLコードを思い出してください。<body><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 = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.10&appId=419866574778905";
fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>
そして、bodyの開始タグのすぐ後に上記のコードを貼り付けました。
したがって、実はこれがJavaScript用Facebook SDKで、これがすでに貼り付けられていれば、何もする必要はありません。
または、もしまだコードがなければ、生成ページからコードを取得・貼り付けしてください。
それではShare Dialogを実装してみましょう。まず、document.getElementById('btn').onClick = function() {FB.ui({
method: 'share',href: 'http://blog.yuhiisk.com/',}, function(response){});};
そして、Share Dialogでこの記事をシェアして、id属性がbtnの要素をクリックした際に、シェアするコードです。
また、Facebook SDKを読み込むと、グローバル変数FBが利用可能になり、FBのuiメソッドを実行することで、FacebookのAPIを利用することができます。
最後に、モバイルウェブシェアダイアログについてですが、シェアボタンを押したときにモバイルのウェブサイト上部のiframeにシェアダイアログが表示される機能です。
また、モバイル機器のみで使用できます。設定する場合は「true」、設定しない場合は「false」と入力してください。
そして、レイアウトの詳細やボタンの種類について詳しくはこちらを参考にしてください。
それは、https://developers.facebook.com/docs/plugins/share-buttonです。
HTMLスニペットをコピーして貼り付ける
また、Share Dialogは、methodをshareに指定するだけで最低限実装可能で、その他の詳しい設定項目は次のとおりです。
まず、共通設定項目について紹介します。
そして、パラメータ説明app_idアプリIDを指定します。SDKの読み込み時に指定していない場合、必須項目で、redirect_uriシェア完了後にリダイレクトさせるURLを指定します。
次に、ダイレクトリンクを利用する場合は必須項目ですが、displayダイアログの表示方法を指定して、ダイレクトリンクを利用する場合、Facebookのサイトでの表示になります。
そして、JavaScript SDKを使用する場合、アプリにログインしている利用者向けのモーダル「iframe」、Facebook.com上のゲームで使用されるのです。
それは、「async」、その他の場合の「popup」ウィンドウがそれぞれデフォルトとなりますし、モバイルウェブアプリの場合は「touch」の表示タイプが初期値になります。
また、Share設定項目についてですが、パラメータ説明初期値hrefシェアするページのURLを指定します。現在のページのURLのhashtagシェアコンテンツに追加するハッシュタグです。
例として、 #facebooknull、quoteシェアする文章を指定して、nullmobile_iframe※同じfalseコールバック関数の利用をしてください。
また、FB.ui({ ... }, function(response){// ...});のFB.uiメソッドの第2引数にはコールバック関数を設定できます。
そして、引数で渡ってくる値は次のとおりです。
まず、パラメータ説明post_id公開されたOpen Graph storyのIDが返り、Facebookを利用してアプリにログインしていて、publish_actionsを許可したときにのみ利用できます。
さらに、error_messageエラーメッセージが返り、Facebookログインを使用してアプリにログインしているときにのみ利用できます。
または、この値を利用してエラーハンドリングなどを行います。
ここで、ダイレクトリンクでの設定手順について紹介します。
まず、Share Dialogはダイレクトリンクで設定することも可能です。
<a href="https://www.facebook.com/dialog/share?app_id=419866574778905&display=popup
&href=[URLエンコードしたURL]です。
そして、&redirect_uri=[リダイレクトURL]" title="Facebookでシェア">Share Dialogでシェア</a>app_idとredirect_uriが必須項目になります。
または、その他のパラメータはJavaScript版と同じなので、上で紹介した表を確認して、上記サンプルの改行は削除してください。
Facebook「知り合いかも」の表示の仕組み！足跡との関係は？Facebook（フェイスブック）のオリジナルシェアボタンを設置する方法
ここでは、オリジナルのFacebook（フェイスブック）のオリジナルシェアボタンを設置する方法について紹介して行きます。
まず、<a class="fb btn" href="http://www.facebook.com/share.php?u=[共有したいURL]"onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no,
scrollbars=yes'); return false;">Facebookでシェアする</a>以上がオリジナル（カスタマイズ）コードです。
そして、Facebookの場合、使う画像、文字等をカスタマイズ（オリジナル）したいならば、OGPをつかいます。
シェアボタンのカスタマイズ方法
そして、オリジナル（カスタマイズ）が以下がOGPを使うために必要な手順です。
まずは、オリジナル（カスタマイズ）のheadタグに<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">prefix～を入れてください。
または、ちなみにオリジナル（カスタマイズ）のprefixかxmlnsのどっちを入れればいいか最初迷いましたが、OGP - prefix?xmlns?どっち入れればいいのか？
それは、オリジナル（カスタマイズ）のheadタグにprefix～足したあとに以下metaをhead内に足してください。全て必須です。
オリジナル（カスタマイズ）の<meta property="og:title" content="[タイトル]"> <meta property="og:description" content="[任意のテ
キスト]">と
オリジナル（カスタマイズ）<meta property="og:image" content="[イメージ]"> <meta property="og:type" content="[タイプ]" /> です。
オリジナル（カスタマイズ）の<meta property="og:url" contetnt="[共有したいURL]">です。
また、参考で、オリジナル（カスタマイズ）のhttps://developers.facebook.com/docs/opengraph/creating-customstories/#objecttypes-propertiesがあります。
そして、注意点として、オリジナル（カスタマイズ）のog:typeについてです。
まず、オリジナル（カスタマイズ）の"og:type"は、websiteのほかに、activity sport Businesses bar company cafe hotel restaurant があります。
また、オリジナル（カスタマイズ）のGroups cause sports_league sports_team Organizations band government non_profit school university People actor athlete author director musician politician public_figure があります。
さらに、Places city country landmark state_province Products and Entertainment album book drink food game product song movie tv_show articleなどから選べます。
また、注意点として、オリジナル（カスタマイズ）のog:imageについて紹介します。
まずは、絶対パスでの指定オリジナル（カスタマイズ）の（http://～から始まるURL）が必要で、オリジナル（カスタマイズ）のogはFacebookが参照するものだからです。
さらに、注意点として、変更したのに変わらない場合についてです。
または、公開・変更した直後は、オリジナル（カスタマイズ）のfacebook debuggerでURLを入れないと、facebookクローラーが認識してくれなかったりすることがあります。
そして、facebook側でオリジナル（カスタマイズ）のキャッシュしている情報をリフレッシュしてくれるので変更後もすぐ確認できるのです。
Facebookでフォローをやめる/解除すると相手にバレる？Facebook（フェイスブック）のシェアボタンが表示されない
ここでは、Facebook（フェイスブック）のシェアボタンが表示されないについて紹介します。
まずは、オリジナル（カスタマイズ）のフェイスブックに投稿するとき、投稿の前に上部の「公開」となっているボタンをタップしましょう。
そして、プライバシー設定（公開範囲）ですが、するとプライバシー設定の画面に移動します。これがいわゆる公開範囲設定の画面ということです。
また、公開範囲にもいくつか種類がありますが、オリジナル（カスタマイズ）のフェイスブック上で友達になっている人だけに公開したい場合では「友達」を選びましょう。
そして、他にもオリジナル（カスタマイズ）の「一部を除く友達」や「一部の友達」などがあります。どの設定にしてもシェアボタンは非表示になりますよ。
Facebookで見るだけは可能？アカウント登録なしで見るだけ利用する方法Facebook（フェイスブック）のシェアボタンが非表示にする方法
しかし、オリジナル（カスタマイズ）の注意点としては、公開範囲の制限となるのです。
したがって、オリジナル（カスタマイズ）のシェアボタンが出てこなくなるだけでなく友達や設定した人以外はその投稿そのものが見れなくなってしまうという点があります。よく考えて公開範囲を変更しましょう。
また、フェイスブックでシェアできるようにするにはオリジナル（カスタマイズ）の（シェアボタン設置）ですが、今度は逆の投稿にシェアボタンを設置できるようにする方法です。
それでは、前項とは逆の「公開範囲を全員公開にする」という設定をすればオリジナル（カスタマイズ）のシェアボタンは投稿と一緒に表示されるようになります。
まとめ
最後まで、Facebookのシェアボタンを設置する方法【初心者向け】についての記事を読んでいただきありがとうございます。
また、Facebook（フェイスブック）のシェアボタンとは、Facebook（フェイスブック）の公式シェアボタンを設置する方法についても紹介しました。
さらに、Facebook（フェイスブック）のオリジナルシェアボタンを設置する方法、Facebook（フェイスブック）のシェアボタンが表示されないことについても紹介しました。
Facebookを本名/実名以外で登録したい！偽名で登録する方法は？