[Plugin: Easy FancyBox] feature request: social sharing from lightbox

There might be but you’ll have to do some work… I have put up a simple image on https://demo.4visions.nl/easy-fancybox-sandbox/like-my-box/ as an example. There, I have pasted some Facebook like button (iframe) code straight into the Alt text field when inserting the thumbnail.

It might be possible to do something similar in NextGEN, using either the title or the alt attribute. The alt attribute has preference since it does not generate a mouse-pointer tooltip (which in this case would be showing the bare facebook code) on mouse-over in most browsers.

If you find a way to make it work with NextGEN, please share it so others can benefit ??

The button appears in the fancybox but unfortunately the “like” doesn’t appear on Facebook. Too bad.. couldn’t find any other free plugin to do this except Mac Photo Gallery.

Hi Bart,

Just did some testing and managed to make it work with generic code but you need to escape all forward slashes in any javascript. For instance, when adding this in the Alt text field

<div id="fb-root"></div><script>(function(d,s,id){var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "\/\/connect.facebook.net\/nl_NL\/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document,'script','facebook-jssdk'));</script><fb:like send="false" width="450" show_faces="true"></fb:like>

the button works ?? Notice the backslashes in front of each forward slash.

The only thing is that it will actually ‘like’ the page and not the image itself… For that, you’ll probably need to add href=”…” (with URL to the full size image) to the <fb: ... part.

Yes, adding the href attribute seems to work. Check out https://demo.4visions.nl/easy-fancybox-sandbox/like-my-box/

I suppose that if you have more than one image with fb button on one page, you do not need to repeat the first part, only the <fb: ... ></fb:like> is needed. In fact, maybe the whole first part (but without the backslashes?) is better off in a text widget… as long as it can be placed before the images.

Or activating a plugin like Simple Facebook Connect, setting up your Facebook API there and then (I suppose) only the <fb: ... ></fb:like> part is needed in the image Alt text field.

Hope that helps ??

Great! Thanks for your attention on this one! Almost works.. the image appears on the fb wall with the correct thumbnail!!

There are some issues left:

1/ when using the Fanxybox navigation, this makes the buttons dissapear. You click next and there’s no button antymore. Go back, and still no button. One has to reload the page and clear the cache to see the button again. This is inconvenient because this way you can’t make all the images in one gallery shareable to facebook, only the first image displayed in the fancybox.

2/ I installed “Add link to facebook” plugin and configured the API but I still need to put the script in the alttext. Using only the <fb: … ></fb:like> part doesn’t display the button otherwise.
I must say: “Add link to facebook” has a lot of options and I’m not sure I made the right setup.

PS:
You can take a look at the gallery here: https://www.barthoogendijk.info/levensbeschouwing365/
Note: only the first three images contain the code in the alttext.

OK, I went back to the facebook iframe embed code and it turns out that it was only the missing href that made it fail…

Paste this in each Alt text field and replace the three dots after href= with the full URL to the image:

<iframe src="//www.facebook.com/plugins/like.php?href=...&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe>

Of course, you could change some options like “show_faces=false” to not show the gravatars of those that liked (in which case you can reduce the height to 35px instead of 80px) …

The benefit of the iframe code is that it works across all images in a gallery and no matter how many times you open them ??

With the iframe and href it works, but now the facebook doesn’t pick up thumbnails ??

Da’s vreemd… op m’n demo-pagina werkt het wel. Een thumbnail komt op m’n timeline terecht. Het is echter niet de thumbnail die in WordPress is ingesteld, bedoel je dat soms?

Huh.. nu in NL verder? Kunnen andere ge?nteresseerden het dan nog wel volgen?

Nou goed.. ?? Er komt geen thumbnail. Ik heb een featured image ingesteld op de pagina, maar die wordt ook niet oppgepikt. Het liefst heb ik natuurlijk een thumb van de betreffende afbeelding die gedeeld wordt.

Het javascript werkte dan toch het beste maar helaas dus eenmalig:
<div id="fb-root"></div><script>(function(d,s,id){var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "\/\/connect.facebook.net\/nl_NL\/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document,'script','facebook-jssdk'));</script><fb:like send="false" width="450" show_faces="false" href="THEFULLLINKTOTHEIMAGEHERE"></fb:like>

Is er geen manier om te voorkomen dat deze button steeds verdwijnt?

PS
Super bedankt trouwens voor het meedenken tot dusver. Fancybox is echt super (en Nextgen ook), maar het is in deze tijd natuurlijk wel fijn om je foto’s te kunnen delen uit een galerij-plugin

Je hebt gelijk, terug over in het engels ??

Could you try to use (for testing purposes) to use this query parameter url=https://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg as part of the fancybox code? It should work… See https://demo.4visions.nl/easy-fancybox-sandbox/like-my-box/ where I copied your first gallery image (and a second time, but edited the src= to contain the missing http: and moved the code from the link title attribute to the img alt attribute… but with the same result) and if you test the different images you can see the different results: the first two (using your first image url=) do not work correctly (using your first image url=) while the second two (using the flicr hosted fancybox image url) work fine. That very first image like button did work correctly before I changed the url= part to your gallery image url.

I have the impression that Facebook tries to use your original image but is not able to parse it correctly. Do you have some kind of anti-hotlinking rules in your .htaccess or something?

Or are the images saved in some kind of format (with the “Progressive” bit switched on maybe?) that facebook can not handle very well?

It’s strange, I agree, but since I have absolutely no clue how to fix the issue with the JSSDK version script code from appearing only once, I think the iframe code is the only possibility.

This then will probably be an issue with the way NextGen Gallery stores the image.

I switched from flickr to self-hosted images for my 365daysproject because I exceeded the 200 limit of a free flickr-acoount. The reason I like to use the NextGen Gallery is that it makes it much easier to manage a large number of images. But the sharing thing seems to be a different ‘next generation’ that ngg probably didn’t expect ;-).

The JSSDK version script did it. But only once… untill you clear the cache (CTRL-F5).. then it works again.. once..

Sadly, only the iframe version is working on my side but that’s indeed without NextGEN.

I have seen problems with image rendering by Facebook before without NextGEN being involved. No idea what actually causes this… Sorry.