More about sharing content customization and how to set custom title, description and URL for any shared image.
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.
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.
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.
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.
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.
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.
<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.
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.