Cutting Edge

基本的な Facebook プログラミング: ウィジェットとタイムライン (機械翻訳)

Dino Esposito

Dino Esposito以前のコラムで Facebook のプログラミングのいくつかの基本的な側面をカバーする後は今ツールと表示および他の手段を通じて共有し、ビジネス インテリジェンス (BI) 分析など、他の何かをカタログするために、Facebook の壁からコンテンツを取得する方法を説明します。

Facebook は、すべての企業は社会の世界への関心の同じレベルがあります。私が学んだ 1 つのレッスンは、すべての企業では、定期的に社内の部署— 通常マーケティング — 終了お客様、多分より近づいてで強い関心を持つ重要な会社に近づく顧客を持っていること。Facebook のファンページの連絡先を誘致するためのツールの 1 つの数あり、好きなものと、ページ上のアクティビティ レベルのイニシアチブの成功を測定することができます。

プログラミングが合うどこですか?生きていると蹴り、Facebook のページを維持して「このことについて話して人々」の数が増加するユーザーの活動を刺激するには、興味深いコンテンツを投稿する必要があります — と頻繁に。時々、会社を研究して、Facebook のページのコンテンツを作成する人のスタッフを余裕ができます。時に、代わりに、Facebook ページの良いコンテンツ事業の通常の流れからまっすぐ来る。この場合は、Facebook のページに何をやっている報告に余分な時間を確保する、通常の業務を行う従業員の少し問題となります。たとえば、ニュース Web サイトに掲示されるに想像してください。内部ワークフローそれ承認、内部システムの公開とするコンテンツ管理システムの待機を得るテキストを準備する必要があります、サイトのライブ。同じニュースは facebook を利用して公開する必要がある場合は、あまりにも、時間のほとんどは同じ人 Facebook のページに管理者として開き、ちょうど手動でコンテンツを投稿します。それ多くの場合今日では、この方法を動作しますが、スケール アプローチではないです。これは Facebook のプログラミングに合うです。

投稿を超えて

この列の最近の記事では、私は Facebook のウォールへの投稿の主要なトピックに対処し、Web サイトとデスクトップ アプリケーション構築の基礎のユーザーの Facebook アカウントに対話することができます (での私のすべての列を参照してくださいすることができます bit.ly/hBNZA0)。最新のターゲットの壁、同社のファンのページ、エンタープライズ シナリオでは、アプローチは本当に異なるではないです。すべての変更は投稿を受け取るアカウントです。

従って Facebook プログラミングへの第一歩は、間違いなくあなたのソフトウェアの制御下で自動化された方法で特定の壁にコンテンツを投稿する方法を見つけることです。

時間をかけて、通常マーケティング コミュニケーションを含む会社のファンのページに共有コンテンツは有用なリソースは会社のためになります。それは会社を取得、さらに共有または分析する必要があります貴重な情報になります。これは Facebook のプログラミングのための別の偉大なフィットです。

ようなボックスのウィジェット

あなたのサイトにいくつかの Facebook のコンテンツを追加するには、迅速かつ簡単な方法のようなボックス ウィジェットを通じてです。ウィジェットは、Facebook のページ、ページのようなユーザーのリストを指定した最近の投稿を一覧表示します。Web サイトは facebook を利用して発行されたコンテンツを使用して興味を持って、これは達成するために最初のステップです。Facebook のようなボックス社会プラグインは Facebook のファンページを使用して、個人の Facebook のアカウントに接続する場合は動作しませんを注意してくださいすることが重要です。

また、Facebook のファンページとプロファイル ページを区別に注意してください。個人のプロフィール ページであるに対し一番下の行のファンページ企業にとっては、です。許可されたアクションに関する限りいくつかの違い、2 つの間があります。第一に、人のチームはファンのページに管理者権限を持つことができます。さらに、彼らはそれらを受け取ることができます最高 (まあ、ファン、実際に) の信者に達するのでファンのページからの投稿の言語と場所によって具体的に対象とすることができます。ファンのページの追加機能をサポート、広告経由で昇格することができ、記事を主催します。

逆に、プロファイル ページは所有者の友人や家族と連絡できるようにするものです。サブスクリプション メカニズムを通じてあなたのアップデートを得るために友人を許可することができますが友人であることと、更新プログラムを入手するための必須条件になります。

Web ページのようなボックスの設定は簡単にできませんでした。表示されているコンテンツをプレビューし、Facebook の開発者サイトから直接関連する HTML を取得することができます。Bit.ly/hFvo7y、ライブ ・ デモを。最後に、それが iframe 要素を設定するには、長い URL をすべて配置についてです。図 1 の URL を使用することができますパラメーターを示します。

Facebook のようなボックスを設定する図 1 のパラメーター

