ZEALOTエンジニアブログ
twitter_facebook

Rails環境でTwitterとFacebookを使ってサイトの拡散をするため自動投稿させるアプリを作成してみた

Pocket

今回、こんなキャンペーンサイトをつくりました。

  • 複数の応募作品に対して「投票」をするサイト
  • 「投票」するにはTwitterかFacebookのアカウントが必要
  • アカウントを使って「投票」すると、投票した旨がそのアカウントから投稿・ツイートされる

開発を担当し、(ほぼ)初めてTwitterとFacebookのアプリを作りAPIを叩いたりしたので、情報をまとめてみます。
Facebookアプリは、一部のAPI利用のためにレビュー申請をしなければならないなど難しい点が多く、ハマりどころが多かったのですが、それは別の記事にまとめようと思います。

今回は TwitterとFacebookの比較、アプリ登録〜Ruby on Railsでの実装 をまとめてみます。


環境

  • Ruby 2.1.2
  • Rails 4.1.6

アプリの登録

Twitter/Facebook どちらもアカウントが必要です。
今回は開発用アプリと本番用アプリを2つずつ登録しました。こうすることで、開発環境と本番環境で別のAPI Keyを使用することができます。

Twitter/Facebookのアプリの違い

Twitterは、アカウントとアプリが1:Nで紐付いています。
1つのアカウントが複数のアプリを作成できますが、その アカウントに対してアプリが紐づいている ため他のアカウントでアプリの管理などはできません。

逆にFacebookは、アカウントとアプリがN:1で紐付くイメージです。
あるアプリにはAさんとBさんが開発者として紐づいており、また別のアプリではBさんとCさんが開発者、というように アプリに対してアカウントが紐づいている という違いがあります。

ただ、どちらもアプリ固有のAPIキーを使用してAPIにアクセスする、という点は同じです。

Twitterアプリの登録

Twitterにログインし、 https://apps.twitter.com/ にアクセス。

Create New App をクリック。

twitter01

必要項目を埋めて Create your Twitter Application をクリックします。

アプリ登録が完了すると、画面上でAPI Keyが確認できます。

twitter02

Facebookアプリの登録

Facebookのポリシー上「複数アカウントを持つ」ことが許可されていないため、開発用アカウントを作成してアプリ登録ということは基本的にできません。持っているアカウントで登録をしましょう。

まずは https://developers.facebook.com/ から開発者登録をします。
その後、ヘッダの「Apps」から Add a New App を選択。

facebook01

ウェブサイト向けアプリを選択。
facebook02

必要な項目を入力すると、アプリが登録できます。簡単ですね。登録が完了すると、Twitter同様API Keyが確認できます。

facebook03

facebook04


実装

今回はRails環境なので、以下のGemを使って便利に実装しました。

  • Omniauth … OAuth認証してログイン処理をしてくれる
  • Koala … FacebookのGraph APIにアクセスするライブラリ
  • Twitter … Twitter APIにアクセスするライブラリ

共通設定

Rails4.1以降はAPI Keyなどを config/secrets.yml に書くと良いようです。

  • config/secrets.yml

  • config/initializers/omniauth.rb

Twitter

こんな感じで投稿ができました。Keyは auth から引っぱってこれそうな気がしますが、ちょっと分からなかったのでライブラリの例に倣って書きました。

Facebook

コード上はこういう感じでOKです。
ただ実際にアプリから投稿APIを使用するには、Facebookにアプリのレビューをしてもらう必要があります。その辺りについてはまた後日…。


投稿したリンクのプレビュー方法

TwitterでもFacebookでも、ただテキストを投稿するのではなく、プレビュー画像なども一緒に投稿できると分かりやすくて良いと思います。

例えばTwitterでYouTubeのリンク先を含めてツイートするとタイムラインでプレビューができたりしますが、似たようなことが自作サイトでも実現可能です。

TwitterとFacebookで方法がかなり違うので、これも押さえておくと役に立つのではないかと思います。

Twitterでプレビュー

Twitter Cardsを利用します。これにより、先ほどのYouTubeの例のように 「URLをツイートすると自動でプレビューを表示」 させることができます。
カードの種類は何点かありますが、キャンペーンサイトであれば画像をプレビューする程度のベーシックなSummaryカードで良いと思います。

  1. リンク先のHTMLにメタタグを挿入します。
  2. Card ValidatorサイトにてURLの申請をします。URLを入力して申請するだけで数分で完了します。

Facebookでプレビュー

こちらはTwitterよりも簡単で、投稿用APIの引数に画像のURL等を渡してあげるだけでOKです。
少し上にも同じコードを載せていますが、Koalaを使った場合は以下のようにするとプレビューを出すことができます。

より詳細な情報は、実際に実行しているAPI /user/feed のリファレンスを参照してみてください。


おまけ – ロゴの使用規約

TwitterとFacebookと連携したサイトを作るとなると、ボタンやアイコンにロゴを入れたりすることもあると思います。当然と言えば当然ですが、これも規約が決まっており勝手なロゴ使用はできません。

エンジニアの立場としては、どちらかというとデザイナーさんが用意したものを適用する、というケースが多いかもしれませんが、利用規約は知っておくべきかと思います。

Pocket