> Facebook



Facebook

FBバックアップ機能


Facebookに投稿した記事や写真などをひとつづつ保存するのは面倒、
一括で保存してくれるのがFacebookの「バックアップ機能」

この「バックアップ機能」は、写真や動画以外、個人アカウントのタイムラインに投稿した記事や、メッセージ、イベントなどダウンロードでき便利です。


Facebook「バックアップ機能」の利用方法について紹介します。

1.画面右上の設定アイコンのプルダウンから「設定」を選択。


一般アカウント設定が表示されます。


2.一般アカウント設定の画面下「Facebookデータをダウンロード」をクリック。




3.〔アーカイブをダウンロード〕ボタンをクリック。




4.Facebookのアカウントパスワードを入力し、〔送信〕ボタンをクリック。


〔送信〕ボタンをクリックして送信すると、Facebookチームよりアカウントメールアドレスに、
「Facebookダウンロードのリクエストが送信されました」という件名のメールが届きます。

続いて数十分から数時間後に、Facebookチームより
「Facebookダウンロードの準備ができました」という件名のメールが届き、本文中に、
ダウンロード可能なリンクurlの案内があります。ダウンロードはこのメールの送信から
数日以内に実行する必要があります。


案内のリンクurlよりzip圧縮ファイルをダウンロードし、解凍しますと、以下のフォルダが確認できます。

5.ダウンロード後解凍のFacebookデータ。



6.photosフォルダ内のhtmlファイル



7.個人のタイムライン記事




8.Facebookに自分自身が投稿した画像




自分自身のタイムラインに投稿した記事や、画像などはダウンロードできますが、
グループに投稿したデータはダウンロードできません。


このエントリーをはてなブックマークに追加



Check



Yahoo!ショッピングで販売している商品の情報を簡単(自動)に
Facebook上で公開できるアプリ「fshopping」を設定してみました。

・Facebookページにダブを追加
・Yahoo! shopping商品を自動掲載
・409商品の商品を掲載
・検索、並び替え機能
・表示切替機能


などの機能がありますが、設置は本当に簡単です!

まずは、アプリ「fshopping」にアクセス。
http://apps.facebook.com/f_shopping/

「アプリケーションをページに追加する」ボタンをクリック。

クリックすると大きな画像でご覧になれます。




追加するFacebookページを選択。

クリックすると大きな画像でご覧になれます。


「fshoppingを追加する」ボタンをクリック。


クリックすると大きな画像でご覧になれます。


追加したFacebookページの左にタブ「ショッピング」が
追加されるので、そこを左ダブルクリックします。

右側にアプリケーション設定
Yahoo! shoppingのストアIDを入力し、「設定を保存する」をクリック。


以下のように自動で、Yahoo! shopping商品リンクが並びます。

クリックすると大きな画像でご覧になれます。



Yahoo! shopping商品へのリンクですが、
手間がかからないので、いろいろなFacebookページからリンクできますし、
自分で出店していないYahoo! ストアの商品を並べ応援することができます。

追加されたタブ名は、「基本データ編集」のアプリ設定で
お好きなタブ名に編集可能です。



いかがですか?

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




このエントリーをはてなブックマークに追加



Check

人の集まるところに仮想露店を出店



「東京ミッドタウンや赤坂サカスに仮想露店を出す」

そんなこと出来るの?と思われるかも知れませんが、
Facebook のチェックインスポット登録を使えば簡単にできます。


最近、東京赤坂の夏サカスなど東北・北関東復興支援エリアが
設けられ幾度も催事出店している店舗さんも多く見られます。

そんな催事出店でも、チェックインスポット登録をすれば
チェックインクーポンを発行し、集客を工夫することができます。

祭りの露店や屋台なども、
同じ場所で出店するのであればそれもOKです。



<仮想露店のチェックインクーポン発行までの手順>

・iPhoneなどスマートフォンを持ってお店を出す場所に行きスポット追加
・ローカルのPCでオーナー認証
・ローカルのPCでチェックインスポット編集
・ローカルのPCでチェックインクーポン発行


詳しくはこちらを参照願います。

チェックインスポット登録方法
チェックインクーポンの作成方法



〔チェックインスポットの基本データ編集画面〕

クリックすると大きな画像でご覧になれます。


いかがでしたでしょうか?
屋台でもFacebookチェックインスポットになれるって知っていました?

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

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




このエントリーをはてなブックマークに追加



Check

チェックインクーポン発行の実践



以前に「チェックインクーポンの作成方法」をご紹介しましたが、
チェックインクーポンの発行の手順がわかりずらかったのではないかと思います。

今回は、実践方法を解説します。

まず、チェックインスポットの登録方法(Facebookが未登録の場合)は、
こちらを参照願います。


無事にオーナー認証を受けて編集できるようになった時、
最も注意しないといけないのが、基本データ「市区町村:」「町名・番地:」の記入です。


最初は空欄になっており、記入欄の下は
チェックインスポットの地図が表示されているはずです。

基本データ「市区町村:」「町名・番地:」に正しく住所を入れないと、
左サイドのメニューに「クーポン」は現れません。

一度、住所を記入し「変更を保存」したのち、住所を削除したりすると
地図もクーポンも消え、ユーザーがチェックインすることができなくなります。



無事に住所を記入し、「変更を保存」すると、
左サイドのメニューに「クーポン」は現れますので、そこをクリック。

クリックすると大きな画像でご覧になれます。


次に「クーポンの種類を選択」など、クーポンの内容を記入します。

クリックすると大きな画像でご覧になれます。



記入を終え「クーポンを作成」をクリックすると、以下の表示になります。

クリックすると大きな画像でご覧になれます。


クーポンが承認されるのを待ちます。
(一週間以内と案内がありますが、割と早く承認されると思います)


最近、チェックインスポットが多くなりましたが、
「チェックインクーポン」発行で集客に力を入れているところは少ないです。

チェックインクーポン発行で、ど~んと集客してみてください。



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

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

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




このエントリーをはてなブックマークに追加



Check

Facebookタブ追加方法完全公開



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

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



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

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



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


1.オリジナルタグの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
  例) http://www.pb-support.com/facebook/index.php

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

「編集用 URL」 :未入力


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



クリックすると大きな画像でご覧になれます。

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



2.SDK のアップロードと PHP ファイル化

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

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


クリックすると大きな画像でご覧になれます。


「PHP SDK」をクリック。



クリックすると大きな画像でご覧になれます。

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

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

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

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



3.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>


<!-- ここにHTMLタグでコンテンツ作成(横幅は500px以内) -->


</body>
</html>



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

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


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

「タブのURL」:実際に読み込むコンテンツの URL
  例) http://www.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>';
}
?>





4.FacebookページにApp追加と設定

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


クリックすると大きな画像でご覧になれます。



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


クリックすると大きな画像でご覧になれます。



Facebookページで設定


クリックすると大きな画像でご覧になれます。



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

クリックすると大きな画像でご覧になれます。


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


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

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

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




このエントリーをはてなブックマークに追加



Check

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



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

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

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


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



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

クリックすると大きな画像でご覧になれます。

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

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

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



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

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

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




このエントリーをはてなブックマークに追加



Check

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



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

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

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

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


クリックすると大きな画像でご覧になれます。


<クーポンの種類>

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

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


<クーポンの作成方法>

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

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


<推奨クーポン内容>

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

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


<クーポンの確認>

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

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

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



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

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

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




このエントリーをはてなブックマークに追加



Check

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



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

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


1.Facebookスポット追加

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

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

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

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



2.スポットのオーナー認証

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


クリックすると大きな画像でご覧になれます。


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

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


クリックすると大きな画像でご覧になれます。

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



3.スポットページ編集

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

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



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

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

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




このエントリーをはてなブックマークに追加



Check

App登録なしでFacebookタブ追加



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

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

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


クリックすると大きな画像がご覧になれます。


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



