Facebookは最大のソーシャルネットワークであり、世界で最も訪問されたサイトの1つです。 その中にあなたは面白いステータスや好きな写真を投稿できるだけでなく、

強力なマーケティングツールとして使用します。 すべてが論理的です-10億人のユーザー、特定のオーディエンスをターゲットとする能力、インスタント広告、その他多数

オフラインでは利用できない便利な作品。 現在、独自のビジネスページのない会社や、ファンページのない人気者を見つけることは困難です。 この記事では試してみます

フロントエンド開発からこの問題の技術面を詳細に分析します。

この投稿はページ自体の作成には焦点を当てていません。これはかなり簡単な手順であるためです。ただし、自分で追加して必要なコンテンツを入力できるカスタムタブについて説明します。

誰でも、初心者のWeb開発者であっても、作成の原則とニュアンスの一部を知って、1晩でそのようなタブを多数作成できます。

あらゆる種類のウェルカムページ、お知らせページ、およびあらゆる種類の情報テキストおよびグラフィックコンテンツを含むページの大部分を意味します。 もちろん、動的な要素、フォーム、その他の機能を備えたより複雑なページには、さらに時間がかかります。









最初に明確にすることは、個人プロフィールではなく製品ページで作業していることです。コンテンツを含むタブを個人プロフィールに追加することはできません。

したがって、製品ページ（ブランド、会社、グループなど）にのみ独自のタブを追加できます。 そのようなページが存在しない場合は、次のリンクをクリックして作成する必要があります。

www.facebook.com/pages/create.php



そのようなページを作成するのに複雑なことは何もないので、このステップはスキップします。 さらに、クライアントがページのカスタマイズを要求した場合、ほとんどの場合、すでにページを持っています。



実際には、ポイントに。

カスタムタブを作成する

目次：

• 1.アカウントの準備
• 2.方法1：開発ツールを使用してアプリケーションを作成する
• 3.方法番号2：サードパーティアプリケーションを使用してタブを追加する
• 4.静的HTMLアプリケーションのインストールと設定：iframeタブ
• 5.静的Iframeタブアプリケーションのインストールと構成
• 6.タブを作成する主な手順。 オプション1-独自のアプリケーションを作成する
• 7.作成する基本的な手順。 オプション2-サードパーティアプリケーション
• 8.便利なサイズ

カスタムタブを作成するには、主に2つの方法があります。fb開発者のツールを使用して独自のアプリケーションを作成する方法、またはサードパーティアプリケーションを使用する方法です。 方法の選択は、TKと開発に割り当てられた時間に基づいて行う必要があります。 それぞれの方法の長所と短所を以下で説明します。このテーマに関する結論は最後にあります。



htmlコンテンツは既にコンパイルされ、パブリックftpサーバーにアップロードされていることがわかります。

アカウントの準備

Facebook開発ツールの使用は、次のページから開始します。



developers.facebook.com/apps



その上に、現在のアカウントに関連付けられている作成済みアプリケーションが表示されます。







ここでは、主に「 +新しいアプリの作成 」ボタンに関心があります



ただし、developers.facebook.comに初めてアクセスする場合は、いくつかの追加手順が必要になる可能性があります。

開発者は基本情報とパスワードへのアクセスを許可する必要があり、 アカウントの確認が必要になります。

これを行うには、確認コードとともにモバイルSMS番号に送信するか、銀行カード番号を入力します。 SMSは通常1分以内に届きます。

方法1：開発ツールを使用してアプリケーションを作成する

[新しいアプリの作成]をクリックするとすぐに、将来のアプリケーションの名前を入力してfbプラットフォームのポリシーに同意するよう求めるウィンドウが表示されます。







App Namespaceフィールドは空白のままにすることができます（Open-Graphおよびキャンバスページを使用する本格的なFacebookアプリケーションに必要です）。 続行したら、キャプチャを入力する必要があります。



送信後、アプリケーションのメイン設定が表示されます。 ここで、アイコンのダウンロード、名前の設定 、アプリケーションカテゴリの選択、その他の基本設定を行うことができます。 ただし、これらの操作はすべて将来のために延期し、後でそれらに戻すことができます。 ページの下部で、アプリケーションをFacebookに統合する方法を選択する必要があります。







目標は独自のカスタムタブなので、それに応じて[ ページタブ ]を選択します。



最初のフィールドでは、 タブの名前を示します 。次の2つでは、以前にパブリックサーバーのftpにアップロードされたレイアウトまたは動的コンテンツへの直接リンクです。



ただし、ここでは最初のニュアンスが待っています-SSL保護は 2011年10月からFacebookの必須要件であるため、必要なURLはhttpsプロトコルを介してアクセス可能であることが不可欠です







