Easy right?

Yes, sharing with Facebook is usually super simple. Either you have the normal ‘Share with Facebook’ link or button, which will retrieve the OpenGraph data from your page, or you have to create your own link containing all those information.

The problem

One of the new features of My Drinkaware is the ability to share what you drink shown as equivalents in food (burgers, kebabs, donuts) or exercises (running, cycling, swimming).

The feature card noticed that I needed to create a small ‘Share with’ button* that would share the user invite link + the contextual equivalence summary + the context equivalence title + the contextual equivalence image (burger, runner…).

Here is en example of the box:

And here is what you want to achieve:

My solution

Obviously, you can go crazy and create a system, which passes the OG data in the url and create them on the page rendering. I’m sure that it would do the job, but it wouldn’t be very efficient.

The Facebook Sharer documentation does not help us a lot here neither (as usual?) as they don’t mention any key parameters that you can pass to your link, that would make it rendering your chosen Summary, Title and Image(s) selection.

In order to to do this, your link must start with the s=100 parameter, then contain a p[ title], p[summary] and p[images][x] parameter with the relevant data.

Because I needed to create this kind of link all around the application, I created my own help, which generates the url for you.

def share_with_facebook_url(opts)

    # Generates an url that will 'share with Facebook', and can includes title, url, summary, images without need of OG data.
    #
    # URL generate will be like
    # http://www.facebook.com/sharer.php?s=100&p[title]=We also do cookies&p[url]=http://www.wealsodocookies.com&p[images][0]=http://www.wealsodocookies.com/images/logo.jpg&p[summary]=Super developer company
    #
    # For this you'll need to pass the options as
    #
    # { :url     => "http://www.wealsodocookies.com",
    #   :title   => "We also do cookies",
    #   :images  => {0 => "http://imagelink"} # You can have multiple images here
    #   :summary => "My summary here"
    # }

    url = "http://www.facebook.com/sharer.php?s=100"

    parameters = []

    opts.each do |k,v|
      key = "p[#{k}]"

      if v.is_a? Hash
        v.each do |sk, sv|
          parameters << "#{key}[#{sk}]=#{sv}"
        end
      else
        parameters << "#{key}=#{v}"
      end

    end

    url + parameters.join("&")
end

So you can now have something along those lines:

= link_to "Share with facebook", share_with_facebook_url({ :url   => "http://www.wealsodocookies.com",
                                                           :title => "Freelance Rails developer",
                                                           :images => {0 => "http://wealsodocookies.com/images/logo.png"},
                                                           :summary => "Pragmatic Ruby on Rails development company" })

Simple, but effective. I hope it can be useful to someone else!