1.アプリをマイページに追加する

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


クリックすると大きな画像がご覧になれます。



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



クリックすると大きな画像がご覧になれます。


「Install」をクリック。


クリックすると大きな画像がご覧になれます。


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


クリックすると大きな画像がご覧になれます。


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



2.アプリ追加完了です!(ここから編集作業)

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

クリックすると大きな画像がご覧になれます。



3.static HTML-iframe for Page の設定

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

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

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



クリックすると大きな画像がご覧になれます。



4.Facebookページに戻り編集

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

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

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

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

④HTMLの行に全てチェックを入れる。
クリックすると大きな画像がご覧になれます。



5.Faceboookページ作成完了!

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

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


クリックすると大きな画像がご覧になれます。



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



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

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

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




このエントリーをはてなブックマークに追加



Check

static_iframeでファンだけに表示



facebookページをstatic_iframeで作成する場合、ファンかどうかの判断をして、「ファンに対する表示」と「未ファンに対する表示」を異なるものにしたい場合があると思います。

「いいね!」を押したら、ページ(コンテンツ)を公開する。
「いいね!」を押したらurlやパスワードを教える。

などコントロールできれば便利です。


<static_iframeでファン特定の表示をする方法>

static_iframeで表示するphpファイルを以下のように作成します。


<?php
function parse_signed_request($signed_request, $secret) {
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
// decode the data
$sig = base64_url_decode($encoded_sig);
$data = json_decode(base64_url_decode($payload), true);
if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}
// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Bad Signed JSON signature!');
return null;
}
return $data;
}
function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}
?>
<html>
<head>
<meta charset="utf-8" />
<title>例)ファンだけにプレゼント</title>
</head>
<body>
<pre>
<?php
// ここに Application Secret の「878f21db**********193709a9e4cd34」記入
$secret = 'ここに';
$data = parse_signed_request($_REQUEST['signed_request'],$secret);
?>
</pre>
<?php
if ( $data['page']['liked'] == true ) {
echo "ファンになってくれてありがとう!";
} else {
echo "いいね!をお願い致します。(Please push the like button) ";;
}
?>
// HTMLタグなどで表示
</body>
</html>




いかがですか?

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




このエントリーをはてなブックマークに追加



Check

Facebookページのタブ表示順



タブがページ中央上に表示されている旧facbookページではドラッグ&ドロップで位置を変更できましたが、現在のメニュータブが左上にある新レイアウトではそれができません。タブの表示順を変更する方法をまとめてみました。

1.「facbookページ」でアプリをクリック。
2.下に下げたいタブのアプリの「設定を編集」。
3.プロフィールタブを一旦削除する。
  (メニューから消えますが内容は残る)
4.再びアプリの「設定を編集」をクリック。
5.プロフィールタブを追加する。

以上で移動させたいタブが下に下がります。
この繰り返しでタブの表示順を変更でます。

ただし、ウォールと基本データは変更でません。




このエントリーをはてなブックマークに追加



Check

アプリiwipaでFacebookページ作成



FacebookがFBMLを廃止し、現在はFBMLアプリを新規に追加することができない。

オリジナルのタブを追加するFacebookアプリ「Static iframe」を使用し、Facebookページを作成している人も多いと思うが、App登録などが必要で、プログラム、HTMLなどのWEB知識、自社サーバーを持っていない方にはちょっとハードルが高いかも知れない。

iframeを利用したアプリで高機能で便利な
「Static FBML + Welcome Tab + iframe = iwipa」がある。

「Static iframe」のようにApp登録は不要で、しかもアプリ内で編集できるというすぐれものだ。

だだ、アプリの設定画面が英文で若干ややこしい部分があるので、作成方法を簡単に紹介する。


こんなページができるのだが・・・

クリックするとページがご覧になれます。

<機能としては>

・アプリ内編集
・オリジナルタブ追加
・オリジナルメニュー作成
・コメント投稿欄設置
・ファンリスト表示
・スライドショー設置
・シェアページアイコン設置