[ 変更を保存 ]ボタンをクリックすると、すぐに使用できるタブが表示されます。 必要に応じて、詳細セクションを開き、アプリケーションをさらに微調整できます。



ここで、作成したアプリケーションを必要なページに直接追加します。

Facebookページにアプリ/カスタムタブを追加する方法

1. developers.facebook.com/apps/にアクセスして、必要なアプリケーションを選択します。 ここでは、 App ID / API Keyフィールドが重要です：
   
   
   
   
2. ブラウザで、次のURLを作成します。
   
   
   
   www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
   
   
   
   
   
   YOUR_APP_IDの代わりにアプリID を代入し、 YOUR_URLの代わりに、 「ページタブURL」フィールドのアプリケーション設定で指定されたページへのリンクを示します
   
   
3. Enterキーを押して、表示されるウィンドウで、タブを追加するページを選択します。
   
   
   
   
4. [ ページタブの追加 ]をクリックします。すべてが正常に行われた場合は、YOUR_URLで指定されたページにアクセスできます。 製品ページwww.facebook.com/pages/your_urlに戻ると、既存のタブのリストの一番下に追加したタブが表示されます。 それらの下にある「編集」をクリックすると、タブの位置を変更できます。 ただし、 「Wall」および「Info」より上に上げると機能しません（タイムラインの導入まで関連） 。

独自のアプリケーションの主な利点は、 多くのパラメータを制御できることです。 アプリケーションのプロパティに移動すると、それらを微調整できます。 以前は、サードパーティのアプリケーションからのソリューションに対する追加の利点は、独自のタブアイコンをインストールできることでしたが、タイムラインの出現によりタブのデザインが変更され、タブの個人用の画像を設定しても問題は発生しません。



欠点には、2番目の方法と比較して作成時間が長いこと、およびいわゆるファンゲートを作成する複雑さが含まれます。 おそらく、さまざまなページでこのような時間を見たことがあります-いくつかの隠されたコンテンツを見るために「いいね」をクリックすることが提案されたとき。

方法2-サードパーティアプリケーションを使用してタブを追加する

現時点では、ページにカスタムタブを追加して設定できる無料のアプリケーションが多数あります。 Facebookの検索バーに「静的html」というリクエストを入力するだけで、結果で最も人気のあるアプリケーションを確認できます。







Facebookはhtml iframeを支持してfbmlを放棄したため、 FBMLアプリケーションは考慮できません。



最も一般的な静的HTMLアプリケーションであるiframeタブを考えてください。 アクティブなユーザーの数はそれ自体を物語っています。



[ アプリケーションに移動 ]をクリックすると、アプリケーション自体のページが表示されます。次のようになります。







その上で、 「ページに静的HTMLを追加」をクリックし、タブを追加するページを選択します。







操作後、新しいタブ「ようこそ」がページの左側に他のタブとともに表示されます。 Static HTMLアプリケーションの特徴は、灰色の背景にある白い星のアイコンです。



古いバージョンのタブ：





タイムラインのタブ：





タブの直接設定に移りましょう。 まず、名前を変更しましょう。 Facebookページの古いバージョンでは、このために、すでにインストールされているすべてのアプリケーションのリストに移動する必要がありました。 これは、最初の3つのデフォルトタブ（[はじめに]、[壁]、[情報]）で[ページの編集]をクリックすることで実行されました。







タイムラインでは、メインコンテンツの上のページ所有者に管理パネルが表示されます：







それから、ページのプロパティの編集モードに入る必要があります。







次に、必要なアプリケーションを選択し、 [設定の編集]をクリックします。 表示されるポップアップで、名前を変更するか、このタブを削除できます。







タブの名前を変更して、そのコンテンツに進みます。 これを行うには、タブの一般リストで選択します。 ユーザーが管理者アカウントでログインしている場合、設定ページが表示されます。 このタブを選択する他のすべてのユーザーには、そのコンテンツが直接表示されます。







Static HTMLアプリケーションにはファンゲートサポートがあり、これは主な利点の1つです。



コンテンツフィールドにhtml / cssコードを入力するか、iframeを使用して直接リンクを指定できます。







結果を表示するには、プレビューをクリックします。 プレビューウィンドウで、表示するコンテンツを選択できます。公開するか、ページが好きな人だけが利用できます。







このアプリケーションの主な欠点は、アイコンを変更できないことでした。 ただし、2011年の終わりに、開発者はこの機能を追加し、タイムラインインターフェイスの出現により、これは不要になりました。新しいモードでは、ユーザーが独自のイメージを設定することはもはや難しくありません。

「マジック*」ボタンをクリックすると、特にGoogleアナリティクスを設定してスクロールバーを強制的に非表示にする機能など、いくつかの便利な機能を見ることができます。







