facebook share button using dynamic og tags for a quiz

问题

I have a quiz and based on the score the user gets, a different image, score and description comes up. I want the user to be able to share this custom content and the url of the quiz on their facebook.

What I ended up doing is I created a redirect page that has the appropriate open graph tags on it. The open graph tags get their values from the url parameters I send to it.

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>

Share button:

<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>

The facebook share button appears as it should, but then the page that gets shared has incorrect tag values. I'm assuming it's something getting screwed up with the URI escaping

<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">

It should be

<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">

the full html page looks like this:

<!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>

I tried a button like this but I end up getting this error on sharing. I got inspiration from stackoverflow and buzzfeed.

I end up getting this error:

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>

回答1:

Facebook has an excellent debugging page here: https://developers.facebook.com/tools/debug/og/object/

Enter the URLs you're generating to that page and it will show you exactly how it parses the page to determine how to generate the shared post.

来源：https://stackoverflow.com/questions/28751908/facebook-share-button-using-dynamic-og-tags-for-a-quiz

标签

javascript

ruby-on-rails

facebook

facebook-opengraph