php - Custom Facebook Share Integration - Stack Overflow

admin管理员组

文章数量:1405393

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 acplished 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 pleted & 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.

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 acplished 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 pleted & 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.

• php
• javascript
• facebook
• facebook-javascript-sdk
• facebook-fbml

Share Improve this question Follow edited Dec 28, 2021 at 10:49 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jun 24, 2011 at 9:52 Knowledge CravingKnowledge Craving 7,9911313 gold badges5151 silver badges9292 bronze badges 3

• Is there nobody who can at least answer some of the points? – Knowledge Craving Commented Jun 27, 2011 at 5:37
• Please share some code, such as how you are adding the share buttons and anything else that would be of use. – Niklas Commented Jun 27, 2011 at 10:03
• If you could share the code, it will be helpful. – Shameer Commented Jul 2, 2011 at 17:18

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

I can't address your problem in Number 4 but I think what you're trying to do is as simple as creating a facebook sharer link dynamically and style it appropriately.

I've created a jsfiddle that does just that, take a look here and see if that helps you.

The guts of the code is a simple jQuery event handler that configures the url for the facebook sharer and some parameters, given the following html:

<ul class="products">
    <li id="product-1">
        Awesome Snacks 
        <a class="sharer" href="http://www.yoursite./some/url/to/product-1" data-title="Awesome Snacks on Website!">
            <span class="liketext">Share</span>
        </a>
    </li>
</ul>

And the following jQuery event handler definition:

$('.sharer').click(function(e) {
    e.preventDefault();

    var title = $(this).data('title');
    var url = $(this).attr('href');    
    var fbSharerUrl = 'http://www.facebook./sharer.php?';
    var params = { u: url, t: title };
    var fbSharerConfig = 'toolbar=0,status=0,width=600,height=400';

    window.open(fbSharerUrl + $.param(params), 'sharer', fbSharerConfig);
});

This will generate a facebook sharer link for you dynamically based on the href and data-title attributes of the links in your shopping cart.

Take a look at the jsfiddle I linked earlier as it also includes some CSS to make the links appear like the facebook share buttons :)

Correct me if i am wrong, but wouldn't the use of the iframe-Share-button correct all your problems?

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./2010/02/10/facebook-sharespecifying-meta-tags-fbml-audio-flash-video-action-bar/

本文标签： phpCustom Facebook Share IntegrationStack Overflow