あらびき林檎。 » Facebook http://splitchin.com/tech Macや, iPhoneでの,Webデザイン,アプリ開発などを綴ってます。 Thu, 02 Feb 2012 10:31:43 +0000 http://wordpress.org/?v=2.9.1 ja hourly 1 Facebook ファンページをつくって、デザインしてみる。 http://splitchin.com/tech/2010/11/14/facebook-%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/11/14/facebook-%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/#comments Sat, 13 Nov 2010 15:11:59 +0000 admin http://splitchin.com/tech/?p=1428 ソーシャルメディア維新 ~フェイスブックが塗り替えるインターネット勢力図~

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

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

公式ファンページ
公式ファンページを作成・維持して、顧客やファンと交流するもの。
コミュニティページ
コミュニティページを作って、気になる話題や活動について情報を発信

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

1. ファンページの作成

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

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

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

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

2. ファンページの設定

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

1. 画像を追加

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

2. Tell your fans

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

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

3. 基本データを入力

Facebook基本設定
1. 名前
2. ホームページ
3. 説明

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

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

Facebook表示設定

5. ホームページで紹介

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

Facebook LikeBox

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

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

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

Splitchinファンページ

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

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

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

RSSGraffi

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

RSSアプリ設定

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

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

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

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

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

「ファンページを編集」「アプリケーション」を選択し、
アプリケーション
「スタティックFBML」というアプリを追加します。
スタティックFBML

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

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

PalmPiece

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

]]> http://splitchin.com/tech/2010/11/14/facebook-%e3%83%95%e3%82%a1%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e3%81%a4%e3%81%8f%e3%81%a3%e3%81%a6%e3%80%81%e3%83%87%e3%82%b6%e3%82%a4%e3%83%b3%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/feed/ 1 Facebook Platform – HelloWorld!を試してみる。 http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/#comments Sun, 07 Nov 2010 15:17:50 +0000 admin http://splitchin.com/tech/?p=1374 Facebook-developers

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を、ブックマークしています。

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

Facebook-Setting

  • 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***/

にアクセスすると、

facebook-helloworld

こんな感じで、「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のコードをデバッグできるので便利です。

]]> http://splitchin.com/tech/2010/11/08/facebook-sdk-helloworld%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/feed/ 0 facebook　世界最大のSNSでビル・ゲイツに迫る男 http://splitchin.com/tech/2010/05/19/facebook%e3%80%80%e4%b8%96%e7%95%8c%e6%9c%80%e5%a4%a7%e3%81%aesns%e3%81%a7%e3%83%93%e3%83%ab%e3%83%bb%e3%82%b2%e3%82%a4%e3%83%84%e3%81%ab%e8%bf%ab%e3%82%8b%e7%94%b7/ http://splitchin.com/tech/2010/05/19/facebook%e3%80%80%e4%b8%96%e7%95%8c%e6%9c%80%e5%a4%a7%e3%81%aesns%e3%81%a7%e3%83%93%e3%83%ab%e3%83%bb%e3%82%b2%e3%82%a4%e3%83%84%e3%81%ab%e8%bf%ab%e3%82%8b%e7%94%b7/#comments Tue, 18 May 2010 15:33:26 +0000 admin http://splitchin.com/tech/?p=1093

facebook　世界最大のSNSでビル・ゲイツに迫る男

ジャンルとしては、Facebookが、現在に到るまでの、起業ストーリー本。
最初の2章ぐらいは、読み辛くてしょうがなかったが、中盤から一気読みしてしまった。

人間関係がすごく淡々と描かれている。
自分みたいな凡人から見たら、ハーバード大というだけで天才。何でも手に入れられるのだろうな、と勝手に思ってしまっているが、一芸に秀でた天才は、ギークが故に、社交性のなさがコンプレックスだったり、エリートのコミュニティの存在など、USの大学や社会の文化の描写がおもしろい。

キッカケは、パーティーが苦手だけど、モテたくて始めたSNSが始まり。という、圧倒的なモチベーションを保てた理由も興味を引く。

ショーン・パーカーが、マーク、エドゥアルドの資質を図る基準に使った、起業に一番必要なのは、「創業者のエネルギーと野心」プロジェクトに全力を注ぎ込む、牽引力、スタミナ、才能。というのがこの書籍の核である気がした。

後半は、ビジネスサイズ拡大に合わせて、CFOが入れ替わる様が描かれている。スタートアップに必要なスキル、会社を大きくするスキル、大企業を運営するマネジメントとは、ステージングで、全く異なると言われているが、会社の成長スピードに対応できなくなると、自分の得意な会社のステージサイズを渡り歩くビジネスマンが生まれる、というのが垣間見えた気がする。

その辺りに、情を挟まない、マーク・ザッカーバークは、真の天才だが、
利益重視の冷徹な経営者ではなく、心底、Facebookを大事にしていただけの優先順位の結果。

