phpjavascriptfacebookfacebook-javascript-sdkfacebook-fbml

Custom Facebook Share Integration


I'm working on an eCommerce website, in which the Shopping Cart page needs to have the Facebook Share button for all product items, with the following requirements:-

Let's assume that there are 4 Product Items in the shopping cart page - "p1", "p2", "p3" & "p4".

  1. When the user clicks the "Share" button for "p4" item, he will be asked to login, if he is not logged into FB. This has been accomplished using the "fb:login-button" FBML tag.

  2. After login, the user will be able to provide a Custom Message in the pop-up in my website. That pop-up will also contain the name of the Product for the "p4" item, along with an image.

  3. When the user clicks the "Share" / "Submit" button, the message with the Product name & image for the "p4" item will get posted / published in the user's Facebook wall. Both the points #2 & #3 have been done using the "FB.init" & "FB.ui" core methods of JavaScript SDK.

  4. Now in my website, the Shopping Cart page will show me that for the "p4" item, the Facebook Share is completed & so there will be no more "Facebook Share" button, even when the page is refreshed again or when more such products are added into the Shopping Cart. Here I'm not able to perform the disabling of the "Share" button.

  5. The user will be able to click the "Share" button for the other products "p1", "p2" & "p3". but the pop-up for the Share message will show the Product name & image for the corresponding products & not for the last item "p4". However, here the pop-up always provides the information for only the last item "p4". Instead what I actually want is the multiple instances of the Facebook Share functionality.

I'm particularly in need of assistance for points #4 & #5.


Solution

  • Facebook wont allow you to share custom text/images using share button, if you need to do so, in the share URL, give URL of product detail page instead of list page and set meta-data in that product detail page.

    Other option is to set meta-data generic to all products.

    Here is the link explaining what are the meta-data Facebook can understand

    http://grafikdesign.wordpress.com/2010/02/10/facebook-sharespecifying-meta-tags-fbml-audio-flash-video-action-bar/