Customizing the Share Buttons for Images App

Follow

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.

1. Login to your Shareaholic account and select your site from the My Sites dropdown menu.

my-sites-example.png

2. 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.

image-share-big-config.png

3. 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.

image-share-layout.png

  • 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.

4. 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

<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 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, we'll pull descriptions from the image's title or alt tags. 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"
alt="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.

Was this article helpful?