background preloader

Facebook

Facebook Twitter

ブログやホームページに「いいね!ボックス」を設置する. スタート. Facebookページの作り方 2012年1月版. 一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんw 今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。 冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。 それほどFacebookは仕様変更のスパンが短いのです。 この記事もあと半年後には書き直しなのか…そうなのか…。 基本的なFacebookページの作り方 まずはFacebookページを新規作成します。 カテゴリーを選びます。 はい完成! 画像を追加したら右上の「Facebookページを編集」をクリック。 「基本データ」からFacebookページの基本情報を入力しましょう。 「ウェルカムページ」の作成 「ウェルカムページ」は、Facebookページへ初めて訪れたユーザーに表示されるランディングページです。 「Facebookページを自由にカスタマイズする方法」で紹介した時との一番の変更点は、iframe(インラインフレーム)を使うことになった点です。 ただし、注意しなければいけないのが、そのiframeで表示するページは2011年10月1日からSSL必須となりました。 それではSSLが利用できることを前提に手順を紹介します。 1. iframeの中身を作成 画像一枚でも、HTML/CSSを使った簡単なランディングページでも、PHP等プログラミングを使った本格的アプリでも何でもOK!

追記:大事なことなのに書き忘れていたので追記。 リンクターゲット iframeなので、ターゲットを指定しないとiframe内に表示されてしまいます。 Iframeのサイズ 規定のサイズは幅520px、高さ800pxです。 問題は高さです。 追記(2012/1/10/15:30):コードを最新のものに変更しました。 以上の点に注意してiframeページが完成したらサーバーにアップロードします。 2. Facebookページのコンテンツはアプリとして登録します。 まずは「Facebook開発者」ページへ行き、「アプリ」をクリック。 3. 参考サイト: Facebookページにウェルカムページ(iframe)をアプリで追加するメモ - ホームページでの集客強化. FacebookページのIframe仕様で出てしまうスクロールバーを消す覚書 Eitoku's Blog. FacebookページをIframeでカスタマズすると、ある一定の縦の長さで、スクロールバーがでますね。 これ、いやじゃないですか? パソコンによっても出現したりするし。

これをなんとかしたくて、いろいろ調べ、ようやくスクロールバーを消す事が出来ました。 その方法を書きたいと思います。 ●手順 手順といっても難しくはありません。 Iframe版ページタブでもFB.Canvas.setAutoResize()できる : Facebook開発者向けドキュメントの日本語訳とTips そのスクリプトは これをコピペして自分のアプリIDを入力を入力。 の真下に貼りつけました。 Iframe化したページタブでは高さ800px固定のようなのですが、このソースはiframe内のコンテンツのサイズが変わると自動でリサイズしてくれるソースなので、スクロールバーが消えるというわけです。 ページを開いた一瞬だけスクロールバーが表示されますが、自動で消えます。 ちなみに FB.Canvas.setAutoResize(); の部分を、自動リサイズではなく、長さを確定したソースに変換すると下のようになります。

ブログで記載されていた長さで転載していますが、実際2000にしてやって、確かに問題無く動作しました。 ●横のスクロールバーを消す もし、横のスクロールバーが気になる! 自分は、スクリプトに関しては素人も素人なので、配置等は結構適当です。 ●問題が… 自動リサイズのスクリプトのせいなのか、もともとChromeがそうなのわからないのですが、ChromeでみるとソーシャルプラグインのFacebookのコメント欄が、とても狭く表示されてしまうのです。 動きが変な所もあり、表示された! Firefox,IE コメント欄はしっかり出ています。 Chrome 短い…。 この問題もいろいろやったのですが、全然だめでした….Chromeをメインで使っている自分には致命的です... もしわかる方がいたら、教えて欲しいです(>_<)使用しているのはChrome8です。 iFrameによるFacebookページ作成法と6つのポイント. Sponsored Link 先日はじめたばかりなのにFacebookについて語るのも偉そうかもしれませんが、せっかくiFrame形式のページを設置したので、その作成方法や個人的に悩んだところをまとめてみます。 今回はiFrameを使ってFacebookページを自由にカスタマイズする方法を紹介します。

Facebookページ自体はログインした状態で「Facebookページを作成」にアクセスすると作成することができます。 今まではFBMLというFacebook独自の言語を使っていたのですが、現在はiFrame(インラインフレーム)に移行されています。 ということで、上の赤い部分に、自分で用意したサーバーのページを表示するということになります。 移行の理由はよく知りませんが、iFrameだとユーザーがサーバーを用意しないといけないので、やはりサーバーの負担を考えてなのでしょうか。 個人的にインラインフレームはあまり好きではないのですが、わけの分からないFBMLなんて言語を勉強するより、使い勝手はいいです。 iFrameへの変更にはこんなメリットがあるかなと思います。 今までの知識でページを作成できる phpなどのサーバーサイドスクリプトが使用できる Google Analyticsのトラッキングコードが追加できる アプリの登録 iFrameによるページを設置するにはアプリとして作成しますので登録が必要となります。

