title: facebook share button using dynamic og tags for a quiz
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>routes.rb</p>
  
  <pre><code>get "/facebook_sharer/index/:redirect_url/:image/:title/:description", to: "facebook_sharer#index", :redirect_url =&gt; /.*/, :image =&gt; /.*/, :title =&gt; /.*/, :description =&gt; /.*/
  </code></pre>
  
  <p>facebook_sharer_controller.rb</p>
  
  <pre><code>class FacebookSharerController &lt; 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
  </code></pre>
  
  <p>facebook_sharer/index.html.erb</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;You are being redirected to your url&lt;/title&gt;
        &lt;!-- facebook --&gt;
        &lt;meta property="og:site_name" content="baseurl.com"/&gt;
        &lt;meta property="og:title" content="&lt;%= @title %&gt;"&gt;
        &lt;meta property="og:description" content="&lt;%= @description %&gt;"&gt;
        &lt;meta property="og:type" content="article"&gt;
        &lt;meta property="og:image" content="&lt;%= @image %&gt;"&gt;
        &lt;meta property="og:url" content="&lt;%= @redirect_url %&gt;"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;You are being redirected to your url&lt;/h1&gt;
  
    &lt;%= javascript_tag do %&gt;
      window.location.href = '&lt;%=j @redirect_url %&gt;';
    &lt;% end %&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Share button:</p>
  
  <pre><code>&lt;div class="share_a fb-share-button pull-right" data-href="&lt;base url is here&gt;/facebook_sharer/index/&lt;%=u cat_show_article_url(Article.find(@article.id).category, Article.find(@article.id)) %&gt;/&lt;%=u image_url('article_images/image.png') %&gt;/&lt;%=u 'I got an A. Take this quiz and see what you get.' %&gt;/&lt;%=u 'Your knowledge practically makes you royalty.' %&gt;" data-layout="button"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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</p>
  
  <pre><code>&lt;meta property="og:url" content="&lt;base url is here&gt;/articles/quizzes/quiz-1-easy/&lt;base url is here&gt;/assets/article_images"&gt;
  &lt;meta property="og:image" content="image.png"&gt;
  </code></pre>
  
  <p>It should be </p>
  
  <pre><code>&lt;meta property="og:url" content="&lt;base url is here&gt;/articles/quizzes/quiz-1-easy"&gt;
  &lt;meta property="og:image" content="&lt;base url is here&gt;/assets/article_images/image.png"&gt;
  </code></pre>
  
  <p>the full html page looks like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;title&gt;You are being redirected to your url&lt;/title&gt;
        &lt;!-- facebook --&gt;
        &lt;meta property="og:site_name" content="&lt;base url is here&gt;"/&gt;
        &lt;meta property="og:title" content="I got an A. Take this quiz and see what you get."&gt;
        &lt;meta property="og:description" content="Your knowledge practically makes you royalty."&gt;
        &lt;meta property="og:type" content="article"&gt;
        &lt;meta property="og:image" content="image.png"&gt;
        &lt;meta property="og:url" content="&lt;base url is here&gt;/articles/quizzes/quiz-1-easy/&lt;base url is here&gt;/assets/article_images"&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;You are being redirected to your url&lt;/h1&gt;
  
    &lt;script&gt;
  //&lt;![CDATA[
  
      window.location.href = 'http:/baseurl.com/articles/quizzes/quiz-1-easy/';
  
      http:/baseurl.com/assets/article_images/image.png
  
  //]]&gt;
  &lt;/script&gt;  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried a button like this but I end up getting this error on sharing. I got inspiration from stackoverflow and buzzfeed.</p>
  
  <p>I end up getting this error:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>html: </p>
  
  <pre><code>&lt;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=&lt;app id goes here&gt;&amp;link=http%3A%2Fbaseurl.com%2Farticles%2Fquizzes%2Fquiz-1-easy&amp;picture=http:/baseurl.com/assets/article_images/image.png&amp;name=basename&amp;caption=How%20Much%20Do%20You%20Actually%20Know%20K?&amp;description=I%20got%20an%20A.%20Take%20this%20quiz%20and%20see%20what%20you%20get.&amp;redirect_uri=http%3A%2Fbaseurl%2Farticles%2Fquizzes%2Fquiz-1-easy"&gt;
              facebook share
          &lt;/a&gt;
  </code></pre>