使用動態og標記進行測驗的Facebook分享按鈕

Question

我有一個測驗，根據用戶獲得的分數，出現了不同的圖像，分數和描述。 我希望用戶能夠在其Facebook上共享此自定義內容和測驗的URL。

我最終要做的是創建了一個重定向頁面，上面帶有適當的打開圖形標記。 打開的圖標記從我發送給它的url參數中獲取其值。

的routes.rb

get "/facebook_sharer/index/:redirect_url/:image/:title/:description", to: "facebook_sharer#index", :redirect_url => /.*/, :image => /.*/, :title => /.*/, :description => /.*/

facebook_sharer_controller.rb

class FacebookSharerController < ApplicationController
    def index       
        if params[:redirect_url]
            @redirect_url = params[:redirect_url]
        end

        if params[:image]
            @image = params[:image]
        end

        if params[:title]
            @title = params[:title]
        end

        if params[:description]
            @description = params[:description]
        end

        render layout: false
    end

end

facebook_sharer / index.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>You are being redirected to your url</title>
      <!-- facebook -->
      <meta property="og:site_name" content="baseurl.com"/>
      <meta property="og:title" content="<%= @title %>">
      <meta property="og:description" content="<%= @description %>">
      <meta property="og:type" content="article">
      <meta property="og:image" content="<%= @image %>">
      <meta property="og:url" content="<%= @redirect_url %>">

  </head>
  <body>
    <h1>You are being redirected to your url</h1>

  <%= javascript_tag do %>
    window.location.href = '<%=j @redirect_url %>';
  <% end %>
  </body>

</html>

分享按鈕：

<div class="share_a fb-share-button pull-right" data-href="<base url is here>/facebook_sharer/index/<%=u cat_show_article_url(Article.find(@article.id).category, Article.find(@article.id)) %>/<%=u image_url('article_images/image.png') %>/<%=u 'I got an A. Take this quiz and see what you get.' %>/<%=u 'Your knowledge practically makes you royalty.' %>" data-layout="button"></div>

出現“ facebook共享”按鈕，但是共享的頁面的標簽值不正確。 我假設這與URI轉義有關

<meta property="og:url" content="<base url is here>/articles/quizzes/quiz-1-easy/<base url is here>/assets/article_images">
<meta property="og:image" content="image.png">

它應該是

<meta property="og:url" content="<base url is here>/articles/quizzes/quiz-1-easy">
<meta property="og:image" content="<base url is here>/assets/article_images/image.png">

完整的html頁面如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>You are being redirected to your url</title>
      <!-- facebook -->
      <meta property="og:site_name" content="<base url is here>"/>
      <meta property="og:title" content="I got an A. Take this quiz and see what you get.">
      <meta property="og:description" content="Your knowledge practically makes you royalty.">
      <meta property="og:type" content="article">
      <meta property="og:image" content="image.png">
      <meta property="og:url" content="<base url is here>/articles/quizzes/quiz-1-easy/<base url is here>/assets/article_images">

  </head>
  <body>
    <h1>You are being redirected to your url</h1>

  <script>
//<![CDATA[

    window.location.href = 'http:/baseurl.com/articles/quizzes/quiz-1-easy/';

    http:/baseurl.com/assets/article_images/image.png

//]]>
</script>  </body>

</html>

我嘗試過這樣的按鈕，但最終在共享時出現此錯誤。 我從stackoverflow和buzzfeed獲得了靈感。

我最終收到此錯誤：

This dialog has been passed a bad parameter.

API Error Code: 100
API Error Description: Invalid parameter
Error Message: redirect_uri is not properly formatted

HTML：

<a target="_window" onclick="return !window.open(this.href, 'Share on Facebook', 'width=640, height=536')" href="https://www.facebook.com/dialog/feed?app_id=<app id goes here>&link=http%3A%2Fbaseurl.com%2Farticles%2Fquizzes%2Fquiz-1-easy&picture=http:/baseurl.com/assets/article_images/image.png&name=basename&caption=How%20Much%20Do%20You%20Actually%20Know%20K?&description=I%20got%20an%20A.%20Take%20this%20quiz%20and%20see%20what%20you%20get.&redirect_uri=http%3A%2Fbaseurl%2Farticles%2Fquizzes%2Fquiz-1-easy">
            facebook share
        </a>

Answer 1

Facebook的調試頁面非常出色： https ： //developers.facebook.com/tools/debug/og/object/

輸入您要在該頁面上生成的URL，它將確切顯示它如何解析頁面以確定如何生成共享的帖子。

使用動態og標記進行測驗的Facebook分享按鈕

問題描述

1 個解決方案

解決方案1
1 2015-02-26 20:40:53

使用動態og標記進行測驗的Facebook分享按鈕

問題描述

1 個解決方案

解決方案1 1 2015-02-26 20:40:53

解決方案1
1 2015-02-26 20:40:53