How to Add Pinterest Pin It Button on Weebly Images?

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.

1. 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.
2. Click on the “Pin It” option and then choose “Image Hover” option from the button type drop down.
3. 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.
4. Choose the gray color for your button.
5. Choose the language of the button text as English or Japanese.
6. Check the preview of the button by hovering the mouse over the preview image.
7. 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.