facebookページにGrow!ボタンをつけてみたよ

「いただきますプロジェクト」というものをはじめたのですが、
facebookページにGrow!ボタンをつけてみました。
https://www.facebook.com/itadakimasu.pj

支援する側としては使ったこともあって、なにか自分でやるときは是非設置してみたいと思っていたGrow!、
Facebookページに設置したのは、「いただきますプロジェクト」が初めてとのことでした！


そんなわけで、難しいことやってるわけでもないし、
コードについての知識もそんなにない僕が書くのもおこがましいのですが、
なにをしたか簡単に書いておきますね。

1. まず、iframeで外部のhtmlを読み込ませてます。
htmlを書く際の注意点等は、こちらの記事を参考にしました。
▼Facebookページの作り方 2012年1月版｜Webクリエイターボックス
http://www.webcreatorbox.com/tech/facebook-page-jan-2012/

ただ、記事の通りの設定でもSSL接続していればうまく表示されるのですが、
セキュア設定がオフの状態で見ると表示されません。


2. agasukeはさくらのサーバーを使っていて、
サーバの設定等はこちらの記事を参考にしていました。
▼[最新版]さくらインターネットの共有SSLでセキュアな接続に対応したFacebookページを作る方法
http://blog.sorasol.co.jp/?p=1759
FBアプリの基本設定も、こちらの記事のように、
SSL接続の場合とそうでない場合のURLをきちんと設定したら、
どちらでも表示ができるようになりました。


3. あとは、読み込ませるhtmlファイルにGrow!ボタンのコードを入れます。
一番簡単な方法で入れようとすると、iframeで読み込ませてる、本当は単体で見せたくないファイルにリンクされてしまうので、Grow!のチュートリアルに従って、「設置コンテンツのURL」の部分にFacebookページのURLを指定しています。
▼使い方（ボタン設置者）｜Grow! Blog
http://blog.growbutton.com/bttutorial/


以上です！


＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

▼いただきますプロジェクト
https://www.facebook.com/itadakimasu.pj

▼Grow!
http://growbutton.com/

▼greenzによる「Grow!」紹介記事
「チップを渡すような感覚でコンテンツ製作者を支援！ソーシャルチッピングプラットフォーム「Grow!」が、いよいよ正式リリース！」
http://greenz.jp/2012/01/11/grow_/