2012年05月11日

facebook ogp設定

お願いします♪いいねとかつぶやいたりして下さい
 
2012/06/13追記
html5バージョンの時、
の data-href を以下のようにしないと各ページ毎にいいねできず、バグる。

 <div class="fb-like" data-href="<?=FULL_BASE_URL.$_SERVER['REQUEST_URI'];?>" data-send="false" data-layout="box_count" data-width="100" data-show-faces="false" style="margin-top:-42px;"></div>


新規サイトはまずアプリの登録から
http://developers.facebook.com/setup/

「App Display Name」がユーザーに表示される名称で、これは日本語でOK。
「App Namespace」は内部的な名称で、他ですでに使われているものは登録できません。
また、Facebook上のアプリの場合はこのNamespaceがアプリのURLになるので、なるべくわかりやすいものが良いでしょう。

2つの名前を入力し、「I agree to 〜」にチェックして「続行」をクリックすると、セキュリティチェックのためのCAPTCHAチェックのポップアップが表示されます。

☆注意
cakephp のキャッシュを有効にしていると当たり前だが、反映されない場合がある。
必ず設置後、全てのキャッシュを削除してからテストすること

URL解析エラー:Error parsing input URL, no data was scraped.

管理画面の
Website with Facebook Login にドメインを指定する
http://www.hogeman.com

<h3>手順</h3>

・jsタグ取得
https://developers.facebook.com/docs/reference/plugins/like/

・body直下に js を
・表示したい箇所に div タグを
それぞれ設置。


・ヘッダに以下を追加
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"&gt;
<head>
<?=$this->element('ogp');?>//ogpエレメント


・config.php に サイトタイトルを定数で指定
define('TITLE','相性占い');

・ogp.ctp エレメント
これは占い師ページなら占い師の画像。
それ以外ならサイトロゴを使うような設定にしてある。
随時変更してね。

ogpについて
og:type
ブログのタイプは直接記述します。記事ページは「article」、それ以外は「blog」でいいと思います。

article
blog

fb:admins 確認
http://www.promeshi.com/archives/1042

<? if(isset($this->viewVars['title_for_layout'])): ?>
<meta property="og:title" content="<?=$this->viewVars['title_for_layout'];?> - <?=TITLE;?>" />
<meta property="og:site_name" content="<?=$this->viewVars['title_for_layout'];?> - <?=TITLE;?>" />
<? endif; ?>
<? if(!isset($this->viewVars['title_for_layout'])): ?>
<meta property="og:title" content="<?=TITLE;?>" />
<meta property="og:site_name" content="<?=TITLE;?>" />
<? endif; ?>


<? if(is_array(isset($this->viewVars['res']['Attachment']))): ?>
<meta property="og:description" content="<?=truncate(h($this->viewVars['res']['Host']['message'],60));?>"/>
<meta property="og:type" content="article" />
<meta property="og:image" content="<?=FULL_BASE_URL;?>/app/webroot/media/filter/m/img/<?=$this->viewVars['res']['Attachment'][0]['basename'];?>" />
<? endif; ?>


<? if(!is_array(!isset($this->viewVars['res']['Attachment']))): ?>
<meta property="og:description" content="出張ホストSWEET。出張ホスト募集中!"/>
<meta property="og:type" content="blog" />
<meta property="og:image" content="<?=FULL_BASE_URL;?>/app/webroot/img/facebook.png" />
<? endif; ?>

<meta property="og:url" content="<?=FULL_BASE_URL.$_SERVER['REQUEST_URI'];?>" />

<meta property="fb:admins" content="1000023fwea14120492" />
<meta property="fb:app_id" content="40fewa3767499673811" />
<meta property="og:locale" content="ja_JP" />


ogpの画像は横長だとうまく表示されないので
100x100ぐらいの画像を作った方がいいかも。

設置後のテスト urlリンターでテスト
https://developers.facebook.com/tools/debug

で、最後にテストと。
しつこいようだがキャッシュは必ず全削除してからテストする!
関連するタグ:
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




ライブラリを配布しちゃったり
webデザイン
Fireworks
HTMLコーディング
CSS
Dreamweaver
携帯サイト
webプログラム
PHP
正規表現
cakephp
MYSQL
javascript
webマーケティング
adwords
analytics
windows7
ショートカットキー
おすすめ情報
サイト
facebook
ライブラリ
配布
アプリ
iphone
ipad
サーバー
さくらサーバー
全ての記事を読む




トップ - 最新の記事一覧 - お問い合わせ