Pinterest Embed Button

Question

My ASP.NET application has a Pinterest embed button that does not grab the image for the preview and gives me an error message that looks like this, after I click on Pin It:

Parameter 'image_url' 
(value http:///Resources/Uploads/21622d3e-b865-49c4-bf22-155562ed2978.jpg) 
is not a valid URL format.

Can someone take a look at the code I use to generate the button and see if I did something wrong here?

PinterestEmbedButton.Text = String.Format("<a data-pin-config=\"none\" 
href=\"//pinterest.com/pin/create/button/?url={0}&media={1}&description={2}\" 
data-pin-do=\"buttonPin\" >
<img src=\"//assets.pinterest.com/images/pidgets/pin_it_button.png\" /></a>",
System.Web.HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri), 
"Resources/Uploads/" + product.Images.FirstOrDefault().Image.LargeFileName, 
product.Name);

Edit: The code generates a link that looks like this:

[http://www.pinterest.com/pin/create/button/?url=http%3a%2f%2fwww.knueppels.com%2fCatalog%2fOnline-Catalog-Product.aspx%3fp%3d21536%26title%3dWax-Pottery-Bowl-And-Spheres&media=http%3A%2F%2F%2FResources%2FUploads%2F21622d3e-b865-49c4-bf22-155562ed2978.jpg&guid=_AigG3f1JKMF-0&description=Wax%20Pottery%20Bowl%20and%20Spheres]

1

If you click on the 1 you will see that it does not pull an image and clicking on Pin It gives the error message I mentioned above.

I have tried changing the code to this:

PinterestEmbedButton.Text = String.Format("<a data-pin-config=\"none\" href=\"//pinterest.com/pin/create/button/?url={0}&media={0}/{1}&description={2}\" data-pin-do=\"buttonPin\" ><img src=\"//assets.pinterest.com/images/pidgets/pin_it_button.png\" /></a>", System.Web.HttpUtility.UrlEncode(HttpContext.Current.Request.Url.AbsoluteUri), "Resources/Uploads/" + product.Images.FirstOrDefault().Image.LargeFileName, product.Name); but it still won't pull up an image and now I get the error 'Whoops! This is not a valid image.' Closer, though.

Answer 1

I changed the Pin It button from an ASP.NET Literal to javascript for time's sake. I got the javascript from this post: http://www.brandaiddesignco.com/blog/add-a-custom-pinterest-pin-it-button-to-your-website/375/ and it seems to be working just fine. Thanks for all the help everyone!

Answer 2

I've run into challenges like this with various Social Media buttons on Wordpress sites in the past (raw code not Wordpress plugins). 9 times out of 10 its a problem with the coding at the source. A quick hack/fix is to grab the image from the source, upload it to your webserver, and reference the code to the image directory on your webserver as opposed to Pintrest's site.