How to enable users on the web to quickly "like" specific images in the gallery of my website?_问答_开发者

How to enable users on the web to quickly "like" specific images in the gallery of my website?

开发者 https://www.devze.com 2023-01-21 00:55 出处：网络

In my website I have a small gallery with about开发者_JS百科 100 images only. It would be cool if facebook users could \"like\" an image so that this appears on their wall and all their friends see th

In my website I have a small gallery with about开发者_JS百科 100 images only. It would be cool if facebook users could "like" an image so that this appears on their wall and all their friends see the image. I'm not sure if this is possible with facebook. Maybe someone knows?

What you are trying to do is possible, but you have to think about it a little differently. You will need to dynamically create the open graph tags on the page based on some query string or url information. If all of your images are on the same page you would do something like this: Say my page is http://www.example.com/photos.php. First, add all your like buttons to this page. Each image will have its own like button like this:

<fb:like href="http://www.example.com/photos.php?id=###"></fb:like> (where ### is the id of the photo)

Now, what happens with a fb like is when a user clicks like the href url is sent to facebook, then facebook actually makes a request to that url to read the open graph data. So this is where you have to build a dynamic page that provides dynamic open graph data.

So for each image ?id=### display the appropriate open graph tags on the page like so:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:og="http://opengraphprotocol.org/schema/"
      xmlns:fb="http://www.facebook.com/2008/fbml">
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Image Name"/>
    <meta property="og:type" content="image"/>
    <meta property="og:url" content="http://www.example.com/photos.php?id=###"/>
    <meta property="og:image" content="http://www.example.com/img/myimg.jpg"/>
    <meta property="og:site_name" content="My Site Name"/>
    <meta property="fb:admins" content="USER_ID"/>
    <meta property="og:description" content="A cool image I made"/>
    ...
  </head>
  ...
</html>

So now when facebook makes a request to the url http://www.example.com/photos.php?id=### it will read the og:image tag and display that image as the image with the post on facebook. It will also use the other properties accordingly.

Let me know if this makes sense or if you have any questions.