月別: 2012年7月

OGP設定の確認

OGPの記述が終わったら facebook のツールを使って
認識が正常に尾篭なWれるかどうかを確認できます
facebook developers サイトを開いて
SDKs & Tools のメニューからTools をクリックし
Debuggeer をクリック
この Degugger は
URLかアクセストークンを
テキスト欄に入力すると、それらの情報を表示する
URL入力の場合だと
OGPの確認と、よりOGPを効果的に使うためのアドバイスが表示されます
アクセストークン入力だと
アプリID、ユーザID、有効期限、許可されている権限などが
表示されます
ちなみに、Debugger のURLは
https://developers.facebook.com/tools/debug
となります

og:type に設定できる content属性

og:type に設定できる content属性と内容についてです
music.song
楽曲
music.album
音楽アルバム
music.playlist
プレイリスト
music.radio_station
ラジオ局
video.movie
映画
video.episode
テレビドラマ放送
video.tv_show
テレビ番組
video.other
その他動画
article
記事
book
書籍
profile
人物
website
webサイト
となっています

OGP の設定項目

OGPを設定するには　meta 要素を使い
proptery属性と content属性を対にして記述します
まずはOGPのプロパティのメモです
og:title
Webページのタイトル
og:type
OGPのタイプ
og:url
web ページのURL
og:image
webページを代表する画像URL
og:desctiption
webページの簡単な説明
og:audio
伴奏
og:determiner
a an the “” auto の中からタイトルに付加される冠詞を指定
og:locale
使用されている言語
og:locale:alternate
代替の言語
og:site-name
サイト名
og:video
補足のための動画URL
og:image:url
画像のURL
og:image:secure_url
画像のHTTPSでのURL
og:image:type
画像のMIMEタイプ
og:image:width
画像の幅
og:image:height
画像の高さ

OGP について

OGP
Open Graph Protocol
は、webページをそーしゃるぐらふにおいて
より効果的に目立たせることができる共通規格です
Facebook 以外にも mixi Gree などでも使われます
OGPのサイト
mixi Developer Center の技術仕様
Gree Developer Center : Social Feedback
OGP はHTMLの meta 要素として記述するなど
以前から存在している webページの検索エンジン用の説明、
キーワード記述ににているところがあります
ほかにも、表示する画像の指定
webページのタイプ指定
タイプごとに詳細を記述できます
書籍の解説をみて、一番興味深かったのが
その使いかたの例でした
（発想例だけで、ソースが載っていないのが残念ですが）
飲食店のwebページについてOGPを使うとOGPの記述として
緯度経度情報を埋め込むことができて
対応しているシステムからは経路案内を行ったり
住所を表示したりすることが可能になる
ある映画のｗｅｂページのOGPについてタイプを映画に指定しておくと
閲覧したfacebookユーザが web ページに設置された like プラグインから
いいね！
を下ときに、
ユーザプロフィールの好きな映画の欄にその
いいね！
したwebページが追加されるということもできます
どちらかというと、上記のナビのようなものに興味をもちます
OGPを適用するには
META要素で
OGP専用の記述を行うために
XML名前空間を宣言します
OGP用のなめ空間野多目の接続群は
og:
HTML要素開始時と
HEAD要素開始時に以下のように属性を記述します
<html xmlns:fb=”http://ogp.me/ns/fb#”>
<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#”>
fb: は
FBXML以外にも使います
OGP では
fb:admins
fb:app_id
としてプロパティで使います

wordpress がコンテンツを表示する仕組みについて

wordpress がブラウザにコンテンツを表示するときにDBへのアクセス を
行った結果をテンプレに従って出力している
テンプレはテーマといわれ
サイト構成用ファイル群の１つをになっていて
現在のテーマは Twenty Ten 1.3
Twenty Eleven 1.3
がインストールされ、デフォルトでは
Twenty Eleven 1.3 が使用される
テーマで使われるテンプレファイルは
固定ページ、瞳子などの種類ごとに複数作成できるが
得提要と向けのファイルについて優先度が高く
汎用的なものは優先度が低いという、ちょっと変わったものになっている
このため一番優先度が低いファイルは
index.php
でも、スタイルシートをきめる style.css とともに必須ファイルなので注意
ほかのファイルとして
ホームページ用の home.php
固定ページ用の page.php
個別投稿に使う single.php
HTTPステータス 404 に使う 404.php
関数の設定につかう functions.php
これらのファイルを編集していくことで細かいページ出力もかのう
ちなみに、404 はページがみつかりませんでした
というときに表示する
一般的なのは Not Fund (みつかりませんでした）というページ
にたようなものとして
500
でもこっちはプログラムに異常があるときに表示される
Internal Server Error とでる
これは、自作プログラムのときによくみかけるもの

jQueryで読み取り専用の幅、高さ取得メソッド

jQueryでは、幅、高さを取得するメソッドがあります
ただし、読み取り専用なので
値の設定はできません
コンテンツ本体のサイズ取得なら
height()
width()
枠と本体までの余白サイズ取得なら
padding()
余白+コンテンツ本体のサイズ取得なら
innerHeight()
innerWidth()
これらを、囲う枠線の太さは
border-width()
余白+コンテンツ本体+枠線のサイズ取得なら
outerHeight()
outerWidth()
これら全部と他の要素との余白サイズ取得なら
margin()
margin()込みのサイズ取得なら
outerWidth()
outerHeight()
こちらは引数がtrueになります

wordpress のカスタマイズ

wordpress をfacebook アプリで使うように改造します
cd wordpress/wp-content/themes/twentyeleven/
でディレクトリ移動して
rm -f 404.php
rm -f archive.php
rm -f author.php
rm -f category.php
rm -f comments.php
rm -f content.php
rm -f content-*.php
rm -f page.php
rm -f single.php
で不要なテンプレファイルを削除
さすがに、いきなり消去では不安なので
mkdir ~/wp-tempre-backup
でディレクトリ作成して
cp ../* ~/wp-tempre-backup
として、全ファイルをバックアップしておきます
続いて
cp -rp /var/www/cliping/fb-sdk .
で現在のディレクトリに fb-sdk をコピーします
これで、下準備はOKなので、書籍を参考に
wordpress のテーマを改造していきます