Railsでつくったサービスにシェアボタン（Facebook / Twitter）をつけてみる

FacebookとTeetボタンをつけたので、備忘がてらメモを残します。

Facebook

手順

1. FacebookデベロッパーページからHTMLスニペットを取得する
2. HTMLスニペットをファイルにコピペする

FacebookデベロッパーページからHTMLスニペットを取得する

以下のページのシェアボタン構成ツールに必要なシェアしたいURLと、
ボタンのタイプを選択して、コードを取得ボタンをクリックします。

• サンプルとしてyahoo!さんのurlをかりました
• レイアウトの種類はプルダウンで変更後、すぐ下のプレビューで確認できます
• モバイルiframeにチェックをつけると、iframeでシェアダイアログを表示する

コードを取得ボタンで生成されたコードは以下の通り。

HTMLスニペットをファイルにコピペする

1. app/views/application.html.erb（階層やファイルは適宜読み替えてください）のタグ内に上記画像の上部のソースをコピペ
2. app/views/（ボタンを表示させたいファイル）.html.erbに上記画像の下部のソースをコピペ

シェアボタンをクリックするとyahoo!さんのページをシェアすることができるようになりました。

Twitter

手順

1. TwitterのページからHTMLスニペットを取得する
2. HTMLスニペットをファイルにコピペする

TwitterのページからHTMLスニペットを取得する

• まず以下のページでボタンのタイプ（ツイート、@xxxxをフォローなど）を選択

• 必要な情報を入力して、右下のHTMLスニペットを取得

HTMLスニペットをファイルにコピペする

1. app/views/（ボタンを表示させたいファイル）.html.erbに先ほどのHTMLスニペットをコピペ
2. scriptタグ内のスニペットだけ、app/views/application.html.erb（階層やファイルは適宜読み替えてください）のタグ内に移動させる

• 1.の手順だけでもOKです

ツイートボタンをクリックすると、ツイートボタンを設置したページに関してのツイート画面に遷移できるようになりました。