Can't share images via photoswipe-ui-default.js default setup, nor any I've tried

[jamminjames]

Having a heckuva time trying to share images from PhotoSwipe in social media. Neither Facebook nor Pinterest shares are working, they both give image url errors. I've tried various things, culled from issue posts here and elsewhere, but can't get anything to work. I know Facebook has changed things. Does anyone have a setup that works?

I'm using the app_id in the Facebook share line, which I believe you need now. The line I'm using now in photoswipe-ui-default.js is:
{id:'facebook', label:'Share on Facebook', url:'https://www.facebook.com/dialog/share?app_id=XXXXXX&href={{url}}&picture={{raw_image_url}}'},
... with my proper add_id in there, of course. I've also tried image_url instead of raw_image_url, but same result. The Facebook error says: "picture should represent a valid URL". However, the same raw_image_url used in the {id:'download', label:'Download image', url:'{{raw_image_url}}', download:true} line works fine, and returns a valid url, so I don't know why FB can't extract a good url.

When attempting to share via Pinterest, I also get an image url error message, saying: "Parameter 'image_url' (value https:../cartoons/01.jpg) is not a valid URL format", using that abbreviated url in the message. I'm not sure if that's the actual url Pinterest is getting, thus causing the error, or if their error message just shortens it. Again, I can't see why the url would be bad, since it works with the Download image link.

Any help would be much appreciated. Thank you.

[kacperTheCat]

have you solved this problem?

[acwolff]

I use this solution in my PhotoSwipe skin:

