自定义Facebook共享集成

Question

我正在开发一个电子商务网站,其中购物车页面需要有所有产品的Facebook Share按钮,具有以下要求: -

假设购物车页面中有4个产品项目 - "p1","p2","p3"和"p4".

1. 当用户点击"p4"项目的"共享"按钮时,如果他没有登录FB,则会要求他登录.这是使用" fb:login-button"FBML标签完成的.

2. 登录后,用户将能够在我的网站弹出窗口中提供自定义消息.该弹出窗口还将包含"p4"项目的产品名称以及图像.

3. 当用户单击"共享"/"提交"按钮时,带有"p4"项目的产品名称和图像的消息将在用户的Facebook墙上发布/发布.第2和第3点都是使用FB.initJavaScript SDK 的" "和"FB.ui"核心方法完成的.

4. 现在在我的网站上,购物车页面会告诉我,对于"p4"项目,Facebook共享已完成,因此将不再有"Facebook Share"按钮,即使页面再次刷新或更多此类产品被添加到购物车中.在这里,我无法执行"共享"按钮的禁用.请帮帮我.

5. 用户可以单击其他产品"p1","p2"和"p3"的"共享"按钮.但共享消息的弹出窗口将显示相应产品的产品名称和图像,而不显示最后一个项目"p4".但是,此处弹出窗口始终仅提供最后一个项目"p4"的信息.相反,我真正想要的是Facebook Share功能的多个实例.请帮帮我.

我已经提到了以上几点中存在的问题,我在第4和第5点中遇到了问题.

请帮助我任何人,并提前感谢所有人.如果需要更多信息,请问我.

Answer 1

我无法解决你在第4号中遇到的问题,但我认为你要做的事情就像动态创建一个facebook sharer链接并适当地设置它一样简单.

我已经创建了一个jsfiddle就可以做到这一点,看看这里,看看是否有助于你.

代码的内容是一个简单的jQuery事件处理程序,它配置了facebook sharer的url和一些参数,给出以下html:

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

以及jQuery事件处理程序定义:

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

    var title = $(this).data('title');
    var url = $(this).attr('href');    
    var fbSharerUrl = 'http://www.facebook.com/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);
});

这将根据购物车中链接的href和data-title属性动态生成facebook sharer链接.

看一下我之前链接的jsfiddle,因为它还包含一些CSS,使链接看起来像facebook分享按钮:)