custom 'pin it' button to pin an image on the site

Permalink
I'm looking for a way to have a 'pin it' button appear when hover an image on my site, so the image can be pinned. There're a few instructions I found on the web, but non of them worked at all or the way I wanted it. The blocks I found on the marketplace regarding social marketing don't do that what I am looking for.

Here you can see how it's done for wordpress and blogspot. This is exactly what I'm looking for.

http://www.katrinaleechambers.com/how-to-add-the-pin-it-hover-butto...

Is there may be already a way of doing it, so please let me know. If not,

 
planist1 replied on at Permalink Reply
planist1
You may want to check out the Designer Content Add-On, you may be able to put something together using it. You might be able to create a block with the code needed. It's free so might be worth a shot. See here:

http://www.concrete5.org/marketplace/addons/designer-content/...
planist1 replied on at Permalink Reply
planist1
Also, I was able to get it to work by simply adding the following code in my header.php file:

<script type="text/javascript" src="//assets.pinterest.com/js/pinit.js"
    data-pin-hover="true"
></script>


Clear your cache and it should work. Might at least be a starting point.

Note: this does put the Pin-it button on every image, which may or may not be desired.
dscomix replied on at Permalink Reply
Hello pianist1

Thanks a lot for answering so fast. The pinit.js I found too, but it doesn't work the way I want it.

1. it shows on all images, but I only want the ones in a blog for example.
2. on some images it shows on top of it, so you are not able to klick it, since it disappears when you hover out of the image
3. I would like to have a custom pin it button

I installed the designer content block, but can't figure out, how to use that for my project.

I know I'm quit greedy, but I want to have it look nice and individual.

Thanks anyway
JohntheFish replied on at Permalink Reply
JohntheFish
Designer content, while a great way of building blocks, will not solve your problem.

Your problem rests in javascript, not in a php block. I would guess at restricting the scope of the pinit script to apply to specific areas of the page and not to all images on the page. Also maybe an issue with the way it interacts with images that already have a hover state that is managed by javascript.
dscomix replied on at Permalink Reply
Hi JohntheFish,

That is what I thought, too. I'm not very good in scripting at all. php I understand a little, but java ?

I downloaded the wordpress plugin, which does the job there, but can't figure out how to get it to work in c5.

Here is the link:http://wordpress.org/plugins/pinterest-pin-it-button-for-images/...

Maybe somebody out there understands how to implement this in c5.

I guess this would be a great thing for other users too and I'm willing to pay for it like for other plugins.

Daniel
madisonandmi replied on at Permalink Reply
Hi - did you ever resolve this? I am having the same issue finding how to accomplish the exact same thing. My site is not built on WP or blogger. thanks!!