Facebook Archive

10日でおぼえるFacebookアプリ開発入門教室

User Info – サンプル

http://splitchin.com/sample/Facebook/feed/

Exampleから、User-Infoを試してみました。

詰まった点

今回、自分のドメイン内のHTMLに置いて、実行しようとしたのですが、
認証エラーになりました。

アプリケーションの設定

API Error Code: 191 API Error Description: The specified URL is not owned by the application Error Message: Invalid redirect_uri: 指定されたURLは、アプリケーションの設定で許可されていません。l

下記のサイトを参考にさせて頂き、アプリケーションの設定から、使用しているapp_idの、「アプリの編集」を選び、「Webサイト」「Facebook上のアプリ」に、Facebookアプリを実行するURLを追加しました。

参考）PHPを用いてFacebookにログインしているユーザの基本情報を取得する方法【Facebook】｜ダリの雑記：Webプログラム版

http://www.nandani.sakura.ne.jp/web_all/php/2319/

初期化が必要

   FB.init({
     appId  : 'YOUR APPID',
     status : true, // check login status
     cookie : true, // enable cookies to allow the server to access the session
     xfbml  : true  // parse XFBML
   });

FB.initを設定して初期化しないと、2回目のリロードで表示されなくなりました。

ソーシャルメディア維新 ~フェイスブックが塗り替えるインターネット勢力図~

最近、色々な企業が参入してきているFacebook ファンページを作った際の履歴です。

ファンページとは？
公開を目的としたファンが集まるページ。
「公式ファンページ」、「コミュニティページ」の2種類ある。

公式ファンページ

公式ファンページを作成・維持して、顧客やファンと交流するもの。

コミュニティページ

コミュニティページを作って、気になる話題や活動について情報を発信

試しに作る分には、コミュニティページでいいと思いますが、
今回は、Splitchinの公式ファンページを作った際の履歴になります。

1. ファンページの作成

1-1. 「ファンページを作成」から、ファンページを作成します。

1-2. ファンページの名前を決めます。

入力した名称が、そのままURLに使用されます。

例）Splitchin
http://www.facebook.com/pages/Splitchin/120381754656563

2. ファンページの設定

続いて、作成したファンページの設定を行います。

1. 画像を追加

マイページのように、左上の画像をアップすることができます。

2. Tell your fans

マイページのように、ウォールに発言できます。

Outlookデータなど、連絡先を入れると、ファンページ情報を通知できるようです。私は未使用です。

3. 基本データを入力

1. 名前
2. ホームページ
3. 説明

「2.ホームページ」と、「3.説明」は、後から変更出来ます。

4. 近況アップデートを投稿

5. ホームページで紹介

これも必須ではありませんが、ファンページのプロモーションを、
ソーシャルプラグインの「Like Box」を使用してブログパーツのように、行うことができます。

Like Box
自分の、ホームページにFacebookの「いいね！」ボックスを追加して、Facebookファンページを紹介できます。

1−3. 設定後のファンページの画面

設定後、こんな感じになります。

3. ファンページをカスタマイズします。

ファンページにRSSフィードを流したいので、
FacebookアプリのRSS Graffitiをインストール。

■RSS Graffiti
http://www.facebook.com/RSS.Graffiti

左カラムから、先ほど作成したファンページを選択すると、認証確認を求められますので、手順に沿ってOKします。

「+ Add Feed」をクリックして、ファンページのウォールに
表示させたいフィードを追加します。

Post Styleで表示形式を選ぶことができます。

これで、ウォールにRSSフィードを流すことができます。

4. ファンページをデザインする

FBMLという、ほぼHTML/CSSがベース簡単な言語でデザインを変更できます。

「ファンページを編集」「アプリケーション」を選択し、

「スタティックFBML」というアプリを追加します。

「アプリケーションを追加」を選択して追加後、
「アプリケーションに移動」をすると、FBML設定画面になります。

HTML/CSSを記述します。注意点は、
・styleで記述するとIEで表示できないので、インラインで記述します。
・Flash/JSはクリックしてからでないと動作しない。
・ソーシャルプラグインのFBMLが利用できます。

