Home > Tags > Facebook
Facebook ファンページをつくって、デザインしてみる。
ソーシャルメディア維新 ~フェイスブックが塗り替えるインターネット勢力図~
最近、色々な企業が参入してきている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の設定を保存すると、
このようにファンページのデザインを変更できました。
- Comments: 1
- Trackbacks: 0
Facebook Platform – HelloWorld!を試してみる。
- 2010-11-08 (月)
- Facebook | HTML/CSS | JavaScrpit
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のコードをデバッグできるので便利です。
- Comments: 0
- Trackbacks: 0
facebook 世界最大のSNSでビル・ゲイツに迫る男
ジャンルとしては、Facebookが、現在に到るまでの、起業ストーリー本。
最初の2章ぐらいは、読み辛くてしょうがなかったが、中盤から一気読みしてしまった。
人間関係がすごく淡々と描かれている。
自分みたいな凡人から見たら、ハーバード大というだけで天才。何でも手に入れられるのだろうな、と勝手に思ってしまっているが、一芸に秀でた天才は、ギークが故に、社交性のなさがコンプレックスだったり、エリートのコミュニティの存在など、USの大学や社会の文化の描写がおもしろい。
キッカケは、パーティーが苦手だけど、モテたくて始めたSNSが始まり。という、圧倒的なモチベーションを保てた理由も興味を引く。
ショーン・パーカーが、マーク、エドゥアルドの資質を図る基準に使った、起業に一番必要なのは、「創業者のエネルギーと野心」プロジェクトに全力を注ぎ込む、牽引力、スタミナ、才能。というのがこの書籍の核である気がした。
後半は、ビジネスサイズ拡大に合わせて、CFOが入れ替わる様が描かれている。スタートアップに必要なスキル、会社を大きくするスキル、大企業を運営するマネジメントとは、ステージングで、全く異なると言われているが、会社の成長スピードに対応できなくなると、自分の得意な会社のステージサイズを渡り歩くビジネスマンが生まれる、というのが垣間見えた気がする。
その辺りに、情を挟まない、マーク・ザッカーバークは、真の天才だが、
利益重視の冷徹な経営者ではなく、心底、Facebookを大事にしていただけの優先順位の結果。
成功には、人並み外れたエネルギーと執着心が必要であると感じた一冊でした。
- Comments: 0
- Trackbacks: 0
Home > Tags > Facebook
