Pinterest is one of the easiest ways to share your images to broader audience and make them popular. This will also help to drive more traffic to your Weebly site from interested users. Did you anytime wonder how people add Pinterest sharing button visible on mouse hovering on all images on a page? Actually it is as simple as adding few lines of code to enable this and we will explain with an example in this article.
Related: How to setup AddThis and ShareThis social sharing in Weebly?
Hover over the below image to see the Pinterest share button.
How to Add Pinterest Pin it Button on Weebly Images?
Add the below script under the footer code section of your Weebly page to enable the Pinterest image sharing button:
<script async defer data-pin-hover="true" data-pin-tall="true" src="//assets.pinterest.com/js/pinit.js"></script>
That’s it!!! Yes really that’s it!!!
Now any images added on that page will have a Pinterest button visible on hover. This includes the images uploaded using image, slideshow and gallery element.
Customizing the Pinterest Share Button
Pinterest offers a widget builder tool to create different types of share buttons for website and apps.
- Go to widget builder and choose the type of button you want to add. Besides the Pin It button you have other options like follow button, pin, board and profile to add on your site.
- Click on the “Pin It” option and then choose “Image Hover” option from the button type drop down.
- You can create two types of buttons – one is a rounded with red background and other is rectangle with red/white/gray background. Round button is only available with red background and there will be no further customizing options for round button. In this example, we will create a rectangle button hence uncheck the round option and choose large button size.
- Choose the gray color for your button.
- Choose the language of the button text as English or Japanese.
- Check the preview of the button by hovering the mouse over the preview image.
- Copy the code generated and paste it in the footer section of your Weebly page.
On a single page, you will be able to add only one type of button since multiple scripts will not work on a single page. But you can paste the script for different style buttons on different pages of your site which means on one page you can show round buttons and on other page you can show rectangular button with white background. You can also paste the script under “Settings > SEO > Footer Code” section to be effective at site level and all the images on your site will have the Pinterest Pin It button.
I got the same problems as
February 6, 2016 at 3:18 AM
Do you have any solutions?
I’m having the same issue with the pin button not hovering over the correct image in my gallery. Wondering if there is a fix yet?
This was so helpful and easy! Thanks so much for sharing!!!
The code works great when used from phone or desktop when I insert web address. The code does not work when I click on the link to my blog in instagram profile, I get grey boxes that when I click on them they send me to pinterest login page .
Hope you can help. Thank you
So helpful! Thank you!
The code works great for set-alone images, but doesn’t really work with galleries. When i use a tighter gallery with a square ratio the buttons get messed up and become hard if not impossible to hover over. Is there a way to get them to line up with whatever gallery settings i have? Also, is there a way for the buttons to appear on the images after they are clicked/enlarged? I included a link to one of my blog pages that has the gallery I am describing. Thanks!
I have the same problem. Did you ever figure out how to resolve this?