[パラメーター] 説明
href ようなボックス機能では、Facebook のファンページの URL を示します。
[width] プラグインのピクセルで、新しい幅を示します。既定の幅は 300 ピクセルです。
高さ プラグインのピクセル単位の高さを示します。既定の高さが固定されていないと顔とストリーム表示するかどうかによって異なります。一般的に、ニュースのストリームを持っているつもりならは 500 ピクセルを許可する必要があります。
colorscheme プラグインの配色を示します。あなたは 2 つのオプションがあります。光や暗い。
show_faces プラグイン プロフィールの写真を表示するかどうかを示します。딓믦뭠궼 true 궳궥갃
ストリーム プラグイン ページの壁からの最新の記事を表示するかどうかを示します。
header ブール値パラメーターは、非表示または既定 Facebook ヘッダー プラグインの上部に表示されます。
border_color プラグインの境界線の色を示します。
force_wall 場所に、ページを参照する場合、このパラメーターでは、ストリームが場所の壁からの投稿や友人からのちょうどチェックインに含めるかどうかが示されます。딓믦뭠궼 false 궳궥갃

示すように、すべてを行うが URL を手配し、iframe にバインド図 2

図 2 URL は Iframe をバインド

<iframe src
="//www.facebook.com/plug-ins/likebox.php
  ?href=http://www.facebook.com/etennisnetpage
&width=292&height=490
&colorscheme=light
&show_faces=false
&stream=true
&header=true
&appId=xxxxxxxxxxxxxxx"
  scrolling="no"
  frameborder="0"
  style="border:none; overflow:hidden; width:292px; height:590px;"
  allowTransparency="true">
</iframe>

それのようなボックスは、デスクトップ アプリケーションでも埋め込むことができます言うまでもなく (、Windows Presentation Foundation など — または WPF — アプリケーション)、WebBrowser コントロールを介して。

ことができますが、プラグイン動作する時間のほとんどはいくつかのクイック スタイルができます。ただし、(それが可能であり、文書化されたですという程度に)、独自の CSS を適用する場合は HTML5 と JavaScript のようなボックスを埋め込む必要があります。図 3のようなボックスのサンプル サイト カスタム、定期的 (ライト) のスタイルの出力を示しています。


図 3 サンプル ボックスのような

プラグインの活動

特定の既存の Web ページまたはデスクトップ アプリケーション (Web ブラウザー コンポーネント) の Facebook 内容を組み込むためのもう一つの簡単な方法は、プラグインの活動です。

ユーザーがあなたのサイトを介して Facebook との相互作用から生じるこのプラグイン集計ストーリー。ここでの目標は、Facebook のページではなく、外部のサイトがではないことに注意してください。このようなフィードを生成する例のアクションは、サイト上の好みに合わせてコンテンツのコメントと、サイトからのコンテンツの共有のビデオを見てです。プラグインはプラグインの活動が含まれているサイトの現在のユーザー Facebook にログインしているかどうかを検出することができるか。場合は、表示されているフィードは、ユーザーの友達に制限されています。それ以外の場合は、プラグインからの推薦サイト全体で、ユーザー Facebook にログインし、フィードバックをよりターゲットを与えている間です。(注プラグインの活動をだけ HTML5 マークアップを使用できる) 必要があるマークアップはここにあります。

<div class="fb-activity"
  data-site="www.yoursite.com"
  data-app-id="xxxxxxxxxxxxx"
  data-width="300"
  data-height="300"
  data-header="true"
  data-recommendations="true">
</div>

このマークアップをページの SDK では何を生成するために java スクリプトの設定を組み込む必要があります図 4


図 4 アクションでプラグインの活動

タイムラインへのアクセス

列過去の私は、Facebook c# SDK ウォールへの投稿に使用されるテキストと添付ファイルの両方。投稿完了後、友人やファンがそれを好き、それを共有するそれについてはコメントして操作できます。それが、特定のユーザーのタイムラインを読むにかかるを見てみましょう。

Facebook かどうか任意アカウントに割り当てますユニークでかなり長い ID プロファイルまたはファンのページ。ただし、ユーザーであっても、ページを識別するために、この ID を使用しないでください。最初のタイムラインを読むためにやるべきことのページ (またはユーザー) のパブリック名と一致する基になる Facebook ID には単なる運動としては、任意のブラウザーのアドレス バーに次を入力することができます。https://graph.facebook.com/your-page-name。

ページに到達するを入力するとき、プレース ホルダー「をページ名」アカウントの名前だけです。タイムラインを読むつもりアカウントの ID を取得する最初のステップです。また、フィードにアクセスする認証を受ける必要があります。一番下の行は、基になる Facebook のグラフ API に対して直接行くすべての操作は OAuth 認証が必要です。これは、以前のコラムで説明した同じ予備手順もここで行う必要があることを意味します。

  • Facebook のバック エンドと対処するために Facebook アプリを作成します。
  • 代わりにアカウントを動作するように、Facebook のアプリを承認ユーザーがあります。この手順を提供します最新の結合 (限られた時間のために)、ユーザー アクセス トークンと Facebook アプリ。
  • アクセス トークンからグラフ API 内のホスト アプリケーション (ASP.NET MVC アプリケーションなど) に対して動作するように、キーとしてを使用します。

