IN THIS ARTICLE
The Share Buttons for Images app allows site owners to automatically add share buttons to their images. Simply mouse over the image, and you will see your Share Buttons appear in the upper-left corner that allows your readers to share the image straight to social networks. These Share Buttons are fully customizable and designed to match all of our Share Buttons, ensuring they'll always look sleek and professional on your site!
This article will show you how to customize the appearance and selected services for the Share Buttons for Images app.
-
Login to your Shareaholic account and select a Site Profile from the My Sites dropdown menu.
- On the Apps page, under the 'Social Sharing' section, find the Share Buttons for Images section. Use the toggle button to enable/disable the app entirely, or click the Configure button to view the customization options.
- In the Layout tab of the Share Buttons for Images settings window, you will see a number of customization options available. A preview of how the buttons will look on an image can be seen in the right-hand side of the window.
Theme Select one of our pre-existing themes to apply to your buttons. Size Adjust the size of the buttons. Layout Choose if you'd like your buttons to appear horizontally or vertically on the image. Position Choose where you'd like the buttons to appear on the image. Opacity Select the desired transparency of your buttons. Vertical & Horizontal Offset Fine-tune the positioning of the buttons along the X and Y axis. Padding Adjust the spacing between the buttons. Custom Colors Enable this to choose your own color scheme for the buttons Select Services Choose which social networks you'd like to display in your Share Buttons for Images. - Click Save Changes when done.
Specifying a Better Quality Image for Sharing
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg" />
You can optionally set the data-pin-media attribute to provide a better quality version of an image. Use this if you display small image thumbnails on your page, but want the higher resolution version shared. Also, because vertically-oriented images work better on Pinterest, you could set a vertical image in places where you display a landscape image.
Specifying the Source URL / Link
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"
data-pin-url="http://mysite.com/mypage.html" />
Use the data-pin-url attribute to associate an image to a particular URL. This will guarantee that the image share is linked to the source URL that you want. This is particularly useful for pages with multiple images that link to various places on your website.
If data-pin-url is not specified and the image is wrapped in an anchor tag, for example:
<a href="some_other_page.html">
<img src="other_page_thumbnail_image.jpg" />
</a>
...we assume that the image source URL is the other page (i.e. some_other_page.html), not the page we're on right now. This works really well for most catalog pages, blog indexes, and search results pages. If the anchor link is a link to an image, we use the link for the current page as the image source URL instead, as we would do if there was no anchor tag.
Customizing the Pinterest Title
<img src="http://cdn.mysite.com/myimage.jpg"
data-pin-url="http://mysite.com/mypage.html"
data-pin-media="http://cdn.mysite.com/myimage_fullsize.jpg"
data-pin-description="Baked Mozzarrella Cheese Sticks" />
Use the data-pin-description attribute to specify the title. If you don't specify data-pin-description, Shareaholic pulls descriptions from the image's title or alt tags.
- 1st priority = data-pin-description attribute text
- 2nd priority = image title attribute text
- 3rd priority = image alt attribute text
For best results, use a representative 4 to 7-word description of what is actually shown in the image.
<img src="http://cdn.mysite.com/myimage.jpg"
title="Baked Mozzarrella Cheese Sticks" />
If all three, image data-pin-description, alt and title attributes are missing, we default to the page's best title for the share. Also of note that Pinterest's official Share Dialogue ignores alt text.
Automatically Set data-pin-description attribute from Image Alt text
Are you in a situation where you've been setting the alt text for your images and now Pinterest is not picking up that text for shares? To fix this, with a couple of lines of code, you can automatically set Pinterest's data-pin-description attribute to match the image alt attribute so that Pinterest picks up the alt text. Include the following code in the </head> section -
jQuery:
<script>
// Code by Shareaholic.com
jQuery(document).ready(function($) {
$("img:not([data-pin-description])").each(function() {
if (!$(this).attr("title") && $(this).attr("alt") && $(this).attr("alt") != '' && $(this).attr("alt").indexOf(' ') !== -1) {
$(this).attr("data-pin-description", $(this).attr("alt"));
}
});
});
</script>
In summary, if an image tag only has a multi-word alt attribute text defined (i.e. it is missing title and data-pin-description), this code takes the alt text and assigns it to data-pin-description automatically, and you're done!
Disabling Shareable Images Buttons on Specific Images
- You may disable the hover button for a single image by adding nopin="nopin" or data-pin-nopin="true" to the HTML image tag:
Or<img src="image.jpg" alt="alt_stuff" nopin="nopin" />
<img src="image.jpg" alt="alt_stuff" data-pin-nopin="true" />
- You may disable the hover button for all images on a page by including the following code in the <head> section of the page:
<meta name="pinterest" content="nopin" />