フッターの変更不可、iwipaページへのリンクなど気にしなければ無料で利用できるアプリですが、もっとオリジナルにカスタマイズしたいという方は年間99.97US$を支払えば更に高機能で利用できる。でも私は無料版で十分と思う。


<iwipaを利用したページ作成の流れは?>

1.アプリiwipaを自分のFacebookページへ追加
2.あとはひたすらアプリiwipa内でページ編集

と簡単な流れです。

具体的な「Static FBML + Welcome Tab + iframe = iwipa」の追加方法をこちらでご紹介します。



いかがですか?

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




このエントリーをはてなブックマークに追加



Check

アプリ iwipaの追加方法



「Static FBML + Welcome Tab + iframe = iwipa」 をご自分のFacebookページに追加するには、
Facebookページ管理者アカウントで以下のURLにアクセスします。
http://www.facebook.com/iwipa





「Click here to installiwipa,it's free!!」をクリック。
または画面左下の「マイページに追加」をクリック。





「アプリケーションのチカ先」にご自分Facebookページが表示されますので選択し、
「HTML+iframe+FBML=iwipaを追加する」をクリックし追加します。


Facebookページの管理人アカウントでログインしていると以下のようなページが開きます。



①の「welcome」をクリックし、右のような画像が表示されたら②のエリアをクリック。



以下のページにアクセスできたら
「Static FBML + Welcome Tab + iframe = iwipa」 追加完了です。





ご自分のFacebookページに戻りタブ「Welcome」をクリックすると、
以下のようなデフォルトのコンテンツが表示されます。





具体的なページ編集方法はこちらでご紹介します。



いかがですか?

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




このエントリーをはてなブックマークに追加



Check

アプリiwipaの編集方法



前回、「Static FBML + Welcome Tab + iframe = iwipa」 を
ご自分のFacebookページに追加する手順を紹介しましたが、

今回は、アプリ iwipa内でFacebookページの具体的な編集方法をご紹介します。





「基本データを編集」をクリック。





①左のタブ「アプリ」をクリック。
②HTML + iframe + FBML = iwipa の「設定を編集」タブ名を編集。
③「アプリケーションへ移動」をクリックし編集画面にアクセスする。







以下のアイコンをクリックし全体のレイアウトを編集。


以下のアイコンをクリックし各パーツを編集。




<全体のレイアウト編集>




① 「Add Page(Tab)」をクリックするとタブが追加できリンク先を設定できます。
② 掲載する各パーツアイコンをドロップ&ドラックで移動(上下で表示順変更)できます。

※編集後は「Save Layout」をクリックし保存。



<各パーツを編集>



「Edit」をクリックし、説明文などを編集します。
各「Settings」で設定を変更できます。



最終的にこんな感じのページが完成します。

クリックするとページがご覧になれます。


「Static FBML + Welcome Tab + iframe = iwipa」 を利用した
Facebookページの作成方法

1.「Static FBML + Welcome Tab + iframe = iwipa」の概要
2.「Static FBML + Welcome Tab + iframe = iwipa」の追加方法
3.アプリ iwipa内での編集方法

の流れでご紹介しましたが、

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


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




このエントリーをはてなブックマークに追加



Check

Facebook 開発者登録



Facebook ページで「オリジナルタブを追加するiframeアプリ」などを利用する場合、
事前に、Facebook デベロッパー登録すると便利です。今さらながらですが

Facebook デベロッパー登録の手順を紹介します。


Facebook デベロッパー登録は以下の「Facebook Developers」の上部メニュー
「マイアプリ」をクリックし、次のページに進みます。




Facebook ログイン画面が表示されますので、利用中のアカウントでログインします。



デベロッパー登録をしていない状態でログインすると、下のようにアプリの許可を求められます。



「許可する」をクリックします。


次のページに変わりますので画面中央の「作成する」か「Set Up New App」をクリックします。





アカウント認証を完了させるため「携帯メールアドレス」または「クレジットカード登録」が必要です。




