トップ >

2011年7月

Facebookタブ追加方法完全公開

formosa (2011年7月29日 21:01)

Facebook ページは、外部のサーバにあるコンテンツを iframe で読み込めるので、これを利用して自分の Facebook ページにタブ追加することができます。その基本的な方法は、Facebook への開発者登録後、App追加による方法です。

既に多くのFacebook ページオーナーがこの方法でオリジナルなFacebook ページを作成しております。オリジナルタブを初めて追加する方にその手順と具体的な方法をご紹介します。

次の手順でオリジナルタブを追加

・最初にFacebook ページの開設
・Facebook への開発者登録（詳細はこちらを参照）
・オリジナルタグのApp作成
・SDK のアップロードと PHP ファイル化
・PHPが動作するSSLサーバーへPHPファイルをアップロード
・FacebookページにApp追加と設定

Facebook への開発者登録が済んでいることを前提に詳細をご紹介します。

１．オリジナルタグのApp作成

Facebook アプリケーション作成にアクセス
https://www.facebook.com/developers/createapp.php?

任意のアプリケーション名を記入し「アプリケーションを作成」をクリック。

アプリケーションの説明など必要事項を記入し「変更を保存」をクリック。

左側のメニューから「Web Site」を選択。

ここでは「サイト URL」「Site Domain」を記入し、「変更を保存」をクリック。

＜ここでの記入は重要＞

「キャンパス」；任意の半角英数字
　　この URL に作成したアプリケーションの Facebook ページができる。

「キャンバスページURL」：アップロードする外部サーバのURL
　　下で設定する「タブのURL」と同じ。

「Secure Canvas URL」：アップロードする外部SSLサーバのURL
　　下で設定する「Secure Tab URL」と同じ

「iFrameサイズ」：Auto-resizeを選択く

「タブ名」：Facebook ページに読み込む際のデフォルトのタブ名

「タブのURL」：実際に読み込むコンテンツの URL
　　例） https://pb-support.com/facebook/index.php

「Secure Tab URL」：実際に読み込むコンテンツの URL（SSL）
　　例） https://www.pb-support.com/facebook/index.php

「編集用 URL」：未入力

記入したら「変更を保存」をクリック。

ページの一番下に、「サンプルコード」というリンクがあるので、そこをクリックし PHP コードコピー保存。

２．SDK のアップロードと PHP ファイル化

サーバにアップするPHPファイルにPHPソースコードを入れる場合、必要になるので以下にアクセスしダウンロードする。

SDKs & Tools ： Facebook開発者
https://developers.facebook.com/docs/sdks/

「PHP SDK」をクリック。

「Download」をクリックしダウンロード。

ダウンロードしたファイルを解凍すると「src」というフォルダがあるので、フォルダまるごと前述の「アプリケーションを作成」で設定したURLと同じディレクトリにアップロードする。

「タブのURL」：実際に読み込むコンテンツの URL
　　例） https://pb-support.com/facebook/src/

「Secure Tab URL」：実際に読み込むコンテンツの URL（SSL）
　　例） https://www.pb-support.com/facebook/src/

３．PHPファイルを作成

Facebookページで追加するタブに表示するコンテンツPHPファイルを作成。
以下サンプルのようなPHPファイルを作成する。

<?php
require_once 'src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'ここにアプリID',
'secret' => 'ここにアプリの秘訣',
'cookie' => true,
));
?>

<html>
<head>
<meta charset="utf-8" />
<title>ページタイトル</title>
</head>

<body overflow="hidden">

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'ここにアプリID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setSize({ height: 10000 });
</script>



</body>

</html>

body部分には、HTMLタブで書き込めばいいが、横幅は500px以内にするといい。
httpでもhttpsでも見れるように画像ファイルのリンクは、SSLサーバを指定するといい。
縦幅は長くなってもスクロールバーが出ないようになっています。

「ここにアプリID」「ここにアプリの秘訣」を置き換え、bodyを作り込めば完成です。

「index.php」のような名前をつけて保存し、前述の

「タブのURL」：実際に読み込むコンテンツの URL
　　例） https://pb-support.com/facebook/index.php

「Secure Tab URL」：実際に読み込むコンテンツの URL（SSL）
　　例） https://www.pb-support.com/facebook/index.php

のようにサーバにアップロードする。

「いいね！」ボタンを押しているファンのノーファンの表示切り替え

表示切替の方法はたくさんありますが簡単に、ページの背景画像を切り替え見た目を変える。「いいね！」押している人には、コンテンツの body 要素に「class="liked"」を付けて出力します。body 要素を切り替えるソースコードを以下に紹介しますので、body要素の位置に記述してください。

