Hi,

How do I add a Pinterest Pin It button on top of every image?

I generated html code from Pinterest widget builder to insert in the RSD html element. This method places the pinterest 'save it / pin it' button below the image and not on top.

It seems like the hover pin it button could work, but it is not supported on mobile.

Can anybody recommend a “work-around” solution displaying on all devices?

I work in RSD v 1.5
Here is an example of where I would like to place Pinterest buttons on the top left of each image
http://www.jewelry-tutorials.com/jewelr … -tips.html
http://www.jewelry-tutorials.com/stone- … tting.html

Thanks.

Anne

I think there is a bug. Just no way to insert that pinterest code using RSD. Even if the code is at the footer, it won't connet with pinterest to create that icon when previewed in a browser

I can put the same source code that rsd generates (with the scripts at the <a code in the footer section of the settings) into Coffeecup HTML editor and it won't work. I can but the same code into a non-CC editor and it works fine. I would start a support topic with CC. Even with the most simple code created first in HTML Editor and pasted into another non-CC editor it will not work when previewed in a browser from HTML Editor - but will with my "backupo" html editor.
This is the code I am testing.

RSD HAS NO BUGS! We only have features.

As far as I know, you need to have that page published online to test it out. That is because it needs the browsers refer URL to know what to post. Publish the page and test it that way instead. I took the same code you posted and used just a text editor and previewed it in my browser and it does not work. It only worked after I published it to my server.

I would also change the src="// to include a protocol. So make it src="http://



Test it here (created with RSD BTW): http://four.coffeecup.com/index.html

Works like a charm when online. Created in the HTML Editor.

I just examined the source code that is output by my "backup," it inserts a localhost into the preview with the http link and changes the http to a https (into the preview only), but I still get the pinterest icon without publishing to live website. I don't know why, but that seems to generate the pinterest button.


Perhaps the social icon needs to be updated for this, so that something can be used a placeholder for this new way to use pinterest. Or - how did you set it up in RSD 1.5? Can RSD 2 do it? the issue with placing that <a data element is stopping me from doing it in RSD 1.5 alone.

I may have a look tomorrow. Where I am it's now 01:25.

Added an HTML element for the image and placed the script tag (modified) in the HEAD and published the page. The version of RSD used would not make any difference here though. Have not tried with the data element, so there might be some fine tuning there.

The social icon though is not to be used for Pin It buttons. That is something different.

http://i1.kym-cdn.com/photos/images/facebook/000/268/555/60f.jpg
I just saw what you did. the super special code and the img link goes into an html element.

It'll just be tricky styling the image

I think most people who actually 'Pin' things have the Pinterest extension added to their browser which automatically puts the pin icon on pictures.

Hi,

Getting back to the pin it button. I got the Pinterest 'Save / Pin It' button working. The only issue is the position of the button.

The way I do it : The picture element is in a column. The html element is dragged directly below the picture.

In the html element I copy the Pinterest generated html -

<a data-pin-do="buttonPin" data-pin-save="true" href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.jewelry-tutorials.com%2Fstone-setting-tutorial-prong-setting.html&media=http%3A%2F%2Fwww.jewelry-tutorials.com%2Fimages%2Fstone-setting-tutorial-prong-setting-firm-force-pusher.jpg&description=Gemstone%20Setting%20Tutorial%20-%20Setting%20prongs%20with%20a%20pusher"></a>


Then I click on Settings and paste in this Pinterest script the footer -

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

This method displays the Pinterest button below the picture. I prefer not to use a hover button on the images since that is not visible on mobile.


How to I get the html element to display on top of the image?

Thanks,
Anne