shareButtons: [
{id:'facebook', label:'Share on Facebook', url:OpenShareDialog() + '{{image_absurl}}'},
with this function:
function OpenShareDialog() {
var redirect_url = '';
var FBfeed = 'https://m.facebook.com/dialog/feed?app_id=';
if (PC) FBfeed = 'https://www.facebook.com/dialog/feed?app_id=';
var arg = FBfeed + appid +
'&redirect_uri=' + redirect_url +
'&PopupClose.html' +
'&display=popup' +
'&link='
return arg;
};

[jamminjames]

@acwolff, I'm not sure what you mean. Where does your function go? And what does {{image_absurl}} refer to? {{image_url}} and {{raw_image_url}} are defined in PhotoSwipe's code, but not {{image_absurl}}. Also, I don't know how you use the skin at the link you give, how is that installed? Is it needed for your solution to work?

[acwolff]

@jamminjames , The skin is not required for the solution, the skin is used by people without programming experience or who just like to make albums in an easy way.

To see an example of an album made with that skin open https://andrewolff.jalbum.net/PS_varThumbsRowFixedRatio/index.html
Variable image_absurl is the URL of the image, it is standard PhotoSwipe code, see function _updateShareURLs at line 653 of the js code used for the example album: https://andrewolff.jalbum.net/PS_varThumbsRowFixedRatio/slidePage.js

[jamminjames]

Okay, thanks. So where does the function OpenShareDialog() go?

[acwolff]

Line 410 in file https://andrewolff.jalbum.net/PS_varThumbsRowFixedRatio/res/indexPage.js

Just click a thumbnail of the example album and next try the Facebook and Pinterest shares via the share menu in the upper right corner of the large image page.

[jamminjames]

But that file is from the skin, which you said was not needed for the solution. I'm confused...

Do you think it would work if inserted into photoswipe-ui-default.js somehow?

[acwolff]

@jamminjames Yes, you can copy function OpenShareDialog to PhotoSwipe-ui-default.js and then it should work, but of you have a JAlbum licence, it is easier to make your albums with my PhotoSwipe skin!

[jamminjames]

I have it set up for the most part just how I want it, so don't really want to install the skin. Really just need a share solution.

I tried using the function, but it's not working. For one thing the standard PhotoSwipe-ui-default.js does not have {{image_absurl}} defined in it anywhere. So I tried using {{raw_image_url}}, but that didn't work.

Plus, I'm not sure where to put the function. I tried adding it to the functions right after the shareButtons array.

I'm getting a "SyntaxError: missing : after property id" error when I plug it in, and can't figure out what's causing that. It does highlight your function part of the code as the spot where the error is.

[acwolff]

What is so special on your set up? Why don't you give a link to your album so that I can see whether I can make it too with the PhotoSwipe skin?
Sorry, I did forget that I added {{image_absurl}}, but you can copy the code from my slidePage.js file.
Just add the extra code at the begin of the module, before all ather functions and variables.
Yes the FB app id is required, in my case it is in variable appid in function OpenShareDialog(). Variable PC is true for a PC and false for a mobile device.

[jamminjames]

Well, I'm just hesitant to add the skin because it looks very involved. I did get it working by putting the function outside of that area, using {{image_url}} for now. Yes, please take a look:
https://www.humortimes.com/wp-content/mu-plugins/website/humortimes/index.html

This is actually a website version of the slideshow I have in an Android app, in which I am also having sharing issues, and want to fix.

[acwolff]

Indeed, you beter use your current code, I can’t reproduce that lay-out with the current version of the PhotoSwipe skin.
I hope you understand that my implementation of the share function gives a link to the cartoon image, not to the cartoon webpage.
BTW your FB share function in your album works correctly on my iPad!

[jamminjames]

Yes on the image share, and that's fine. However, I'd like to include a link to the Google Play listing of the app in the redirect_url variable, but Facebook gives an error, saying the domain has to be listed on their app. But when I try to do that (in Facebook Developer), it rejects it - it seems they only want Facebook-related urls. Do you know any way around this?

Also, I noticed on your example that you manage to include more social media to share on, can you point me to the code you use to accomplish that?

Many thanks for all your help.

[acwolff]

No, I have no experience with that redirect_url variabele.
All code for the social media shares are in module https://andrewolff.jalbum.net/PS_varThumbsRowFixedRatio/slidePage.js

[jamminjames]

Okay, I got the extra social media links working, thanks! But there is no image included for Google+, do you know what variable would be needed to share the image for Google+? For example, Pinterest uses &media=

[acwolff]

No I don’t know how to show an image with Google+ so of you find a solution, Please let me know!

[jamminjames]

I've been reading up on it here, and apparently, it's not as simple as the others. I think the page either has to be annotated with schema.org microdata, or Open Graph properties.

[jamminjames]

@acwolff, I've run into a problem and wonder if you might have some insight. I got the social media links working very well for the website version of my app, but on the Android version, I'm having trouble with Pinterest. If you're not logged in, on the website version, the login popup window is fine, and has a url of:
https://www.pinterest.com/?next=/pin/create/button [etc], while on the Android, it starts with that, but then quickly goes to:
http://pinterest://open?link_click_id=[some long number], producing this error: "Could not be loaded because: net::ERR_UNKNOWN_URL_SCHEME"

After double-checking, I think the code is exactly the same, unless I'm missing something, so it must be something about the Android app that's redirecting to this strange url. The Facebook and other social media shares are doing fine.

Any idea what's causing this and how I can deal with it? Thanks for any help!

[jamminjames]

Reading up on net::ERR_UNKNOWN_URL_SCHEME errors, it seems it could be an 'allow-intent' needs to be added to the config.xml file, but I tried these, and it makes no difference:

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="https://www.pinterest.com/*" />
<allow-navigation href="https://www.pinterest.com/*" />

[jamminjames]

@acwolff -- Also, what do you think about what's suggested here? Particularly under "A complete example" -- can that "intent" stuff be included in the PhotoSwipe-ui-default.js file?

More interesting stuff here. I'm just not sure how to implement it, and whether it can be done in PhotoSwipe-ui-default.js.

[acwolff]

@jamminjames, I don’t no anything about making Android apps, so I can’t help you.

[jamminjames]

Okay, thanks, I'll make a new issue out of this.

[jamminjames]

@acwolff, Thought you might be interested in the solution I came up with. For an app like mine, this seems to work much better. It won't work on a website gallery, though, without somehow installing this other plugin. I'm bypassing PhotoSwipe's built-in sharing completely, sharing via another plugin from within PhotoSwipe. For details, check out:
#1443