<?php
$signed = $facebook -> getSignedRequest();
if ($signed['page']['liked']){
echo '<body class="liked">';
} else {
echo '<body>';
}
?>

４．FacebookページにApp追加と設定

マイアプリページの右メニューにある「Application Profile Page」をクリックしアプリケーションのページに移動する。

左サイドメニューに「マイページへ追加」をクリック。

Facebookページで設定

左に新しいタブが追加されているのを確認し、「基本データを編集」クリック。

左のメニューで「アプリ」をクリックし、新しく追加されたアプリの「設定を編集」をクリック。
カスタムタグ名を記入し「保存」「OK」で完成。

いかがでしたでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。

		Tweet						Check

オリジナリィティのタブアイコン

formosa (2011年7月29日 19:27)

Facebook ページに、いろいろな方法で新しくオリジナルタブを追加すると、追加されたオリジナルタブの左に「アイコン」が表示されるが、

「どうのようにしてオリジナルのアイコンを登録するのだろう？」

と考えたことはないだろうか？

オリジナルのアイコンを登録する方法はとっても簡単なのでここで紹介します。

オリジナルタブを追加したアプリケーションへ移動すると、以下のような基本データの編集ページが開きます。

アイコンの左にある「アイコンを変更」をクリックし、ローカルPCに保存してある画像を参照しアップします。ロゴの左にある「ロゴを変更」では、アプリケーションのロゴを変更できます。

アイコン画像は「 16×16 ピクセル」
ロゴ画像は「 75×75 ピクセル」

オリジナルタブにオリジナルアイコンを表示させ、独自性の高いFacebookページを作ってみてください。

いかがでしたでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。

		Tweet						Check

個人輸入で稼げるってホント？

formosa (2011年7月19日 12:50)

世界最大の卸し仕入サイト「淘宝（タオパオ）」
http://www.taobao.com/index_global.php

1日当たり4,000万を超えるサイト訪問者がいる
巨大なECサイトですが、このサイトに掲載されている
約8億点の商品から探し出し仕入、オークションサイトで
売り上げる「個人輸入販売」のビジネスが注目されているようです。

7月19日（火）朝のNHK総合テレビ番組
「NHK おはよう日本首都圏」で紹介されたのが

・出品者との交渉
・購入（注文、検品）
・発送（輸入）

など、注文から輸入まですべてを代行する
「淘宝★ナビ」という個人輸入代行サービス会社

株式会社Ｍ＆Ｒソリューション
http://www.taobaonavi.com/company.html
〒332-0006 埼玉県川口市末広3-5-1 中村電気ビル 2F
TEL：050-7572-2104
代表中村浩司さん

・オークション入札・落札代行
・中国からの個人輸入代行
・中国語翻訳等

などのサービスも行う会社ですが
こちらを利用し、ファッション/アパレルに詳しい主婦などが
月に15万円くらい利益を上げている例を番組で紹介していました。

「ホントに稼げるか？」
「中国からの個人輸入は大丈夫か？」

ブランドのコピー商品（模造品）かどうかは見定めないといけません。
模造品の存在は間違いなくあると思いますので、あまりにも安いブランド品は
要注意ですし、税関などでの没収、再販での告発は誰も保証してくれません。

個人にリスクとして注意が必要と思います。

落札手数料、輸入費用など全ての仕入コストの2～3倍で
再販ができれば十分に利益がとれると思いますが、

商品の魅力を引き出す「商品説明力」「商品撮影力」は必要です。
どんな商品が売れるか、見定める力も必要です。

やれば、誰でも稼げるというものではない気がします。

ご自分の判断でお決めいただくしかないと思います。

いかがでしたでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。

		Tweet						Check

チェックインクーポンの作成方法

formosa (2011年7月15日 14:25)

Facebookチェックインクーポンのサービスを開始され、
Facebookを使ってうまく集客しているチェクインポイントが増えています。

クーポンは無料で発行できますので、
このFacebookチェックインクーポンを利用しない手はないと思います。

Facebookチェックインクーポンの発行の手順を紹介します。
（詳細はこちらをご覧ください）

www.facebook.com にログインし、
パソコンでご自分のスポットを検索します。
（オーナーの認証を受けていないと以下の編集はできません）

＜クーポンの種類＞

クーポンの種類は以下4つあります。

・一人用クーポン
・グループ用クーポン（最大8人）
・ポイントクーポン（2～20回）
・チャリティクーポン

＜クーポンの作成方法＞

www.facebook.com でお店のFacebookスポット
または本店のファンページでアクセスし、

