Facebookのシェアボタンの設置方法

ブログやニュースサイトでは、下記のような「シェアボタン」が記事の前後についているのをよく目にします。

fb18_1

これは、とあるニュースサイトの記事の冒頭部分です。Facebookのロゴと「シェア」という文字があり、その下に「1312」という数字が出ています。Facebookにログインしたブラウザでこの記事を閲覧し、「シェア」を押すと、自分のタイムラインにこの記事の内容をコピーして共有することができます。

この場合では、1312人がすでに記事を「シェア」したことになっています。自分のブログやWEBサイトを広く見てもらったり、SEOの効果を上げるためにも「シェアボタン」を設置することは、今やサイト運営上で不可欠なテクニックです。

シェアボタンの設置方法

1. Facebookの開発者向けページに行く

下記のリンクから、Facebookの開発者向けページに行きます。
https://developers.facebook.com/docs/plugins/share-button
fb18_2

2. ページのURLを入力し、ボタンのレイアウトを選ぶ

「手順」が説明されていますので、それに従い、シェアボタンを設置するページのURLと、ボタンのレイアウトを選びます。ボタンのレイアウトをプルダウンメニューから選ぶと、リアルタイムに設置するボタンの例が切り替わって下部に表示されます。

3. コードを取得をクリックする

画面で確認してみて、問題がなければ、「コードを取得」をクリックします。すると、ポップアップ画面が出てきて、ページに貼り付ける2種類のコードが表示されます。

4. JavaScript SDKのコードを<body>のすぐ下に貼る

fb18_3

JavaScript SDKとは、API呼び出しの実行など、クライアント側の充実した機能を装備したコードです。上部のStep2のボックスにあるソースコードを貼り付けたいページのhtmlファイルの<body>タグのすぐ下に貼り付けましょう。

5. ステップ3のコードをシェアボタンを貼り付けたい場所に貼る

そして下のボックスのステップ3のソースコードをhtmlファイルのシェアボタンを設置したい箇所に貼り付けます。以上でシェアボタンの設置は完了です。

インラインフレームを使うこともできる

fb18_4

JavaScirptSDKの隣のインラインフレーム(IFrame)を選べば、このコードを設置したい場所に貼り付けるだけでシェアボタンを設置することができます。しかし、Facebookのシェアボタンの設置ルール(ソースコードの種類)は時代と共に変わり、インラインフレームが選べない時期もありました。今後もなくなる可能性があるので、気をつけましょう。

最後に

このように、基本的なhtmlの知識は必要なものの、自分のWEBサイトを運営している人ならそんなにハードルが高くなく、Facebookという強力なSNSを使ってPRを行うことが可能です。ぜひシェアボタンの設置を活用して、どんどん自分のWEBサイトシェアしてもらいましょう。


イベント

2017/12/05(火)
Design Thinking Square