动态 facebook 共享按钮

Question

我在 vbhtml 中有这个部分：

<section class="white">
    @For Each item In Model
        @<div class="BNItem">
            <p class="title">@Html.DisplayFor(Function(modelItem) item.Titre)</p>
            <p class="description">@Html.DisplayFor(Function(modelItem) item.Description)</p>
            <!-- Your share button code -->
            <div class="fb-share-button" data-href="http://..." data-layout="button_count"></div>
            <hr />
        </div>
    Next
</section>

这会创建与模型中的项目一样多的 <div>。对于每个项目我想分享两个 <p> 与 Facebook 脚本的内容：

 <script type="text/javascript">
        $(document).ready(function () {
            $('.fb-share-button').live('click', function (e) {
                e.preventDefault();
                FB.ui(
                {
                    method: 'feed',
                    name: 'HyperArts Blog',
                    link: 'http://...',
                    picture: 'http://...',
                    caption: 'title', //first <p> content
                    description: 'description', //second <p> content
                    message: ''
                });

            });
        });
    </script>

我怎样才能做到这一点？或者你推荐哪种方式？

Answer 1

经过多次搜索（和测试），我找到了解决方案：所以我有我的不同项目，我为每个项目创建一个带有 share-button class 和两个 data- 属性、标题和描述的 facebook 按钮

 @For Each item In Model
        @<div class="BNItem">
            <p class="title">@Html.DisplayFor(Function(modelItem) item.Titre)</p>
            <p class="description">@Html.DisplayFor(Function(modelItem) item.Description)</p>

            <div class="share_buttons">
                <div>
                    <a class="btn btn-block btn-social btn-xs btn-facebook share-button" data-title="@Html.DisplayFor(Function(modelItem) item.Titre)" data-text="@Html.DisplayFor(Function(modelItem) item.Description)">
                        <span class="fa fa-facebook"></span> Partagez !
                    </a>
                </div>
            </div>
        </div>
        <hr />
    Next

所以在 JQuery 我抓住了这两个 data- 并创建了我的 Facebook 提要：

 $(document).ready(function () {
            $(".share-button").click(function () {
                var title = $(this).data("title");
                var description = $(this).data("text");
                FB.ui(
                {
                    method: 'feed',
                    name: title,
                    link: 'http://...',
                    picture: 'http://...png',
                    caption: 'My Site',
                    description: description,
                    message: 'test'
                });
     });
});

完美运行。我希望能帮助别人！

动态 facebook 共享按钮

Dynamics facebook share buttons

javascript

jquery

razor

facebook-javascript-sdk

asp.net-mvc-4