MILK2016/6/8更新Facebookのシェアボタンの設置方法1114タイトルとURLをコピーブログやニュースサイトでは、下記のような「シェアボタン」が記事の前後についているのをよく目にします。これは、とあるニュースサイトの記事の冒頭部分です。Facebookのロゴと「シェア」という文字があり、その下に「1312」という数字が出ています。Facebookにログインしたブラウザでこの記事を閲覧し、「シェア」を押すと、自分のタイムラインにこの記事の内容をコピーして共有することができます。この場合では、1312人がすでに記事を「シェア」したことになっています。自分のブログやWEBサイトを広く見てもらったり、SEOの効果を上げるためにも「シェアボタン」を設置することは、今やサイト運営上で不可欠なテクニックです。Facebookの開発者向けページに行く下記のリンクから、Facebookの開発者向けページに行きます。ページのURLを入力し、ボタンのレイアウトを選ぶ「手順」が説明されていますので、それに従い、シェアボタンを設置するページのURLと、ボタンのレイアウトを選びます。ボタンのレイアウトをプルダウンメニューから選ぶと、リアルタイムに設置するボタンの例が切り替わって下部に表示されます。コードを取得をクリックする画面で確認してみて、問題がなければ、「コードを取得」をクリックします。すると、ポップアップ画面が出てきて、ページに貼り付ける2種類のコードが表示されます。SDKとは、API呼び出しの実行など、クライアント側の充実した機能を装備したコードです。上部のStep2のボックスにあるソースコードを貼り付けたいページのhtmlファイルの<body>タグのすぐ下に貼り付けましょう。ステップ3のコードをシェアボタンを貼り付けたい場所に貼るそして下のボックスのステップ3のソースコードをhtmlファイルのシェアボタンを設置したい箇所に貼り付けます。以上でシェアボタンの設置は完了です。インラインフレームを使うこともできるJavaScirptSDKの隣のインラインフレーム(IFrame)を選べば、このコードを設置したい場所に貼り付けるだけでシェアボタンを設置することができます。Facebookのシェアボタンの設置ルール(ソースコードの種類)は時代と共に変わり、インラインフレームが選べない時期もありました。今後もなくなる可能性があるので、気をつけましょう。最後にこのように、基本的なhtmlの知識は必要なものの、自分のWEBサイトを運営している人ならそんなにハードルが高くなく、Facebookという強力なSNSを使ってPRを行うことが可能です。シェアボタンの設置を活用して、どんどん自分のWEBサイトシェアしてもらいましょう。MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。