2011年04月11日

cakePHP Facebook用Ogpヘルパー

お願いします♪いいねとかつぶやいたりして下さい
 
2012/05/11 追記

http://www.hideblog.net/nikkis/show/260/

のがいいよ。


facebookのOGPとは



いいね をクリックしたときにウォールに流れる説明文と画像を設定できる



で、これをcakephpでやるには。

v0.3 params を options に変更
○Ogpヘルパー
class OgpHelper extends AppHelper {
	
	var $options = array();
	
	//ogpヘルパー
	function show()
	{
		$params = Set::merge(
			array(
				'type' => 'website',//blog,article,website
				'title' => TITLE,//タイトル
				'image' => 'http://www.hideblog.net/app/webroot/img/kome.gif',//サムネイルのURL
				'description' => "setume-",//ウェブページの説明
				'site_name' => TITLE,//サイト名	
			),
			$this->options
		);
		
		$res = array(
			'0' => '<meta property="fb:app_id" content="'.Configure::read('ogp.fb_app_id').'">'
		);
		
		foreach($params as $key => $v){
			$res[] = '<meta property="og:'.$key.'" content="'.$v.'" />';
		}
		
		$res = implode("\n",$res);
		
		return $res;
	}
	
}




上記の type やら title やらで初期設定をしておく。

○bootstrap.php
//facebook用 ogp
Configure::write('ogp.fb_app_id','21571*************');


○default.ctp レイアウト
//<title>タグの直下に
<?=$this->Ogp->show();?>


とりあえず、これでOGPタグを設定することができる。

各ページからOgpタグの内容を変更したい



○適当なビュー
<?
    $ogp->options = array(
        'title' => TITLE.' '.$title_for_layout,//タイトル
        'image' => 'http://www.hideblog.net/app/webroot/img/facebook.jpg',//サムネイルのURL 100x100以内の正方形
        'description' => $title_for_layout.' についての解説',//ウェブページの説明
        'site_name' => TITLE,//サイト名
    );
?>


こんな感じで上書きすることができる。

ogpタグを設定するときの注意点



まずは fb:app_id を取得。アプリID。
http://www.facebook.com/developers/apps.php

上記で sign up new app をクリック。

で、登録したサイトを選らんで

設定を編集 > about
そして website を指定する。

これを設定して

http://developers.facebook.com/tools/lint
で、正常にタグが読み込まれているか確認。

ここまでが正常に出来ていないと、いいねをクリックしてもボタンが戻ってしまい、
イイネを押せなくなる。

設置が完了したら facebookの自分のウォールに
http://www.hideblog.net?id=9
といった感じで書き込んでみるとうまく表示できるか確認できる。

ここで重要なのは id=9 。facebookはキャッシュを効かせるのですぐに反映されない。
また、一度使ったidはキャッシュするのでどんどん変更するように。


image は jpg以外は使えない?また、100x100のような正方形サイズじゃないと使えないときがある?

htmlタグは
<html lang="ja" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml"&gt;


にしないといけない。
最後はエスケープされてるけど、 > で。

関連するタグ: PHP cakephp facebook
あなたにとって有用な記事でしたか?是非ブックマークしておくことをおすすめします。
 




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




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