登録の際にインラインフレームで読み込むページのアドレスが必要となるため、ページ内容は後でもいいのでアドレスだけは決めておきましょう。 ではまず、アプリケーションを作成ページにアクセスします。 アプリケーション名を入力し、規約に同意します。 するとセキュリティチェックが必要となります。 次から具体的にアプリケーションの内容を編集します。 左にタブがあり色々編集できますが、とりあえずは登録に最低限必要な「about」と「Facebook Integration」を紹介します。 【about】 アイコン - 16×16サイズでサイドに表示されますロゴ - 75×75サイズですが公開しないしあまり必要ないかもメールアドレスは登録されているものが最初から入力されてます【Facebook Integration】 Canvas Page - アプリのベースURL。 これで、登録は完了です。 1. 2. Css 3. Facebookアプリが追加できない. ローカルビジネスの店舗オーナー必見!Facebookページをチェックインスポットと統合する方法. ソーシャルメディア集客ラボの伏田です。 先日の記事、「こんなクーポンあり? ちょっと変わった飲食店のFacebookチェックインクーポン10選」で多数のお問い合わせをいただきました。 多くは「Facebookページとチェックインスポットの統合ができない」というお問い合わせでした。 チェックインとの統合はFacebookに店舗を登録するような対応になります。 そんな方のために、Facebookページとチェックインスポットの統合方法についてまとめてみました。 また、Facebook側での変更が頻繁に起こる可能性もありますので、その場合は都度更新していきます。 チェックインクーポン発行までの3つの手順 Facebookページでチェックインクーポンを発行するまでの3つの手順をご紹介します。 チェックインスポットにオーナー申請するチェックインスポットとFacebookページを統合するFacebookチェックインクーポンを発行する チェックインスポットにオーナー申請する ①チェックインスポットの登録状況を確認する まずは、チェックインスポットが登録されているかを調べます。

登録されている場合は、そのページをクリックするとチェックインスポットのページが開きます。 ②チェックインスポットが登録されていない場合 登録されていない場合は自分でチェックインスポットを追加する必要があります。 モバイルでFacebookにアクセスする(アプリでも可能です)。 なお、登録する際は店舗など実際に登録する場所で行ってください。 右上の「+」ボタンをクリックするとチェックインスポットの登録ページに進みます。 チェックインスポットが登録されている場合はこのときにスポット名が表示されます。 チェックインスポットに登録する名称を入力します。 後ほどご説明しますが、この名称は統合するFacebookページと同じ名称にする必要があります。 スポット登録が完了したら、オーナー申請に進みます。 ③チェックインスポットが既に登録されている場合 チェックインスポットのページを開き、右上に表示される歯車ボタンをクリック後に、「このスポットのオーナーの方」という箇所ををクリックします。 チェックボックスにクリックを入れて、「認証を実行」をクリックします。 スポット登録に必要な項目を入力します。 メールまたは文書を使用して認証を行います。 ①事前準備をする ○提供内容を指定. Facebookページタイムライン完全ガイド. 2012年3月、Facebookページにタイムラインが導入され、また仕様が大幅に変更になりました。 3月30日にはすべてのFacebookページが移行する予定となっています。 それまでは、プレビュー期間として、内容の調整をすることができます。 また、手動で切り替えることもできます。 今回、Facebookページにタイムラインが導入されたことは、見た目が変わっただけなく、運用方式にも影響を与えます。

そこで、今回は「Facebookページ完全ガイド」シリーズの最新版として、タイムラインの設定と運用のコツについて紹介していきます。 なお、個人プロフィールページのタイムラインについては、「Facebookタイムラインを適用しよう:変更方法と使い方まとめ!」 Facebookページをタイムラインに移行するには タイムラインに切り替えていないFacebookページを表示すると、上部にタイムライン切り替えを誘導するメッセージが表示されます。 プレビュー後、「今すぐ公開」をクリックすると、全ユーザーにタイムラインが表示されることになります。 Facebookページにメッセージが表示されない場合は、「新Facebookページ」をクリックして、「ページをプレビュー」ボタンをクリックします。 Facebookページがタイムライン化したことによる変化 Facebookページのタイムライン化による変更点を整理してみましょう。 ①カバー写真 タイムラインになったことにより、カバー写真を利用できるようになりました。 カバー写真のサイズは、横縦が851px × 315pxで、横幅が小さい場合拡大されます。 カバー写真を設定するには、「カバーを追加」をクリックして、すでにアップしている写真を選択する場合は「写真アルバムから選択」をクリックして追加、PCに保存している写真を選択する場合は「写真をアップロード」をクリックして追加します。

