CODEWITHSUNDEEP
facebookfancybox
Catfish
Catfish

Reputation: 19284

How to add multiple facebook like buttons to 1 page?

I know this question has been asked before, but I feel like my circumstance is slightly different.

I have a site where I a global like button on every page that basically "likes" the site. Now I have a page with a bunch of photos on it and if you click each page, it pops up in a fancybox.

Here's the html that's on the page. Each of these images shows the corresponding title in the fancybox when it's clicked.

<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>

What I want to do is have a like button in each of the fancy boxes for that specific image so when someone clicks "Like", that specific image will show up on facebook.

Currently i'm using the iframe method with the meta tags for my global like button.

Upvotes: 0

Views: 1651

Answers (1)

DMCS
DMCS

Reputation: 31860

My answer to the other question (http://facebook.stackoverflow.com/questions/9252899/fancybox-with-share-buttons-linked-to-unique-image) still applies.

You will need to have a mechanism that based upon a unique URL to serve off the correct http://ogp.me og: meta tags to be parsed by Facebook's linter.

Remember the linter does not run javascript, so they will need to be correctly defined in the response stream.

EDIT

Example of each image having it's own URL. These will aid in Facebook being able to get the correct html and og: tags. 

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

Within the HTML response from each of those unique URLs, the correct og: tags are specified. Within that HTML you should have a javascript redirect to the actual page to display the picture. Since javascript wont be run by the linter, the linter should be able to read those og: tags.

See http://ogp.me for how to specify og tags.

Upvotes: 1

Related Questions