如何在一个页面中添加多个类似facebook的按钮？

我知道以前有人问过这个问题，但我觉得我的情况略有不同

我有一个网站，我在每个页面上都有一个“喜欢”这个网站的按钮。现在我有了一个页面，上面有一堆照片，如果你点击每个页面，它会弹出一个fancybox

这是页面上的html。单击fancybox时，每个图像都会在其中显示相应的标题

<a href="/image1.jpg" class="zoom img">
    <img src="/image1.jpg" width="150" height="100" />
</a>    

<a href="/image2.jpg" class="zoom img">
    <img src="/image2.jpg" width="150" height="100" />
</a>    

<a href="/image3.jpg" class="zoom img">
    <img src="/image3.jpg" width="150" height="100" />
</a>                    


<div id="fancyboxTitles" style="display: none"> 

    <div>title1</div>                                             
    <div>title2</div>
    <div>title3</div>

</div>

标题1
标题2
标题3

我想做的是在每个花式框中为特定的图像设置一个“喜欢”按钮，这样当有人点击“喜欢”时，特定的图像就会出现在facebook上

---

目前，我正在使用iframe方法，为我的全局类按钮使用meta标记。

我对另一个问题的回答(http://facebook.stackoverflow.com/questions/9252899/fancybox-with-share-buttons-linked-to-unique-image)仍然适用

你需要有一个基于唯一URL的机制来提供正确的og:meta标签，这些标签将由Facebook的linter解析

记住linter不运行javascript，因此需要在响应流中正确定义它们

编辑

每个图像都有自己的URL的示例。这些将有助于Facebook获得正确的html和og:标记

http://example.com/images.php?id=1
http://example.com/images.php?id=2
http://example.com/images.php?id=3

在每个唯一URL的HTML响应中，指定了正确的og:标记。在HTML中，您应该有一个javascript重定向到实际页面以显示图片。因为javascript不会由linter运行，所以linter应该能够读取那些og:标记

有关如何指定og标记的信息，请参阅。

的可能重复项