カバー写真の制限 カバー写真には、企業や製品、サービスのブランドイメージを想起させるようなものを用意しましょう。 ただし、以下のようなものは含めてはいけないと、規約に書かれていますので、十分注意してください。 ・価格や購入情報。 画像を上げるときのメッセージにテキストもだめ、というように表示されるので、上記のようなものを含まなくても、文章を使ったアピールも、規約違反になる可能性があります。 ②プロフィール写真. Coca-Cola. さぁ!facebookページをタイムライン化しよっ...とその前に(注意点とNG行為) - webマーケティング入門. タイムラインのサイズはこれで完璧!新Facebookページの写真サイズまとめ. ソーシャルメディア集客ラボの伏田です。 3/31に変更になるFacebookページで一番変わるのは、Facebookページの写真のサイズです。 ユーザーからは、タイムラインの1ページしか見られないデザインのため、サイズにあった写真をアップしていくことが重要です。 プロフィール写真の画像サイズや、投稿の画像サイズなど、しっかりと合わせて表示するとよりページが美しくなります。 まずは、サイズを確認してから新Facebookページの移行に対応していきましょう。 今回はより理解しやすいように、StarbucksのFacebookページをもとに解説していきます。 新Facebookページのサイズ一覧 新Facebookページで表示される写真のサイズをまとめました。 1.カバー写真 851px × 315px Facebookページの一番上に表示される写真です。

2.プロフィール写真 180px × 180px(※160px ×160pxで表示されます) Facebookページとして投稿やコメントをするときに表示される写真です。 3.アプリイメージ写真 111px × 74px 新Facebookページでの新しい機能です。 アプリの設定編集から「カスタムタブの画像 」をクリックすると写真をアップすることが可能です。 4.投稿写真(通常) 404px × 404px 写真を投稿すると通常はこのサイズでアップされます。 このサイズより小さい写真をアップすると、写真が目立たなくなりますので、できるだけ大きなサイズの写真をアップするようにしましょう。 5.投稿写真(ハイライト) 843px × 403px 投稿した写真を「ハイライト」にするとこのサイズで表示されます。 アップした写真の右上から星マークをクリックすると「ハイライト」として、大きいサイズで表示されます。 全写真サイズのまとめ. Social Plugins - Facebook開発者. フェイスブックの使い方! Facebook初心者の為の入門基礎講座|Ameba (アメーバ) Facebookページにオーナーを表示する. Facebookページにオーナー(管理人)を表示するカスタマイズを紹介します。 通常、Facebookページの管理人はFacebookページ上に現れないようになっています。 このカスタマイズを行えば、Facebookページのオーナーを左サイドバーに表示することができます。 カスタマイズ後のFacebookページ(赤枠部分にオーナーを表示) 1.オーナーを表示する Facebookページのウォールなどの右上にある「Facebookページを編集」をクリック。

左メニューの「掲載コンテンツ」をクリック。 「ページオーナーを追加」をクリック。 表示したい管理人をチェックして「保存」をクリック。 これで冒頭のスクリーンショットのようにFacebookページの左側に表示されます。 2.オーナーを非表示にする 非表示にする場合は「ページオーナーを編集」をクリックして、一覧からチェックを外します。 成功しているFacebookページのウェルカムページまとめ | Facebook Lab|フェイスブックラボ – Facebookの最新情報からFacebookページ制作まで. 夏も本番が近付いてまいりました。 みなさま夏祭りや花火大会とか行かれましたか? 私はまだどこにも行ってません。 竹取の湯しか行ってません。 今年は地震の影響で警備の人員確保が出来ず、花火大会も例年に比べて少ないようでちょっと残念です。 さて、今回はちょっと趣向を変えて、いろいろなFacebookページのウェルカムページを見てみようと思います。 何度か説明したように、Facebookページで成功のカギを握る第一ステップは何といっても「いかにイイネさせるか」につきます。 アクセス数が多くてもイイネ押されなくては意味がないわけですね。 「ウェルカムページ」はイイネボタンを押させるためにあると言っても過言ではありません。 レッドブル ウェルカムページで最も印象に残っているのはやはりレッドブル。 コカ・コーラ 「コラ・コーラが好き? オレオ こちらも上記のコカ・コーラと同じ感じですね。 無印良品 こちらは無印良品のウェルカムページ。 ローソン どーんとキャンペーンを告知しているのはローソンのウェルカムページ。

ユニクロ オシャレの一言につきるユニクロのウェルカムページ。 動画を表示しているANAのFacebookページ。 東急ハンズ こちらも、ウェルカムページというより、東急ハンズの配信する動画を表示しているページをデフォルトに設定しているようです。 Satisfaction guaranteed 日本のFacebookページの代名詞ともいえる、「satisfaction guaranteed」のウェルカムページ。 Apanese Origami Yakimono. ANA.Japan. Disney - Disney Pages.