成功には、人並み外れたエネルギーと執着心が必要であると感じた一冊でした。

]]> http://splitchin.com/tech/2010/05/19/facebook%e3%80%80%e4%b8%96%e7%95%8c%e6%9c%80%e5%a4%a7%e3%81%aesns%e3%81%a7%e3%83%93%e3%83%ab%e3%83%bb%e3%82%b2%e3%82%a4%e3%83%84%e3%81%ab%e8%bf%ab%e3%82%8b%e7%94%b7/feed/ 0 Facebook Likeボタンを試してみる。 http://splitchin.com/tech/2010/05/10/facebook-like%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/ http://splitchin.com/tech/2010/05/10/facebook-like%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/#comments Sun, 09 May 2010 15:06:09 +0000 admin http://splitchin.com/tech/?p=1029

Facebook Developer を観ながら、↑上記のように、FacebookのLikeボタンを試してみました。

facebook like

実装方法は、iframe版と、XFBML版の2通りあるらしいです。
XFBMLの方が、拡張性が高いらしいですが、別途、JavaScript SDKが必要なようなので、今回は、iframe版で実装してみました。

このブログは、WordPressで構築されているため、記事毎に設定するには、生成されたHTMLタグの、href=部分を,

<?php echo urlencode(get_permalink($post->ID)); ?>

で設定して、single.phpに設定しています。

“Like”は、閲覧しているユーザーのFacebookの言語設定によって変化、日本語だと、”いいね！”になるようです。

Likeボタンを押した、ユーザーのFacebookページ

従来からある「Sharedボタン」との違いは、
ボタンを押した後に、ユーザーのFacebookのページに、

Likeボタン
シンプルなリンク, コメントなし, Friends通知なし
Shareボタン
画像付きリンク,　コメントあり, Friends通知あり

のような、違いが出るようです。

]]> http://splitchin.com/tech/2010/05/10/facebook-like%e3%83%9c%e3%82%bf%e3%83%b3%e3%82%92%e8%a9%a6%e3%81%97%e3%81%a6%e3%81%bf%e3%82%8b%e3%80%82/feed/ 0 世界のSNS市場について。 http://splitchin.com/tech/2009/12/27/%e4%b8%96%e7%95%8c%e3%81%aesns%e5%b8%82%e5%a0%b4%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%80%82/ http://splitchin.com/tech/2009/12/27/%e4%b8%96%e7%95%8c%e3%81%aesns%e5%b8%82%e5%a0%b4%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%80%82/#comments Sun, 27 Dec 2009 12:36:45 +0000 admin http://splitchin.com/tech/?p=185 SNS世界地図

イタリアのブロガーで写真家、ライターでもあるVincenzo Cosenzaは今年2回目の世界のSNS勢力地図を発表した。今回の分は2009年12月のAlexaとGoogle Trends for Websitesのデータを利用している。

,去年の10月と比較すると、
SNS世界地図2008

以下、個人的な所感になります。

英語圏の動き

英語圏は、ほぼFacebook。
世界人口、第2位のインドも、Orkut→Facebookへ。
インドのIT企業などは、元から英語圏をターゲットとしている所も多いので
自然な流れとも言える。

USでは、高校までMySpaceで、大学・社会人になるとFacebookを使うと言う。
日本でも、モバイルのプロフ→Googleなど、のユーザーの囲い込みで、
参考になる動きかもしれません。

アフリカ、東南アジアの動き

おもしろいのは、発展途上国の動き。

サムソンが人気、というのも面白い情報ですが、
去年まで、ほとんど、利用がなかったアフリカや、東南アジア圏でも
モバイルの普及とともに、Facebook利用者が急上昇という点。

先日参加した、StartupMeetingでのお話にもあったのですが、
スマートフォンも低所得者層に拡大して来ている流れもありますし、

PC購入と回線契約するコストより安い、携帯1台で、仕事用のメールも、
ネットでの情報収集するという利用シーンは拡大してきていると思われます。

アジアの動き

国土に合わせた独特のローカライズに特化したサービスが
市場を堅守している傾向にある、アジア圏。

中国：QQ、韓国：Cyworld、日本：Mixi

しかし、このローカライズ市場にも、新しい動きが。

私自身、両方のアカウントを利用しているのですが、
iPhone, Android, SNSアプリなど、オープンマーケットの英語圏の
Developer向けの情報はFacebook、日本の知り合いなどは、Mixi。など、
利用シーンが違ってくるのでは、ないかなと思っています。

中国の、Grate Fire Wallのような政策を取らない限り、
日本大手ネット企業は、シェアの競争激化による厳しい状況になると思いますが、
スモールビジネス規模では、成功のチャンスの波到来、という所感です。

]]> http://splitchin.com/tech/2009/12/27/%e4%b8%96%e7%95%8c%e3%81%aesns%e5%b8%82%e5%a0%b4%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6%e3%80%82/feed/ 0