・クーポンの種類を選ぶ
・提供内容を指定
・実施期間と条件を指定（開催48時間前）
・クーポンをプッシュ

＜推奨クーポン内容＞

以下のようにいろいろ工夫して魅力ある特典内容にします。

・お食事で2割引き
・1,000以上のお買い上げで2割引き
・友達3人とチェックインすると前菜1品無料サービス

＜クーポンの確認＞

以下のような方法でお客様がチェックインされているか確認し、
事前にお店のスタッフと十分に打ち合わせし特典サービスの提供方法を
周知徹底しておきます。

・クーポンを店員にご提示ください
・携帯電話の画面をレジでご提示ください

クーポンをうまくFacebookや店頭で宣伝すれば集客にも繋がり、
またFacebookチェックインスポットにチェックインしてくれた人に
プロモーション情報を配信するなどリピーターの育成が可能になると思います。

いかがでしたでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。

		Tweet						Check

Facebookチェックインポイント登録

formosa (2011年7月15日 14:01)

Facebookは、いろんなお店や施設などをスポットに登録していますが、
ご自分でもスポット登録は可能です。

スポット登録は簡単です。

１．Facebookスポット追加

登録したい場所でiPhoneなどの
モバイル端末からFacebookアプリを起動します。

スポットを起動し、チェックインをクリックします。

検索ボックスの中にお店の名前屋号等を入れて検索し、
下に「○○○○を追加する...」とでたらそこをクリック。

スポットの名前と説明を入力し、
[追加]をクリックすると登録終了。

２．スポットのオーナー認証

www.facebook.com にログインし、
パソコンでスポットを検索します。表示されたスポットをクリックし、

左下に「このスポットのオーナーの方」がありますので
そこをクリックし、その事業所のものだということがわかる

・ドメイン名を含んだメールアドレス
・公共料金の領収書のスキャン画像

を記入して「送信」ボタンをクリックすると、
数日後にはその登録スポットのオーナーに認定されます。

３．スポットページ編集

2011年4月下旬から、
Facebookページとスポットの統合ができなくなっています。

しかし、前述の手続きでスポットのオーナーであることを証明すれば、
そのスポットの情報をFacebookページと全く同じように編集出来ます。

いかがでしたでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。

		Tweet						Check

App登録なしでFacebookタブ追加

formosa (2011年7月10日 16:41)

オリジナルのタブを追加するFacebookアプリ
「static HTML iframe」を使用し、Facebookページを作成する方法を紹介します。

・App登録などが不要
・Facebookページ内で編集可能

こんな感じのFacebookページです。

作成方法は簡単ですので、是非トライしてみてください。

１．アプリをマイページに追加する

static HTML-iframe for Pages
https://www.facebook.com/staticHTML にアクセスし「アプリへ移動」

「アプリへ移動」をクリック。

「Install」をクリック。

アプリケーションの追加先でご自分のFacebookページ名を選択。

「static HTML-iframe for Pageを追加する」をクリック。

２．アプリ追加完了です！（ここから編集作業）

Facebookページ管理人であるご自分は、以下のように見えます。

３．static HTML-iframe for Page の設定

「基本データを編集」をクリックし、アプリ一覧を表示。

①static HTML-iframe for Page の「設定を編集」で
　カスタムタブの名前を記入し「保存」「OK」と進む。

②[アクリケーションへ移動]をクリックしページ画面に従い進む。

４．Facebookページに戻り編集

編集用のアイコンがページ右側にできているのでそれらを説明。

①前述の３．の static HTML-iframe for Page 設定ページへリンク。

②簡単に画像のみでFacebookページを作成する場合。

③「いいね！」ボタンを押しているファン、押していないノンファン別に
　HTMLタグを記入し「Save」ボタンをクリックし編集。

④HTMLの行に全てチェックを入れる。

５．Faceboookページ作成完了！

Facebookページ管理人以外で、「いいね！」ボタンを押していない
ノンファンには、以下のようにページが表示されます。

「いいね！」ボタンを押してもらうと、４．Facebookページに戻り編集の
③でファン用にHTMLタグを記入したとおりのページが表示されます。

未だ、「いいね！」ボタンを押していない方は、
こちらで押してみてください。表示内容が変化するのがわかるとおもいます。

いかがでしたでしょうか？
Facebookページにタブの追加できそうでしょうか？

参考になったと思う方は、以下の「いいね！」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

ただひたすら「いいね！」ボタン、「「ツィート」ボタン」を
押していだきたくてこんな記事を書いています。
どうぞよろしくお願いいたします。