Question

我有一个测验，根据用户获得的分数，会出现不同的图像，分数和描述。我希望用户能够在他们的Facebook上分享这个自定义内容和测验的网址。

我最终做的是创建了一个重定向页面，其上有相应的开放图形标记。 open graph标签从我发送给它的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/

输入您为该页面生成的网址，它会准确显示如何解析网页以确定如何生成共享帖子。

facebook分享按钮使用动态og标签进行测验

1 个答案: