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.
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. View the demo of the images on Weebly site here.
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.