WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] feature request: social sharing from lightbox (13 posts)

  1. barthoogendijk
    Member
    Posted 2 years ago #

    Is there I way of social sharing an image directly from the easy fancy box? I use easy fancybox in combination with the next gen gallery and I want visitors to be able to share an image with their network while browsing through the gallery.

    http://wordpress.org/extend/plugins/easy-fancybox/

  2. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    There might be but you'll have to do some work... I have put up a simple image on http://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 :)

  3. barthoogendijk
    Member
    Posted 2 years ago #

    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.

  4. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  5. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Yes, adding the href attribute seems to work. Check out http://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 :)

  6. barthoogendijk
    Member
    Posted 2 years ago #

    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: http://www.barthoogendijk.info/levensbeschouwing365/
    Note: only the first three images contain the code in the alttext.

  7. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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 :)

  8. barthoogendijk
    Member
    Posted 2 years ago #

    With the iframe and href it works, but now the facebook doesn't pick up thumbnails :(

  9. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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?

  10. barthoogendijk
    Member
    Posted 2 years ago #

    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

  11. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    Je hebt gelijk, terug over in het engels ;)

    Could you try to use (for testing purposes) to use this query parameter url=http://farm3.static.flickr.com/2647/3867677191_04d8d52b1a.jpg as part of the fancybox code? It should work... See http://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.

  12. barthoogendijk
    Member
    Posted 2 years ago #

    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..

  13. RavanH
    Member
    Plugin Author

    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic