Facebook Like Button in Pretty Photo Image Gallery

Question

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?

score 5 · Accepted Answer · edited Sep 24 '12 at 19:12

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;
        });

edited Sep 24 '12 at 19:12

Christopher Orr

110,418
27
198
193

answered Sep 15 '12 at 14:25

Mohammed Swillam

9,119
4
36
47

so, how would you suggest I implement the desired bahavior? – Dantes Sep 15 '12 at 14:27
http://stackoverflow.com/questions/7054217/changing-facebook-meta-tag-content-attribute-using-jquery – Mohammed Swillam Sep 15 '12 at 14:29
in the head section I could make an if clause that will register when a user is on the "galler" page. But then how can i identify which image user has clicked on? – Dantes Sep 15 '12 at 14:29
you will use jQuery to alter the meta tag of Facebook og:image, please check the mentioned question for more information. – Mohammed Swillam Sep 15 '12 at 14:30
thanks very much for your answer. I must admit i am not so good with javascript. Can you please tell me where is my script (i suppose it's image gallery .js file) do i have to insert the line $("meta[property=og\\:title]").attr("content", result.title); ? – Dantes Sep 15 '12 at 14:36
another question - in your update you are changing the TITLE property, not the IMAGE? Or? – Dantes Sep 15 '12 at 14:37
Fixed. regarding where to place the code, I think it will be inside the click handler inside your PrettyPhoto js file that you are using. sorry, I don't have it so I cannot determine where exactly to place this code. – Mohammed Swillam Sep 15 '12 at 14:58
Can you please look at the script, and tell me how and where to edit the code: here it is https://gist.github.com/3728665 – Dantes Sep 15 '12 at 16:23
from what I've seen there, you will need to add our code inside these two handlers: `$pp_gallery.find('.pp_arrow_next').click(function(){ $.prettyPhoto.changeGalleryPage('next'); $.prettyPhoto.stopSlideshow(); return false; }); $pp_gallery.find('.pp_arrow_previous').click(function(){ $.prettyPhoto.changeGalleryPage('previous'); $.prettyPhoto.stopSlideshow(); return false; });` – Mohammed Swillam Sep 15 '12 at 16:27
would it be too much to ask from you to update the script and send it to me? Please :) Thx – Dantes Sep 15 '12 at 16:30
sorry, I can't because it depends on your DOM elements, but trust me, it's so simple :) – Mohammed Swillam Sep 15 '12 at 16:35
ok, I've edited the code, but I don't understand the functionality. does it mean that now my in my head section og image attribute will be changed automatically? Do I have to do anything else with the script? Sorry, to ask so much, but I'm little confused. I don't see what I should do next and how will I reach to my image. :) – Dantes Sep 15 '12 at 16:50
1

Actually what I am trying to ask is - how will our code in .js file "pick up" the image path of the image inside the code where I define images - inside the gallery on the web page? And than where is that stored? Or is it automatically updated inside the head section with our code? – Dantes Sep 15 '12 at 16:53

score 0 · Answer 2 · answered Sep 15 '12 at 14:23

0

Use Facebook's OG Meta Tags

For images for instance :

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

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

answered Sep 15 '12 at 14:23

I know it should be probably done with FB OK MT, but the problem is where to embedd them into javascript image gallery... – Dantes Sep 15 '12 at 14:24

Facebook Like Button in Pretty Photo Image Gallery

2 Answers2