On this site I used pretty Photo image gallery. The problem is - when a user clicks on the facebook like button - on his news is displayed only the name of the site. what I would like is - when a user clicks fb LIKE button on a particular image, that image is shown on his news feeds. can you help me make this?

On this site I used pretty Photo image gallery. The problem is - when a user clicks on the facebook like button - on his news is displayed only the name of the site. what I would like is - when a user clicks fb LIKE button on a particular image, that image is shown on his news feeds. can you help me make this?

• javascript
• jquery
• jquery-plugins
• facebook-like
• prettyphoto

Share Improve this question Follow edited Sep 24, 2012 at 19:08 Dantes asked Sep 15, 2012 at 14:20 DantesDantes 2,89166 gold badges2828 silver badges3535 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

When working with Facebook, always ALWAYS check your website url with the Facebook debugger.

Looks like the problem is that Facebook couldn't featch the image probarly, so you will need to add a meta tag so Facebook can know the desired image for the prvded URL.

Ex: <meta property="og:image" content="YOUR_IMAGE_PATH"/>

Update 1:

In order to modify the Meta tag value when the user changes the gallery image, you can use the following code to do so:

$("meta[property=og\\:image]").attr("content", YOUR_IMAGE_PATH);

note that we needed to escape the : character as mentioned in the documentation

Update 2:

you will need to alter those functions in order to make it to work:

    $pp_gallery.find('.pp_arrow_next').click(function(){
            $.prettyPhoto.changeGalleryPage('next');
        // here you will need to read the current image url, then assign it to our facebook line.
    $("meta[property=og\\:image]").attr("content", YOUR_IMAGE_PATH);
            $.prettyPhoto.stopSlideshow();
            return false;
        });

    $pp_gallery.find('.pp_arrow_previous').click(function(){
            $.prettyPhoto.changeGalleryPage('previous');
        // here you will need to read the current image url, then assign it to our facebook line.
$("meta[property=og\\:image]").attr("content", YOUR_IMAGE_PATH);
            $.prettyPhoto.stopSlideshow();
            return false;
        });

Use Facebook's OG Meta Tags

For images for instance :

<meta property="og:image" content="http://yourwebsite./img/img.png"/>

For more information, check out this : http://davidwalsh.name/facebook-meta-tags