また、最も人気のあるアプリケーションの1つは「静的Iframeタブ」です







前のアプリケーションと同様の方法でページに追加されます。 ただし、静的iframeタブには、より広い範囲のタブコンテンツ設定があります。 すでにページに追加されると、

ユーザーには小さなウィザードが表示されます。このウィザードでは、プロファイルの画像をすぐに追加し、[About]フィールドに入力して、ページへのリンクに一意の名前を設定できます

上記の要約。 簡単な絞り

作成する基本的な手順。 オプション1-独自のアプリケーションを作成する

• 複雑さ、動的コンテンツ、カスタムアイコン、フォームなどの設計の分析
• 静的コンテンツのレイアウト。
• 外部サーバーへのファイルのアップロード。
• https経由でファイルにアクセスできることを確認します（2011年10月以降、FacebookではSSL保護が必須要件となっています）。
• 完成したレイアウトへのリンクが示されている設定で、Facebookアプリケーションを作成します。
• このアプリケーションをタブとして製品ページに追加します。
• タブの名前を変更します。
• 利益！

このオプションのプラス：

• アプリケーションとそのパーソナライズの完全な制御（プライバシー設定、アイコンの変更、多言語対応など）;
• サードパーティアプリケーションへのリンクの可能性の欠如、セキュリティの向上。
• 動作の安定性は、レイアウトが配置されているサーバーのみに依存します。

短所：

• 「ファンゲート」の設定が困難。
• サードパーティを接続するよりも少し長くアプリケーションを作成します。
• SSLを使用する必要性。

作成する基本的な手順。 オプション2-サードパーティアプリケーション

• 最初のオプションのステップ1〜2（分析、タイプセット）。
• 最適なアプリケーションを選択します。
• 製品ページでのアプリケーションのインストール。
• アプリケーションのセットアップ（レイアウトへのリンク、タブの名前の指定、必要に応じて「ファンゲート」の設定）
• 利益！

このオプションのプラス：

• 所望の結果を得るための比較的高速。
• 「ファンゲート」および類似のコンテンツアクセスオプションの設定の容易さ。
• 通常、クライアントでもコンテンツの簡単な構成と編集。
• httpsアクセスは不要です。

短所：

• アプリケーション開発者のサイトおよび「powered by ...」などのあらゆる種類の碑文へのリンク。
• アプリケーション自体とそのサーバーの両方の安定した動作には確実性がなく、Facebookの次のグローバルアップデートで動作を停止することはありません。 たとえば、次のように：
  
  
  
  
  
  

要約すると、サードパーティのアプリケーションを接続するオプションは設定が簡単で、独自のアプリケーションの作成時間を大幅に上回ると言えます。 追加のファットプラスは、ファンゲートを簡単に作成できることです。



マイナスの点として、標準アプリケーションアイコンの変更の難しさ、多くのアプリケーションの作成者のWebサイトへのリンク、およびこれらの開発者自身とそのサーバーへの依存性に注意できます。 同じStatic HTML iframeタブには数千万人のユーザーがいるという事実にもかかわらず、このアプリケーションはサーバー上の問題のためにしばらく動作を停止しました。 ただし、これは誰も気にしません。その結果、膨大な数の登録者がいるページで静的HTMLを見ることができ、標準のアプリケーションアイコンを自分のものに変更することさえ気にしません。



カスタムタブを積極的に使用する人気のあるページの例：



古いバージョン：







ご覧のとおり、これらのページはまだ3月30日に強制的に導入されるChronicle（タイムライン）の新しいインターフェイスに切り替えられていません。



新しいタイムライン：

便利なサイズ

• プロフィール/ブランドのプロフィール写真 ：幅：180ピクセル、高さ：540ピクセル
• カスタムHTMLコンテンツを含むiframeの領域を提供しました ：
  
  最大幅：520px（旧バージョン）、810px（タイムライン）、高さは無制限
  
  
• アバター （「いいね」ボタンまたは「共有」ボタンをクリックしたときのリンクと投稿の横の写真）：
  
  幅：90ピクセル、高さ：90ピクセル
  
  
• アップロードの最大画像サイズ ：幅：2048px、高さ：2048px
• アルバムまたはスライドショーで表示するための最大可視画像サイズ ：幅：960px、高さ：720px
• 広告内の画像 ：幅：110ピクセル、高さ：80ピクセル、高さ：5 MB
• 広告テキスト ：見出し：25文字、本文：135文字
• ステータスの更新 ：長さ：63,206文字
• タイムラインのカバー ：幅：851px、高さ：315px
• コメント::長さ制限なし
• ビデオ ：サイズ：1024、時間：20分

derSmollで準備された資料