Share This Image

Image Sharing Plugin for WordPress


Thank you for purchasing my plugin. If you have any questions that are beyond the scope of this help file, please feel free to email my. Thanks so much!

First of all you must install this plugin. To do this you must have working version of WordPress. If you dont have installed version, than read the WordPress codex - http://codex.wordpress.org/Installing_WordPress.

Plugin installation can be done withing two ways:

1. Installation via FTP

2. Installing From WordPress Dashboard

 

 

This plugin comes packed with super-duper settings page.

Log into your WordPress admin panel and Go to Settings > Share Image Options to enter this page.

 

There are few group of settings, each of controls some of plugin functionality.

Main Settings

Selector - css selector for images (or blocks of content). Several selectors need to be separated with commas.

Minimal width - minimal width of image for sharing.

Minimal height - minimal height of image for sharing.

Facebook App ID - for better facebook sharing create your app and write here it's id.

Share buttons - drag and drop needed social icons from left area to right. You can also change buttons order.

Enable auto scroll - if On user from social network will be scrolled to the relevant shared image.

Use intermediate page.- turn Off if you have any problems with sharing. Otherwise better not to change it.

Content settings

Default title - if image don't have 'data-title' or 'title' attributes than this title will be shown instead.

Default description - if image don't have 'data-summary' or 'alt' attributes than this description will be shown instead.

View settings

Buttons style - choose one from three predefined styles for share buttons.

Align by plane x - align share box to the right or left.

Align by plane y - align share box to the top or bottom.

Offset by plane x - offset of share box by x coordinate.

Offset by plane y - offset of share box by y coordinate.

Orientation - choose vertical or horizontal orientation for share box.

'Share This Image' plugin give you greate flexibility of changing sharing data. For images you can change their title and description.

To change sharing content just add data-title and data-summary to img tag that you need.

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

Now when the user click share button for this image he will share it witch that title and description, that you want.

If image doesn't have data attributes then plugin will use title attribute for title and attr attribute for summary.

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

If image doesn't have data, title and attr attributes then will be used default title and description that you set in the plugin settings page.

Not only images

Plugin give ability to run it not only for images, but for any blocks of content.

Only one condition - this block must have data-media attribute with link to shared image.

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/youre-cool-image.jpg" data-title="Title for image" data-summary="Description for image"> 
   Youre custom content ( text, html or any other )
</div>

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.

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.

Share with custom link

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

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

In the example below user will share disired 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/youre-cool-image.jpg" data-url="http://your-link.com">

At this moment plugin supports following social networks:

Facebook
Twitter
Google+
LinkedIn
Pinterest
Tumblr
Reddit
Digg
Delicious
VKontakte
Odnoklassniki

You can enable/disable any of them from setting page. Just drag&drop needed social network button to the green area. Position of the buttons inside this area also reflects on their position in the sharing box.

Also some of this social networks provide additional options.

Facebook settings

App ID

You can use facebook sharing without any additional settings and in general its will work fine. But it is VERY recommended to set up facebook APP ID.


To get APP ID first of all make sure that you are logged in to your facebook account.

Then go to https://developers.facebook.com/ and click on 'My Apps' -> 'Add a New App'.



Fill up 'Display Name' and 'Contact Email' fields. Choose some category for you new app. Its doesn't matter what of them you choose. Then click 'Create App ID'.

Go to Settings page by the link in the sidebar and spicify 'App Domain'. In this field you must write website URL where you will use sharing plugin. For example it can be 'http://share-this-image.com/'. Then click on 'Add Platform' button below and choose 'Website' platform. In the appering box write your website URL one more time. Save all changes by pressing 'Save changes' button.



Go to 'App Review' page from the link in sidebar and make you app public.



Go to 'Dashboard' page, copy your App ID and paste it to 'Facebook App ID' field in plugins settings page.



Congratulations! You just set up you Facebook App Id and ready to share images via Facebook.

Twitter settings

For twitter you can set 'Twitter via' setting that set 'via' tag to every shared image in twitter.

You can control to where include/exclude sharing box with help of two plugin settings: 'Selector' and 'Black list'.

First of it controls for what images of you website add sharing box. Second - what images should be excluded from sharing.

By default 'Selector' setting set to img. That means that plugin will works with all images on your website. 'Black list' setting set to .dontshow - images with this classname won't be shared.


Example 1

For example you want to change this behavior: you don't want to share all images but only those from certaine page. First of all you need to know this page main classname or id.
Then all what you need is update selector setting to something like

.postid-40 img

where .postid-40 - page main classname


Example 2

Imagine that you don't want to share all images from certaine page, but only those that situated in the main page content area.
You need to know classname of this page main content area. For example it will be content. So just add this rule to 'Selector' setting:

.postid-40 .content img


Example 3

If you need to share images from the several pages you can separate different selectors with commas.
For example we have second page with classname postid-41:

.postid-40 .content img, .postid-41 .content img

Q: I have problem with facebook sharing. Sometimes image not displayed in the sharing pop-up.

99% that you just dont set Facebook App ID. Please set it and more likely you won't have any problems again.


Q: I set proper selectors for images but for some of them sharing box just dont appear. What is wrong?

It is very hard to say what exactly wrong. Often you image is just to small for sharing. In the plugins settings page you can set minimal width and height for images to share.
All pictures that are smaller won't be shared.


Q: I use some js gallery for mages. Will this plugin works with it?

Hard to say. It is not guaranteed that plugin will works with some custom js galleries/grids. If you face such a problem please write to plugins author.


Q: I want to share image via Twitter but in the sharing box I see huge link. Is this normal?

All is fine. After you press Tweet button this link will be shortened with the help of twitter build-in url shortener.