GET FREE VERSION GET THE PRO VERSION

Customize Content

More about sharing content customization and how to set custom title, description and URL for any shared image.

In this article

Plugin give you great flexibility of changing sharing data. You can customize shared title, description, image and URL. Also if you need more control on content customization and changing priority of content sources than you can try to use PRO plugin version.

Customize Title

How plugin choose what text to use as title for shared image?

There is special rules for it. First plugin looks for data-title attribute of shared image. If its not exists than its search for title attribute of the same image. If its fails than plugin looks for default title value from plugin settings page. And if this value is empty than plugin will use current page title.

Title source

For example, you want to customize shared title for specific image. Just add data-title attribute for img tag that you need.

<img src="images/your-cool-image.jpg" data-title="Title for image" />

Now, when user clicks on sharing button for this image he will share it with title Title for image that you specify in data-title attribute.

If image doesn't have data attributes then plugin will use title attribute.

<img src="images/your-cool-image.jpg" title="Title for image" attr="Description for image" />

With the PRO plugin version you have an even more powerful feature in title customization. It includes a feature to change title sources priority right from the plugin settings page and title customization individually for each sharing button.

Customize Description

For description plugin first looks for data-summary attribute, than for image caption, than for alt attribute, than for default description from plugin settings page. If all this sources are empty or not exists than there will be no description for shared image.

Description sources

Description source

For example, you want to customize shared description for specific image. You need to add data-summary attribute to img tag.

<img src="images/your-cool-image.jpg" data-summary="Description for image" />

Now when user will share this image he will see Description for image as description for it.

If image doesn't have data-summary attributes then plugin will use alt attribute instead.

<img src="images/your-cool-image.jpg" alt="Description for image" />

With the PRO plugin version you have advanced feature in description customization. It includes a feature to change description sources priority right from the plugin settings page and customization customization individually for each sharing button.

Customize Image

By default plugin works with img tags. So its gives you option to share image from src attribute. But you can simply change this behavior with help of data-media attribute.

First plugin looks for image in data-media attribute and only if this attribute not exists or empty plugin search for src attribute.

Image source

<img src="images/your-cool-image.jpg" data-media="images/your-second-cool-image.jpg" />

In the example above plugin will share your-second-cool-image.jpg image, not your-cool-image.jpg because image has data-media attribute.

One cool thing with data-media attribute is that you can add it to any block of content on your page, not only to img tag. And this block become sharable just like any image from your site.

For example - we have block with custom content inside. This block has class shared-box. So it is very easy to add sharing content for it.

<div class="shared-box" data-media="images/your-cool-image.jpg" data-title="Title for image" data-summary="Description for image"> 
   Youre custom content ( text, html or any other )
</div>

That's all! After this if any of your visitors hover on block with class name shared-box he will see appeared share box with social buttons.

Don't forget, that class name of block must be specified in plugin selector option. For example, if we want to share all images and this block then selector will be img, .shared-box.

By default plugin will share link to the page where your shared image is located. But you can simply change this.

All what is need to be done is to specify data-url attribute with link that you want to be shared.

URL source

So at first plugin looks for data-url attribute and only if it is empty or doesn't exists plugin use current page url as shared link.

In the example below user will share desired image but when someone clicks on it in the social network he will be redirected to the http://your-link.com page.

<img src="images/your-cool-image.jpg" data-url="http://your-link.com" />

With the PRO plugin version more URL customization options available. It includes a feature to change URL sources priority right from the plugin settings page and URL customization individually for each sharing button.