Facebook分享按钮使用动态og标签进行测验 [英] facebook share button using dynamic og tags for a quiz
问题描述
我有一个测验，根据用户获得的分数，不同的图像，分数和描述出现。我希望用户能够在他们的Facebook上分享这个自定义内容和测验的网址。
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.
我最终做的是创建了一个重定向页面，其上有相应的打开图形标签。打开的图形标签从我发送给它的url参数中获取它们的值。
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
routes.rb
get "/facebook_sharer/index/:redirect_url/:image/:title/:description", to: "facebook_sharer#index", :redirect_url => /.*/, :image => /.*/, :title => /.*/, :description => /.*/
facebook_sharer_controller.rb
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
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转义的东西
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">
应该是
<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页面如下所示：
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>
我尝试了一个这样的按钮，但是我最终在分享时收到这个错误。我从stackoverflow和buzzfeed获得灵感。
I tried a button like this but I end up getting this error on sharing. I got inspiration from stackoverflow and 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>
推荐答案
Facebook在这里有一个很好的调试页面： https://developers.facebook.com/tools/debug/og/object/
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.
这篇关于Facebook分享按钮使用动态og标签进行测验的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