スタティックFBMLの設定を保存すると、
このようにファンページのデザインを変更できました。

1. Facebook Developers Doucumentationを読む。

とりあえず、何が出来るのか、ということで
Facebook DevelopersのDocumentationを読むと、下記のような構成で

API References

■Core API

Graph API

Social plugins

■Facebook SDKs

JavaScript SDK

PHP SDK

Python SDK

iOS SDK for iPhone and iPad

Android SDK

■Advanced APIs

Graph Realtime API

Facebook Query Language (FQL)

Facebook Markup Language (FBML)

Old REST API

Old JavaScript Client Library

Internationalization

Integrating with Facebook Chat

Facebook Ads API

自サイトへの、導入資料である、Facebook for Websitesを読むと、Socail Plugins http://developers.facebook.com/pluginsがはじめに紹介されており、

Social plugins let you see what your friends have liked, commented on or shared on sites across the web. All social plugins are extensions of Facebook and are specifically designed so none of your data is shared with the sites on which they appear.

一番、基本なのは、このSocial Pluginsで、
Likeボタンを追加したり、Activity一覧を、自分のサイトに、
HTMLで組み込む事ができるAPIとのことです。

以前、Likeボタン設置したり、
大体、これで、どんなものなのか掴むことができたので、

今度は、Graph APIをJavaScript経由で利用出来るという、
Javascript SDKを試して行きたいと思います。

その前の基礎として、HTMLで、”Hello, World!” を試します。

2. Facebook API – Hello,World!を試してみる

JavaScript SDK
http://developers.facebook.com/docs/reference/javascript/
こちらを読みながら、進めてみました。

2-1, Facebook Developers – アプリケーションIDを取得

The JavaScript SDK enables you to access all of the features of the Graph API via JavaScript, and it provides a rich set of client-side functionality for authentication and sharing. The JavaScript SDK is also necessary to use the XFBML versions of the Social Plugins. Many functions in the JavaScript SDK require an application ID. You can get an app ID by registering your application.

大体の機能を使うには、IDの登録が必要だよ、とあるので、
まずは、Facebook DevelopersのアプリケーションIDを取得します。

日本語のアプリケーションID取得方法説明は、こちらの方々のサイトを参考に、「FACEBOOK開発者アプリケーションの追加とアプリケーションの登録」、facebookアプリの作り方・PHP編

2-2. Canvas URLで、”Hello, World!”を表示するHTMLを組み込む。

■Facebook Developers – MyApplication
http://www.facebook.com/developers/

自分は、MyApplicationに辿り着けなかったので、
直接、上記URLを、ブックマークしています。

MyAppの、Facebook Integrationを設定します。

• CanvasPage URL: 組み込むHTMLのURLを指定します。
• Canvas Type：”iframe”にすると、まるっと上記URLを組み込みます。
• iFrameサイズ：”Auto-resize”を指定すると、自動でiframeのサイズ調整します。

上記MyAppで指定した、CanvasPage URLに、なんでもいいのですが、

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<title>Splitchin  - Facebook SDK Hello, World!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Splitchinは、Macでの、Webデザイン、iPhone、Tシャツ、などのクリエイティブ活動です。">
<meta name="keywords" content="Splitchin,Webデザイン,Tシャツ,iPhone,Mac">
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<div id="wrap">
<!-- contents -->
<div id="contents">
	<p>Facebook SDK - Hello, World!!</p>
</div>
<!-- /contents -->
</body>
</html>

こんな、「Hello,World！」を表示するHTMLをサンプルとして、アップします。

その後、

http://apps.facebook.com/****ご自分のAppベースURL***/

にアクセスすると、

こんな感じで、「Hello,World!」が表示されました！

2-3. Facebook – JavaScript SDKをダウンロードする – (実装は次回)

■facebook / connect-js
https://github.com/facebook/connect-js

から、SDKをダウンロードします。

次回は、こちらを使用して、認証系など、実装テストしていきます。

こちらの、JS Test Consoleを使うと、
http://developers.facebook.com/tools/console/

書いた、JavaScript SDKのコードをデバッグできるので便利です。