動力學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

許多searchs（和測試）後，我找到了一個解決方案： 所以我我型動物的項目，並對每個項目我創建一個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' 
       }); 
    }); 
}); 

作品。我希望能幫助別人！