取得し、アクセス トークンをクッキーに保存して、期限が切れるまであらゆる操作を行うためのを使用できます。ここでは Facebook サーバーから生のフィードを取得する必要なコードは次のとおりです。

var name = "name-of-the-user"; 
  // For example, joedummy
  var client =
    new FacebookClient(access_token);
  dynamic user = client.Get(name); 
  dynamic feed =
    client.Get(name + "/feed");

ユーザーに関する公開情報のみを返しますが、Facebook のクライアントの最初の呼び出しは厳密にアクセス トークンを必要としません。ユーザー変数は名前、姓、id、場所などのプロパティを公開します。あなたの意図によって、この呼び出しを配置する必要がありますありません。Facebook クライアントの 2 番目の呼び出しは、本当にトリックをするものです。それはユーザーのフィードへのパスを表す文字列を受け取ります。アカウントの名前を連結するパスを構築文字列。その見返りに、あなたは JSON ストリームから構築、動的 c# オブジェクトを取得します。図 5 Fiddler によってキャプチャされた JSON ストリームの構造を示しています。


図 5 Facebook のタイムラインの項目の JSON 構造

選択されているポスト 2 種類の操作を得たことを示しています — が好きされており、論評。それはまた、現在 14 好きなものをカウントします。ノードを展開し、それをコメントした、またはそれが好きだった人々 についての詳細があります。最後に、投稿の内容を検索します。JSON レベルでは、記事の内容は、メッセージ フィールドです。

すべての記事が同じ構造であることに注意してくださいすることが重要です。 これは、なぜ Facebook c# SDK データ転送オブジェクト (Dto) としてプレーン、静的に定義されたクラスを使用しない理由です。一般的な共有ポスト メッセージ、リンクと画像を欠いている話フィールドが含まれています。写真のコレクションの管理者を追加するときに、これの場合は、たとえば、です。

Facebook c# SDK では、c# の動的なオブジェクトは手します。多くのデータ型を定義解析 — または、オブジェクトがビューにトリクル充電には良いことを決定-あなたの呼び出しです。図 6 古典的な c# クラスに動的なオブジェクトを解析しようとするいくつかのコードを示しています。

図 6 動的なオブジェクトを古典的な c# クラスに解析

    public class FacebookPost
    {
      public String PostId { get; set; }
      public String Author { get; set; }
      public String Picture { get; set; }
      public String Link { get; set; }
      public String Published { get; set; }
      public String ContentHtml { get; set; }
      private delegate String ExtractDelegate();
      public static IList<FacebookPost> Import(dynamic data)
      {
        var posts = new List<FacebookPost>();
        foreach (var item in data)
        {
          var tempItem = item;
          var fb = new FacebookPost
          {
    PostId = Extract(() => tempItem["id"]),
    Published = Extract(() => tempItem["created_time"]),
    Picture = Extract(() => tempItem["picture"]),
    Link = Extract(() => tempItem["link"]),
    Author = Extract(() => tempItem["from"]["name"])
          };
          try
          {
    fb.ContentHtml = Extract(() => tempItem["message"]);
          }
          catch
          {
          }
          if (!String.IsNullOrEmpty(fb.ContentHtml))
    posts.Add(fb);
          }
          return posts;
        }
      private static String Extract(ExtractDelegate func)
      {
        try {
          return func();
        } catch {
    return null;
          }
      }
    }

このコードの最も厄介な部分は、指定されたプロパティ、解析、動的オブジェクトで定義されているかどうか確認する効果的な方法を見つけることです。Stackoverflow.com ユーザーにアプローチに同意する図 6、デリゲートに基づいて。

社会的なネットワークを扱うのと思うし、新しい創造的なアプリケーションを実現する開発者のための機会になる可能性の全く新しい世界を開きます。.NET 開発者が Facebook c# SDK の友人をする必要があります。

Dino Esposito*「設計携帯ソリューションは、企業」(マイクロソフト プレス、2012) の著者である、"プログラミング ASP.NET MVC 3"(マイクロソフト プレス、2011年) との共著者"Microsoft .NET:Architecting Applications for the Enterprise』(Microsoft Press、2008 年) の共著者でもあります。Esposito はイタリアに在住し、世界各国で開催される業界のイベントで頻繁に講演しています。Twitter ( twitter.com/despos、英語) で彼をフォローしてください。*

この記事のレビュー、次技術専門家のおかげで:スコット ・ デンスモア (マイクロソフト)
スコット ・ デンスモアは、Visual Studio の機能に取り組んでは、マイクロソフトのシニア開発責任。彼は最後の 10 年間大規模な企業環境で小さな新興企業アジャイル開発チームにしてきました。彼の主な関心はクラウド コンピューティング、モバイル デバイス コンピューティングと社会のコンピューティングします。彼を見つけることができます scottdensmore.comと Twitter 上で @scottdensmore。