I have a survey and based on the rating that the user receives, another image, rating and description appears. I want the user to be able to share this custom content and quiz URL on their facebook.
As a result, I created a redirect page that has corresponding open tags. Open image tags get their values from the URL parameters that 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> <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 is sharing has the wrong tag values. I suppose something is screwed with URI shielding
<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> <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 such a button, but in the end I get this error when sharing. I got inspiration from stackoverflow and buzzfeed.
I get 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>