1

ファンページのIFRAME内で実行されているFacebookタイムラインページタブアプリがあります。

アプリのメイン ページには 10 件の求人が表示され、ユーザーはクリックして 1 冊の本の詳細ページに移動できます。

これらの詳細ページに LIKE ボタンを追加して、Facebook のユーザーがストリームでその仕事を気に入って共有できるようにします。

このアプリは完全に動的であるため、さまざまな顧客が自分のファン ページにアプリをインストールして、自分の仕事を一覧表示できます。(例: コカ・コーラは自分のコカ・コーラ ページにインストールし、社内の求人を一覧表示します。その後、Microsoft も同様にインストールし、同じことを行います)

問題は og:metatags と、いいねされた詳細ページのリンクのリダイレクト、右側の Facebook の企業ページと求人を表示する相対的な右側の詳細ページに関係しています。

これら2つのことを実行して機能させることはできますが、同時にはできません。

A. Facebook は、次のようないいねボタンの実装を使用すると ("data-href" 追加属性なし)、画像、タイトル、説明を含むヘッド セクションの og:metatags を正しく取得します。

    <div class="fb-like"  
             data-send="false" 
             data-layout="button_count" 
             data-show-faces="false" 
             data-action="like" 
             data-font="arial">
    </div>

問題は、data-href 属性を指定しないことです (そして、og:url メタは完全に無視されます)。これにより、現在のページへのリンクが作成されます => iframe 内の意図された現在のページ => したがって、結果は次のようになります。 Facebook で共有ジョブをクリックすると、Facebook アプリの内部ではなく、右のページの右の詳細ページにリダイレクトされますが、アプリをホストするサーバーの詳細ページにリダイレクトされます。

B. 代わりに data-href 属性を指定した場合

   <div class="fb-like"  
             data-href=<%= "http://www.facebook.com/pages/:page/#{session[:fb_page_id]}?v=app_XXXXXXX&app_data=#{@job_details.job_id}" %> 
             data-send="false" 
             data-layout="button_count" 
             data-show-faces="false" 
             data-action="like" 
             data-font="arial">
    </div>

これを行うと、Facebook に投稿された正しいリンクを取得できます (したがって、&app_data 属性を使用して) 完璧なリダイレクトを機能させることができます。しかし、欠点として、og:metatags は完全に無視され、代わりに facebook がページ タブ メタタグ (pagetab アプリをホストする上部の iframe) を選択するため、ページ アプリを使用して facebook のページについて伝えるがらくたリンクが facebook に投稿されます。写真。さらに大きな欠点は、アプリで仕事を気に入ると、すべての仕事も同様に気に入ったように見えることです (基本的に、iFrame アプリは、気に入ったページとして選択された仕事の詳細ページではなく、気に入ったページになります)。

これを整理する方法を知っている天才はいますか？要求された結果を得るには、A と B を同時に機能させる必要があります!!!!

助けてください！！！:(

4

1 に答える 1

2

私は自分で解決策を見つけました。

  • ボタンのように=>href属性とref属性を使用します。特に、FacebookファンページのIDをrefに配置します。現在のページのURLを渡すと、og：metatagsも正しく読み込まれて共有されます。

        <div class="fb-like" 
          data-send="false"
          data-show-faces="false"
          data-layout="button_count"
          data-font="arial"
          data-action="recommend"
          href=<%= "https://app.com/jobs/job_details.job_id" %>
          ref=<%= FB_PAGE_ID %>>
    </div>

ref属性をfacebookに渡すと、壁にリンクがfacebookによって投稿され、追加のクエリ文字列に特に「fb_ref」パラメーターが追加されます。

たとえば、パラメータを持つボタン：href = <％= "https://app.com/jobs/job_details.job_id"％>およびref = <％= 332325142248470％>

になります： https ：//app.com/jobs/a0Ed000000a54bkEAA？fb_ref = 332325142248470＆fb_source = profile_multiline

  • ユーザーがリンクをクリックすると、正しいページタブアプリと正しいジョブの詳細ページ内にリダイレクトされます。これを実現するために、controller / showアクション（rubyではcontroller_name / idに対応）に新しいリダイレクトを設定します。refはhrefリンクの後のクエリ文字列内に配置されることを覚えておいてください。

     if params[:fb_ref]
    redirect_to "http://www.facebook.com/pages/:page/#{params[:fb_ref]}?v=app_xxxxx&app_data=#{params[:id]}"
 end

ご覧のとおり、Facebookの「signed_riquest」（http://developers.facebook.com/docs/authentication/signed_request/）の「app_data」パラメーターを使用してアプリケーションに渡す新しい動的URLを作成します。視覚化される適切な詳細ページと、適切なFacebookページにリダイレクトします。

  • これを実行したら、signed_requestに付属する新しいapp_dataパラメーターを正しく管理する必要があります。私の場合、私が使用したメインコントローラーの1つで：

          if fb_signed_request[:app_data]             
        redirect_to "/jobs/#{session[:app_data]}"
      end

そして、アプリが適切なページと適切なジョブ詳細ページをロードしているのがわかります！

希望は他の人を助けるつもりです！

于 2012-04-20T14:28:29.903 に答える