病的溺愛シンドローム > web制作あれこれ > Google Friend Connect > Google Friend Connectを設置しよう

Google Friend Connectを設置しよう

Posted on 2009年02月28日 | 6 Comments| Clip to Evernote

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

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

GFCを設置しよう♪

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

新しいサイトを追加する

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

step1

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

  1. サーバーに2つの必要なファイルを追加する
  2. メンバーガジェットのコードをコピーする
  3. サイトに貼り付ける。
  4. 必要に応じてもっとソーシャル機能を追加する

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

setp2 サイト名とURLを記入

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

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

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

step4 テストする

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

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

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

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

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

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

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

  • メンバーズガジェットの上下(自分のアイコンが表示されるところと、下のロゴのあるところ)の背景色
  • 同じく上下の文字色
  • 同じく上下のリンクの色
  • メンバーズガジェット中央(参加者のアイコンが表示される場所)の背景色
  • 同じく中央の文字色
  • 同じく中央の二次文字色(アイコンクリックでプロフィールが表示されている時に、コメントの日付がこの色で表示される)
  • 同じく中央のリンクの色
  • 同じく中央の二次リンク色
  • ヘッドライン(MembersとかYour Friendsっていう文字の部分)の色
  • 背景の代替色
  • 枠線の色

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

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

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

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

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

[html][/html]

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


この記事は 2009年02月28日土曜日 の 12:34 AM に書きました。 
この記事のフィードはRSS 2.0で購読できます。

« | »

3 Comments for this entry

  • cyah

    唯奈先生すいませ〜ん!
    英文長時間ながめているとじんましんが出るので、私には敷居が高そうです。
    話は変わりますが、どこかで設置しているのを見かけたので登録したのですが、先に唯奈さんが登録済みでした。(笑)

  • cyah

    追記:物は試しとやってみたのですが、2番で挫折しました。(FTPが使えないので、レンタルブログでは問題の場所にファイルのUPが出来ません!有料版だとFTP使えるのですが)

  • 唯奈

    >cyahさん
    (;゚д゚)ァ…. そっか!
    画像とかと同じ感じでアップロード機能を使ったらホーム直下には入れられないですよね。
    残念。。。

3 Trackbacks / Pingbacks for this entry

ADgger

堅実に儲かるアフィリエイト

サイトの歩み

2014年2月27日に6周年を迎えます
5周年まであと…