Google Friend Connectを設置しよう

Posted on 2009年02月28日 | 6 Comments|

Google Friend Connectをあなたのブログにも設置してみよう。

あたしが導入したときは日本語だった気がするけど、
どうやら幻だったようで（？）現時点では英語なので
（あたしの環境だけかもしれないけど）
ここでは英語だということにして簡単に手順を図解してみる。

GFCを設置しよう♪

Googleアカウントにサインインしている状態で
上のリンクか、サイドバーに表示されているソーシャルバーの
「Google Friend Connect」のロゴをクリックすると
セットアップ画面になる。

新しいサイトを追加する

「Set up a new site」から新しいサイトを追加する。

step1

手順の説明がある。
なんとなく翻訳すると

みたいな感じ。
とりあえずここは「Continue」をクリック。

setp2 サイト名とURLを記入

「Site name」にサイト名、「Home URL」にサイトのURLを入力。
「Continue」で次へ。

step3 ２つのファイルをダウンロードする

「rpc_relay.html」と「canvas.html」の２つのファイルが生成されるので
クリックしてダウンロードする。
「Upload to:」に表示される場所（さっき入力したサイトURL直下）にアップロードする。
「Continue」で次へ進む。

step4　テストする

「Test to finalize setup」をクリックして、
ちゃんとファイルがアップロードされてるかテストする。

２つのファイルが正しい場所にアップロードされてないと
ファイルをダウンロードする②の画面に戻される。
ちゃんとアップロードされていれば完了して、
メンバーズガジェットのコードを生成する画面に移る。

これからメンバーズガジェットのコードを生成する

「Get code for the Members gadget」をクリックして次へ進もう。

メンバーズガジェット設定編

①で設定するのはメンバーズガジェットの大きさ。
Widthが横幅で、Heightが縦の長さ。
200ピクセルがどうたら…とか書いてるけど、このブログで200ピクセル未満にして表示できてるので、幅は多少狭くてもきっと平気。
（すみません。訳せませんでした…orz）

②は色の設定。
クリックでパレットから色を選ぶこともできるし、カラーコードを入力してもOK。
項目は上から順に、

となっていて、各背景色は空にする（#FFFFFFとか入ってるのを消す）と透過になる。
貼り付ける場所と同じ色にしたいけどカラーコードが分からない時とか便利。

③で「Generate code」をクリックすると、コードが表示されるので
コピーしてサイトに貼り付ける。

これでGFCの基礎となるメンバーズガジェットの設置は完了。
ちゃんと表示されてるか確認してみよう。

このままだと、フルビューにしたときにサイト名が「Site Name」になっているので、
ダウンロードしたcanvas.htmlの89行目辺りの「Site Name」を変更しよう。
分かる人は他の部分もいじって大丈夫。
よく分からない場合は触らないでおこうｗ

ブログの文字コードがと合わなくて、サイト名が文字化けする場合は
＜head＞のすぐ下に文字コードを指定する。
下はUTF-8の場合の例。

[html][/html]

こんな感じでできるはず。
間違いを見つけたらご指摘下さい。

cyah
2月 28th, 2009 on 1:43 PM
唯奈先生すいませ〜ん！
英文長時間ながめているとじんましんが出るので、私には敷居が高そうです。
話は変わりますが、どこかで設置しているのを見かけたので登録したのですが、先に唯奈さんが登録済みでした。（笑）
cyah
2月 28th, 2009 on 2:01 PM
追記：物は試しとやってみたのですが、2番で挫折しました。（FTPが使えないので、レンタルブログでは問題の場所にファイルのUPが出来ません！有料版だとFTP使えるのですが）
唯奈
2月 28th, 2009 on 5:38 PM
＞cyahさん
(;ﾟдﾟ)ｧ…. そっか！
画像とかと同じ感じでアップロード機能を使ったらホーム直下には入れられないですよね。
残念。。。