共著「Facebookデザインプロフェッショナルガイド」本日発売

共著「Facebookデザインプロフェッショナルガイド」本日発売

Posted at July 14,2012 12:03 AM
Tag:[Book, Facebook]

執筆に参加させて頂いた「Facebookデザインプロフェッショナルガイド」と姉妹本「Facebookマーケティングプロフェッショナルガイド」が本日(7月14日)より発売になります。

Facebookデザインプロフェッショナルガイド/Facebookマーケティングプロフェッショナルガイド

Facebookデザイン プロフェッショナルガイド
蒲生 トシヒロ 小野寺 翼 藤本 壱 荒木 勇次郎 秋葉 秀樹 秋葉 ちひろ ホシナ カズキ 森 雅秀 和泉 裕臣 石川 雅之
マイナビ
Facebookマーケティング プロフェッショナルガイド
蒲生 トシヒロ 原 裕 井出 一誠 坂田 誠 竹村 詠美 伊藤 学 口田 聖子 高木 芳紀 神田 敏晶
マイナビ

「Facebookデザインプロフェッショナルガイド」は、前書「Facebookページプロフェッショナルガイド」の制作編を抜き出し、パワーアップを図ったものです。また仕様変更が頻繁に行われるFacebookの最新状況にも追従しています。

目次については「書籍「Facebookデザインプロフェッショナルガイド」予約開始」をご覧ください。

本エントリーでは私の担当した2章「Chapter2 Facebookページの作成/ソーシャルプラグインの実装」のSection7~9について簡単に紹介したいと思います。

Section7 ページタブの制作─基本編

基本編では、Facebookページのページタブの基本的な作成方法を解説しています(計11ページ)。

イメージ(注:拡大できません)
ページタブの制作─基本編

具体的には「Hello! World」というコンテンツを表示するだけのHTMLファイルを作り、Facebookページのアプリとして登録したあと、登録したアプリをページタブとしてFacebookページに関連づけるまでの手順を丁寧に解説しています。

また、ページタブをFacebookページに追加したときに一般ユーザーに非公開にした状態で表示を確認する方法や、ページタブ作成時の注意事項、ページタブの編集やスクロールバーを表示させない方法なども併せて解説しています。

本節をご覧になれば、HTMLベースのページタブの作成が(多分)行えるようになります。

Section8 ページタブの制作─WordPress編

WordPress編では、ページタブのコンテンツをWordPressのカスタム投稿タイプを使って連携させる方法を解説します(計13ページ)。

イメージ(注:これも拡大できません)
ページタブの制作─WordPress編

連携のメリットは、WordPressの情報をそのままページタブに利用できることです。テンプレートタグを使った情報の表示ももちろん可能です。

また、カスタム投稿タイプを利用するので、ブログ本体にページタブのコンテンツが表示されるという影響はありません。

さらに、jQuery UI Tabsを使って、ひとつのページタブに複数の記事を表示する方法も手順を追って紹介しています。

jQuery UI Tabsを使ったページタブのサンプルは以下のリンクからご覧になれます。

Facebookページ「小粋空間」- テーマ・プラグイン・書籍

WordPressとFacebookページを連携させる方法はいろいろあると思います。本節ではカスタム投稿タイプを利用していますが、応用のてがかりとなれば幸いです。

Section9 ページタブの制作─Movable Type編

Movable Type編では、ページタブのコンテンツをMovable Typeのウェブページを使って表示する方法を解説します(計9ページ)。

イメージ(注:しつこいですが拡大できません)
ページタブの制作─Movable Type編

WordPressと同様、テンプレートタグを使ってMTの情報をページタブに表示させることが可能です。

Movable Typeの場合、ウェブページがブログ本体に誤って表示されないよう、テンプレートの修正やプラグインを利用して隠蔽する方法も解説しています。

また、ウィジェットを使った画像の差し替え方法も紹介しています。

関連記事
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)