赤字の「携帯電話」をクリックして認証を完了させるといいかと思います。

登録画面「Facebookテキストに登録」で国「日本」を選択し、「次へ」をクリック。
Facebook 「携帯メールアドレスの確認」で携帯メールアドレスを記入し「承認」をクリック。

携帯アドレスを入力し送信すると「アカウント認証メール」が届くので、
メールに書かれている確認コードのURLをクリックすれば登録完了です。

これでFacebook デベロッパーツールが利用できるようになります。



いかがですか?

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




このエントリーをはてなブックマークに追加



Check

OGP設定「いいね!」ボタンを設置



はてなブックマーク、Twitter、mixi、Facebook など、ソーシャルメディアなどと連携したウェブサイトへのアクセス誘導のプログラムが多いが、最も効果的なものは、OGP(Open Graph Protocol)を設定したFacebookの「いいね!」ボタンと言われる。

HTMLページがどんな情報を持っているか?META情報をソーシャルメディアのプログラムに読んでもらうOGP(Open Graph Protocol)は、まるで独自ドメインのHTMLのページがFacebookのページかのように見せてくれる仕組みです。

OGPの設定の素晴らしい点は、

1.いいね!ボタンを押した情報が友達に飛ぶ
2.ニュースフィードでの表示内容を指定できる
3.いいね!ボタンが押されるとfacebookページが出来上がりアップデート情報を送れる

自分のウォールに表示されるだけでなく、友達のニュースフィードには飛んでくれるのが最大の利点です。

このOGP(Open Graph Protocol)のすばらしさが理解できたとしても、実際に設置してみようと思うと、いろいろわかりにくい部分もありますので具体的な手順をご紹介します。

<META情報の記述方法>

<html
xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">

<head>

<meta property="og:title" content="★記事タイトル★" />
<meta property="og:type" content="blog" />
<meta property="og:url" content="★ページurl★" />
<meta property="og:image" content="★画像url★" />
<meta property="og:site_name" content="★サイトのタイトル★" />
<meta property="og:description" content="★ページの紹介文★" />
<meta property="fb:app_id" content="★アプリID★" />


「いいね!」ボタンを設置するページのMETA情報で加える部分は以上です。


Movable Type の場合は、テンプレートで

★記事タイトル★
<$mt:EntryTitle$>

★ページurl★
<$mt:EntryPermalink$>

★画像url★
<$mt:If tag="EntryDataFacebook_image"$><mt:EntryDataFacebook_image><mt:Else>http://www.pb-support.com/img/pbsuppert2.jpg</mt:If>

★ページの紹介文★
<$mt:EntryExcerpt$> <$mt:EntryBody words="100"$>

のような感じで記述すればいいと思います。


★アプリID★は、Facebookデベロッパーズサイトのアプリ作成画面にアクセスし取得します。


■ OGPを設置したサイト名・URLを入力。




■ セキュリティチェックのワードを入力。




■ 「Create an App」というアプリIDの作成完了画面が表示される。



※ この画面の「アプリID」を★アプリID★の部分に書き替える。



次に、「いいね!」ボタンを設置する場所に以下のタグを記述する。
(Facebookデベロッパーズのブラグイン発行は現在、FBMLのみで不可)

<iframe src="http://www.facebook.com/plugins/like.php?href=★ページurl★" scrolling="no" frameborder="0" style="height: 62px; width: 100%" allowTransparency="true">
</iframe>

Movable Type の場合は、ブログ記事に以下で置き換える。
★ページurl★
<$mt:EntryPermalink$>



以上で、以下のようなOGP設定の「いいね!」ボタンが設置されます。



ページを見てくれたFacebook ユーザーが
「いいね!」ボタンをクリックすると、コメント欄が表示されコメントも同時に記入できる。



「いいね!」ボタンをクリックしてくれた人のウォールと、
そのお友達のニュースフィードに以下のように表示される。





いかがですか?簡単でしょう!?

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




このエントリーをはてなブックマークに追加



Check