动态脸书分享按钮

Dynamics facebook share buttons

本文关键字：按钮 分享 动态      更新时间：2023-09-26

我在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>项。对于每个项目，我想用Facebook的脚本分享两个<p>的内容：

 <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>

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

经过多次搜索（和测试），我找到了一个解决方案：所以我有我不同的项目，对于每个项目，我创建一个带有share-button类和两个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'
                });
     });
});

完美工作。我希望帮助别人！

相关文章：