4

The goal :
 I would like to have a share button in my fancybox that share the image I'm looking at with the correct image name in the Facebook sharer. I would like that when a user click on this in Facebook, he arrives on an opened Fancybox with the correct image.

The problem :
 I have a gallery with Jquery FancyBox (http://fancyapps.com/fancybox/). I added a share button with the code I find in this fiddle (http://jsfiddle.net/G5TC3/). My share button works, but get the meta og from the site and I want to have the og:image from the image I'm looking at.

$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
    beforeShow: function () {
        if (this.title) {

            // Add FaceBook like button
            this.title += '<iframe src="//www.facebook.com/plugins/like.php?href=' + this.href + '&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:110px; height:23px;" allowTransparency="true"></iframe>';
        }
    },
    helpers : {
        title : {
            type: 'inside'
        }
    }  
});

For the user who clicks on my link and arrives on an opened Facybox with the correct image I have no idea how to do that and if it's possible.

What I know:
I know that I have to have uniques URL for each images and I think I have it. ex from my site:
www.myURL.com/images/gallery/myimages_1.jpg
www.myURL.com/images/gallery/myimages_2.jpg

Is it correct?

I think I have to change the "this.href" in the sharer by the image url. First is it correct? And second (sorry I'm new in javascript) how can I do that?

I hope somebody could help me. Sorry for my English I'm trying to write my best English :) If you need more information please do not hesitate.

Thanks

[EDIT]:

I add this script on the gallery page

$(function()
{
    $('.thumbs').click(function()
    {
        $tempImgName = $(this).attr('id');
        $tempUrl = this.href + '/images/thumbs/' + $tempImgName;
        $meta = document.getElementById('facebook');
        $meta.setAttribute("content",$tempUrl);
    });
});

So when I click on a thumbsnail (with the class .thumbs) I get the image URL and I change the meta (with the facebook Id). It works but I think Facebook check the meta when the page load so how can I force Facebook to recheck my meta to take the good thumbs to share?

JeremRama
  • 41
  • 1
  • 4

1 Answers1

0

og:image cannot change by url. You need to give different share urls for different images.

For example :-

www.myURL.com/?pic=img1

www.myURL.com/?pic=img2 etc.

And a server side language ( like php ) can read the "pic" GET argument and change the og:image.

MarutiB
  • 924
  • 2
  • 9
  • 17
  • Ok I think I have a different URL for each images. I just don't know how to GET the image url in PHP. I have seen something like this in a code but I don't understand how to relate the "i" (I don't know where it comes from) with an url http://myURL.com/pics/".$_GET['i']; Can you explain me briefly. Thx a lot! – JeremRama Jul 16 '13 at 15:30
  • Ah, then here is what you should do `'';` And the share url should be www.myURL.com/?i=1 or i=2 etc. – MarutiB Jul 17 '13 at 13:22
  • I have edited my question. Now I change the meta tag when I click on a thumbs but I don't know how to force Facebook to recheck my meta. Is it possible? Thx – JeremRama Jul 18 '13 at 10:05
  • Changing meta in js wont work. As facebook is scraping you page from a non browser environment. – MarutiB Jul 18 '13 at 10:13
  • Ok so I think dynamically changing de og image of Facebook on a click is impossible. – JeremRama Jul 18 '13 at 12:24
  • From javascript yes, its impossible. From Server end however its still possible – MarutiB Jul 18 '13 at 13:11
  • Yes but I don't understand how. I have my images in a folder myrul.com/images/thumbs, I want the correct image when I click on share in the Fancybox. Can you make a new answer with a piece of code to explain how to get the correct image and give it to the Facebook sharer when I click on the Share button. Thx – JeremRama Jul 18 '13 at 13:17