Discussion on Share This Image - jQuery Image Sharing Plugin

ILLID

ILLID supports this item

Supported

117 comments found.

With the Google+ button, no matter which image you hover/share from on the page it appears to just select the first image it finds on the page. This happens on your demo page as well. Does this not work with Google+ anymore?

Ok great thank you… because realistically it is mainly FB, twitter, pinterest and google+ that are important for image sharing. Losing Google+ from the mix cuts out a big part of the value and ability to tap that network.

Please download the latest version of plugin. It must solve the issue with google+ sharing.

Perfect – great fix, thank you!

need to place $(‘img’).sti(); in a while loop. to allow our client to share products on our website. is it possible ?

Why not. Just try. It must work

HI Illid,

I installed the updated files but they are not working. Please see this page that is using the latest files. http://bestanimations.com/HomeOffice/Tables/Tables.html

Thanks Kathryn

Oh you are right. I didnt purge the file cash.

Everything looks good now thanks.

One more question. Is there a way to make the Title my OG:title instead of the page title?

And one more thing. The summary: ’’ code at bottom of the page doesnt override the Alt text on the image. Is there some way to do that?

I’m using your image sharing plugin in conjunction with a lightbox as well as ajax loaded content. It is working fine on desktop, but not on mobile. When I test mobile from your test site I see the little share icon, but not on my own test page. Is there another variable I need to pass to the STI function? http://bucketlisttools.com/test.php

Any thoughts on getting the plugin to work via mobile?

Hi. The problem is that in the mobile devices image widyh and height are les than plugin minWidth and minHeight options. You can fix it by changing this options to lower values.

Perfect – that makes sense. Thank you!

Hihi, I sent you an email but didn’t hear back? Sent it via your profile. The code isn’t working on my website. Please see the email for details.

Sure. Here’s a sample link: https://goo.gl/Zzm7Hv

I added the id ”#share-img” to the image I would like to have work with your script-basically the main image of the blog post. And I changed the selector in your script to match it. But the share buttons still don’t appear over the image. I would definitely appreciate your help.

Hi. I find some js error in your custom.js file.

custom.js:176 Uncaught TypeError: Cannot set property ‘innerHTML’ of null

Please fix it first and than check plugin one more time.

Thanks! I moved the location of the custom file and it seems to work now.

hi

I’m followed all step of Jquery plugin installation in help manual but unable to shared images on twitter, google+, linkedin, pinterest

website link- http://www.tata.com/htm/tata_image_share.htm

It will show link where sharer.php file is. This can’t be changed

hi it is possible to upload sharer.php file in root directory on iis server

you need to install php on your iis server. https://php.iis.net/

Hi, How to blacklist images, for example on http://whaleclub.io I’ld like to exclude all the images displayed on the main page.

Regards,

gurler

gurler Purchased

Hello,

first of all, thank you very much for this development.

I have a little question. I want to count shares via sharer.php on my page

What if i add, data-image-id=XXXXX to my img tag how could i send it as a parameter to sharer.php ?

Also, thank you very much for your time to read my problem

Hi

Open sti.js file, find this lines of code

shareData: function(el, network) {

                var data    = {},
                    e       =  $(el).closest('.sti').find('.sti_reset');

                data.w_size   =  methods.windowSize( network );    
                data.media    =  e.data('media') ? e.data('media') : e[0].src;
                data.hash     =  opts.scroll ? '#' + methods.createImgHash( data.media ) : '';    
                data.title    =  e.data('title') ? e.data('title') : ( e.attr('title') ? e.attr('title') : ( opts.title ? opts.title : document.title ) );
                data.summary  =  e.data('summary') ? e.data('summary') : ( e.attr('alt') ? e.attr('alt') : ( opts.summary ? opts.summary : '' ) );
                data.local    =  location.href.replace(/\?img.*$/, '').replace(/\&img.*$/, '').replace(/#.*$/, '');
                data.schar    =  ( data.local.indexOf("?") != -1 ) ? '&' : '?';
                data.link     =  e.data('url') ? e.data('url') : data.local + data.hash;
                data.page     =  opts.sharer + '?url=' + encodeURIComponent(data.link) + '&img=' + data.media.replace('http://','') + '&title=' + encodeURIComponent(methods.replaceChars(data.title)) + '&desc=' + encodeURIComponent(methods.replaceChars(data.summary)) + data.hash;                
                data.page2    =  opts.sharer + '?url=' + encodeURIComponent(data.link) + '&img=' + data.media.replace('http://','') + '&title=' + methods.replaceChars(data.title) + '&desc=' + methods.replaceChars(data.summary) + data.hash;

                methods.share(network, data);    

            },

and replace it with

shareData: function(el, network) {

                var data    = {},
                    e       =  $(el).closest('.sti').find('.sti_reset');

                data.w_size   =  methods.windowSize( network );    
                data.media    =  e.data('media') ? e.data('media') : e[0].src;
                data.hash     =  opts.scroll ? '#' + methods.createImgHash( data.media ) : '';    
                data.title    =  e.data('title') ? e.data('title') : ( e.attr('title') ? e.attr('title') : ( opts.title ? opts.title : document.title ) );
                data.summary  =  e.data('summary') ? e.data('summary') : ( e.attr('alt') ? e.attr('alt') : ( opts.summary ? opts.summary : '' ) );
                data.local    =  location.href.replace(/\?img.*$/, '').replace(/\&img.*$/, '').replace(/#.*$/, '');
                data.schar    =  ( data.local.indexOf("?") != -1 ) ? '&' : '?';
                data.link     =  e.data('url') ? e.data('url') : data.local + data.hash;
                data.imageId  =  e.data('imageId') ? e.data('imageId') : 0;
                data.page     =  opts.sharer + '?url=' + encodeURIComponent(data.link) + '&img=' + data.media.replace('http://','') + '&title=' + encodeURIComponent(methods.replaceChars(data.title)) + '&desc=' + encodeURIComponent(methods.replaceChars(data.summary)) + '&imageid=' + encodeURIComponent(data.imageId) + data.hash;                
                data.page2    =  opts.sharer + '?url=' + encodeURIComponent(data.link) + '&img=' + data.media.replace('http://','') + '&title=' + methods.replaceChars(data.title) + '&desc=' + methods.replaceChars(data.summary) + '&imageid=' + encodeURIComponent(data.imageId) + data.hash;

                methods.share(network, data);    

            },

Now in the sharer.php you can get image id with $_GET[‘imageid’]

gurler

gurler Purchased

Thank you so much…

Are you aware if there has been a Facebook change that would cause this plugin to stop working on mobile? This seemed to be working fine until a couple days ago. If you check this page via desktop computer (click an image, hover, then click the FB link) everything works great. But if you check it via mobile and try to click the Facebook button it’s stopped working. Seems like you may need to prevent the facebook.com/sharer.php from using the m.facebook URL or something?

Any luck getting the plugin to work with the FB share dialog?

Hi. Very sorry for the long response.

Did you try to use share dialog instead of feed?

To use it you need to replace

url += 'https://www.facebook.com/dialog/feed?';
url += 'app_id=' + opts.fb_app;
url += '&display=popup';
url += '&link=' + encodeURIComponent(data.link);
url += '&picture=' + encodeURIComponent(data.media);
url += '&name=' + encodeURIComponent(data.title);
url += '&description=' + encodeURIComponent(data.summary);    
url += '&redirect_uri=' + encodeURIComponent(data.local+data.schar+'close=1');        

with

url += 'https://www.facebook.com/dialog/share?';
url += 'app_id=' + opts.fb_app;
url += '&display=popup';
url += '&href=' + encodeURIComponent(data.page);
url += '&redirect_uri=' + encodeURIComponent(data.local+data.schar+'close=1');

ok great – that did it. Changing the code on line 256 and 257 of sti.js to the code you have listed here made it work. Thanks again!

HI, what are the best resolution in pixel to use for each social network?

Hi

For Facebook it’s 1200×630

Twitter – 750×560 or other in this ration

Google+ – 497px x 373px, but can be as large as 2048px x 2048px

LinkedIn – image ratio 1.6. Minimum width – 180px

Pinterest – ratio 1.51

elena25

elena25 Purchased

ILLID, How can add the Instagram to socials? Thank you

HI. Sorry, but it is not possible since Instagram doesn’t provide API for image sharing.

kczilla

kczilla Purchased

Please explain how to make the shared images larger (speces for Shared Link Thumbnail are 470px246px) during a facebook share? It appears all images are scaled down to approximately 150×230

Hi. Your thumbnail images are too small. Here you can read about how facebook share images – https://developers.facebook.com/docs/sharing/best-practices#images

kczilla

kczilla Purchased

I asked you last week about this and I need this fix today for a client of mine. Please tell me when you will have the fix for twitter 140 char limit. The url encoded protocol you send to twitter, with the image and description, is exceeding the 140 char limit and obviously looks not good on twitter.

Hi. I can send to you new version of the plugin with twitter url shortener. I don’t release new version yet but can send this update special for you )

kczilla

kczilla Purchased

On mobile, if the image toggles from hidden to show or dynamically created, the STI icon is not displayed when the image becomes visible. Please fix this as I am using this in live production and my clients needs this fixed.

Hi. Can you show me the live example of this issue?

miopr

miopr Purchased

Hello. Great script. Thank you.

I was wondering if it is possible to share an image on Facebook in the smaller SQUARE thumbnail format. Please see this screenshot.

When I share in a mobile view the popup shows the square format but on desktop the popup share shows a cropped image.

Screenshot http://paralanaturaleza.org/donaunarbol/images/share-image-mobile-desktop.jpg Webpage I’m sharing http://pln.org/donaunarbol/thanks.php?name=Someone&donation=10

Thanks in advance for any help.

PS. Is it possible to create a custom link for shared url on the Facebook Post. I would like to share the image but have it link to the landing page of this campaign

miopr

miopr Purchased

Maing the image perfectly solve the first problem. Please just reply if there is a way to a custom return url. Thanks!

miopr

miopr Purchased

Meant to say making it square fixed the first problem in the share pop-up. However when I post the image it does not use the thumbnail, it uses the large image and gets cropped.

Hi. You can share custom return url by adding

data-url

attribute with needed url

Hi, i have a pre-sales question: Is it possible to open the Apps in the mobile version instead o a browser window? I´ve trief your demo page (https://codecanyon.net/item/share-this-image-jquery-image-sharing-plugin/7416929/comments).

Hi. Sorry for the long response. Its was in plans to add support for WhatsApp sharing, but it s still in the pending mode (

Yes, it is possible.

Hi, and is it possible to use this without the php-files. We use a cms where we only can include js and css. We do not have access to the root files.

I am sorry, but no. PHP file is require for proper work of this plugin. But you can place this file to other server and set link to it in the plugin options.

Well, I’d like to know how I can put the share button on my site design

Hi. Please read docs file that is inside .zip archive. Shortly you need to add css and js plugin files to your website pages and than call plugin method to initialize it. Good luck!

I am trying to make it work with lightgallery plaugin but it breaks the design.

Example http://sachinchoolur.github.io/lightGallery/demos/share.html

I want to show the share button one large image is visible and let user share the same image. When i do it it move the image from center to botton left corner with only 50% image being visible.. All this is happening as you wrap div arround the image. How can i make it work withour breaking the design

by
by
by
by
by
by