Pinterest, FB

The issue I have is to make sure the FB link posts a photo of the product and the url to it.

References:
https://developers.facebook.com/docs/reference/fql
https://developers.pinterest.com/pin_it/

Sharing with FaceBook
https://developers.facebook.com/docs/web/share
Publishing rich and structured Custom Stories, for example a story about cooking a meal, running a race, or reading a book:

FB has a few ways that you can provide these:

Social Plugins such as the Like and Share Buttons let people quickly recommend pieces of content to various audiences on Facebook. Social Plugins simply require copy and pasting a couple of bits of HTML, and are the easiest way for developers to get sharing into their apps, with no Facebook Login required.
The Feed Dialog, which can be invoked via the JavaScript SDK or through URL redirection, allows people to share content using a consistent UI that matches that of Facebook. You also don't need to implement Facebook Login to use the Feed Dialog, which makes it simpler for developers.
The Graph API can be used for any of these types of sharing, and is the only way to use Custom Stories on the web. This can offer more control of the sharing experience by letting you build your own UI, but requires that Facebook Login is also implemented.

Can I use the Share Dialog without using the Share Button?

Yes, although we recommend using the Share button to offer the simplest and most consistent experience for people using your site, you can invoke the Share Dialog using a link:
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">
 Share on Facebook
</a>

**********************************
Add a _metadatafile to designs inventories and downloads directories
**********************************

_metadata.html.erb

<meta charset="utf-8">
<!-- <meta http-equiv="X-UA-Compatible" content="IE=7" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
  WeBRAND | A WeBRAND shop
</title>
<meta name="description" content="blah blah.">
<meta name="keywords" content="">
<meta property="og:title" content="Blah" />
<meta property="og:url" content="<%= root_url %>"/>
<meta property="og:image" content="<%= image_path("logo_color_small.png") %>"/>
<meta property="og:description" content= "Blah."/>
<%= tag :meta, name: "crowdshop[slug]", content: crowdslug if @_crowdshop %>
<%= csrf_meta_tags %>

app/helpers/application_helper.rb

 def facebook_link_to(url)
    open_to facebook_icon, "#{FACEBOOK_SHARE_URL}?#{{ u: url }.to_query}", class: "btn btn-info"
  end

  def twitter_link_to(text, url, via, related)
    open_to twitter_icon, "#{TWITTER_SHARE_URL}?#{{ text: text, url: url, via: via, related: related }.to_query}", class: "btn btn-primary"
  end

  def pinterest_link_to(description, url, media = nil)
    open_to pinterest_icon, "#{PINTEREST_SHARE_URL}?#{{ description: description, url: url, image: image, media: media }.to_query}", class: "btn btn-danger"
  end

  FACEBOOK_SHARE_URL = "https://www.facebook.com/sharer/sharer.php"
  TWITTER_SHARE_URL = "https://twitter.com/share"
  PINTEREST_SHARE_URL = "http://pinterest.com/pin/create/button"

----------------------------------------------------------------
to_query(key) public
----------------------------------------------------------------
Converts an array into a string suitable for use as a URL query string, using the given key as the param name.

['Rails', 'coding'].to_query('hobbies') # => "hobbies%5B%5D=Rails&hobbies%5B%5D=coding"

Facebook Debugger

Enter a URL to see some helpful feedback about your page markup. Enter an access token to see its expiry and user.

SOLUTION:

Add the metadata into the download and the design directories.

Side Note:
Chrome Developers Tools Tutorials