Dynamics facebook分享按钮

时间:2016-03-04 10:15:28

标签: javascript jquery asp.net-mvc-4 razor facebook-javascript-sdk

我在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> 的内容:

Function Create(<Bind(Include:="Id,Course,Category,SubCategory,FileName,FileType,UploadedBy,DateUploaded")> ByVal acAsset As acAsset) As ActionResult
        If ModelState.IsValid Then
            db.Assets.Add(acAsset)
            db.SaveChanges()
            Return RedirectToAction("Index")
        End If
        Return View(acAsset)
    End Function

我怎样才能实现这一目标?或者你推荐哪种方式?

1 个答案:

答案 0 :(得分:0)

经过多次搜索(和测试)后,我找到了一个解决方案: 所以我有我的不同项目和每个项目我创建一个带有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'
                });
     });
});

完美无缺。我希望能帮助别人!