Written by Lisa Huynh, AddThis Software Engineer
Recently we launched the AddThis Image Share Buttons, which allow your visitors to share images or GIFs from your website to social sites like Pinterest and Facebook. This has been a frequently requested feature of our Sharing Buttons and we’re thrilled to have released it. But before you get started, there are a few things you’ll want to know about customizing images for the Image Share Buttons and size limitations for images.
Below is an example of what the Image Share Buttons look like on an image from the AddThis blog.
The Image Share Buttons show up by default on images that are at least 200×200 pixels. This is because certain services – such as Facebook – do not support images smaller than this size. However, you can specify the images you’d like the sharing buttons to appear on using id and class selectors either on the images themselves or the enclosing HTML elements.
To enable image sharing, first go to the Image Share Button configuration screen and click ‘Advanced Options’ to see the the ‘Enclosing Elements’ option, where you can add these CSS selectors.
You can add as many CSS selectors as you’d like to this box and every
<img> element with that selector, or inside an element with that selector, will show the Image Share Button. Class names must start with a period (
.) and id names must start with a hash (
For example, if you only wanted the Image Share Buttons to appear on images contained within HTML elements with a class selector of
shareable-class or an ID selector of
shareable-id, you would write in the ‘Enclosing Elements’ option
Next, make sure the
<img> tags or the elements enclosing the
<img> tags have the appropriate CSS selectors. Here are some examples:
This image will not have the Image Share Buttons enabled because it does not have the correct id or class selector.
<img src="http://www.example.com/cover-image.png" />
The images in this example will have the Image Share Buttons enabled because they are enclosed by an element with the class selector specified in the dashboard.
<div class="shareable-class"> <img src="http://www.example.com/image1.png" /> <img src="http://www.example.com/image2.png" /> </div>
Only the second image in this example will have the Image Share Buttons because it’s the only one with the correct class selector.
<div class="aside"> <img src="http://www.example.com/image3.png" /> <img class="shareable-class" src="http://www.example.com/image4.png /> </div>
Both images in this example will have the Image Share Button enabled because the enclosing
<div> has the correct id selector
<div id=”shareable-id”> <img src="http://www.example.com/image4.png" /> <img src="http://www.example.com/image5.png" /> </div>
Ready to get started?
If you get stuck setting up your Image Share Buttons you can contact firstname.lastname@example.org.