Facebook Like button for every item?

Question

I have Facebook iframe app where I am pulling content with JSON and representing it in a list with search criteria.

On item click new content shows on the same page (using ajax), and that page shows more info about item. I want to add a LIKE button for every clicked item.

But it must be a different URL so I can publish it on my FB wall. So when I check link from Like button on wall, it will redirect me on that special item.

Here are few issues:

1) How to define Like button for every item?

<div class="fb-like" data-href="LINK FOR LIKE BUTTON" data-send="true" data-layout="button_count" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>

Here is LIKE button, I need to specify different data-href for every item.

2) I need to send some parameters to url. Let's say when clicking on item, I should send item id to URL. Right now I can send item id to my URL but it is doing just in my iframe -- not in facebook URL. How can I do this?

I think second problem would give an answer for my first problem.

Edit: I am doing this using jQuery.

edit2: so, i am using jquery for my site, pulling content with JSON and representing it with html and jquery, i have, it is all the same page, but on click i hide some contents and show another, so my main content is a list of items, click on item i hide main content, and i show item info content

so, it is all one page, so it has the same URL (main content, item content,... all the same URL)

so for adding LIKE buttons for every item, i need to make a difference between those items, so i done this

'window.location.href=window.location.href + "#id=" + propertyid;' 

so right now, every item has its own URL, which i done manually, so right now every item has own URL which i could use for LIKE button

but, when i alert this new window.location.href is seems all right, i get this new location with #id=12345 included, but when i try to send that location to LIKE button data-href it is always just the main location, without this new part includind item id #id=12345

Answer 1

Yes, you can create FB Like buttons for "items" shown on dynamically created screen content (eg Ajax popups).

Issues:

Individual item urls FB demands a "social graph endpoint" for each item that can be liked. So you also need to support a url which returns only the "item." This is the url for the individual item. It is also the url that a FB viewer will click on if they want to find out more about the item.

Example: a page shows a list of articles. There is an individual Like button next to each article. When a person "Likes" article B, it is shown in their FB stream. When they click on "Article B" in the stream, it should go to a page that only shows article B.

Also, the url for just article B will be queried by Facebook to obtain the FB meta headers for the individual item (image, classification, etc).

Parsing the new dom for FB items Depending on which method you use for adding FB like buttons et al, you may need to tell FB to explicitly (re-)parse the new parts of the dom that you just added dynamic content to. (Your pop-up.)

Since you know the element that you added the popup to, there is no need to tell FB to reparse your entire dom. Tell them to parse starting at the beginning of your newly added/changed element:

Code I use:

if (event_data) { // event_data was received, show it
  panel.setBody(event_data); // set the pop-up's body
  if (!this.ie && typeof(FB) != "undefined" && FB.XFBML)
    {FB.XFBML.parse(this.panel_el);} // Parse FaceBook markup
....

Docs from FB on this:

• http://developers.facebook.com/docs/reference/plugins/like/
• http://developers.facebook.com/docs/opengraph/
• http://ogp.me/ # FB site about "Open Graph Protocol"

Answer 2

Place this in a for loop, and you should be fine.

var elements = $("#divId").html();
$("#divId").html(elements + "like button code");
$("#divId.fb-like").attr("data-href", "what you want to link to");

See .html() and .attr() specs.