自定義Facebook分享按鈕

我試圖製作一個Facebook分享按鈕，當我點擊它時彈出一個小窗口，就像附加圖像一樣。

我發現這樣做對developers.facebook.com的方式，但問題是我不能夠自定義按鈕，在所有，我想我自己的按鈕與特定的寬度，高度，背景圖像，文本等，但看起來這是無法完成的，對包含分享按鈕的div類的任何更改都會禁用其功能，或者至少不會彈出。我搜索了這個問題，但找不到任何明確的解決方案，即使類似的問題在這裏StackOverflow沒有明確說明問題，沒有答案。自定義Facebook分享按鈕

反正有反正用Javascript，jquery甚至引導來做到這一點嗎？這裏是我的代碼：

<html> 
    <head> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src='http://connect.facebook.net/en_US/all.js'></script> 

    </head> 
    <body> 
     <div id="fb-root"></div> 
     <script> 

      (function(d, s, id) { 

      var js, fjs = d.getElementsByTagName(s)[0]; 

      if (d.getElementById(id)) return; 

      js = d.createElement(s); js.id = id; 

      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9"; 

      fjs.parentNode.insertBefore(js, fjs); 

      }(document, 'script', 'facebook-jssdk')); 

     </script> 

     <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="large" data-mobile-iframe="true"> 
      <a class="fb-xfbml-parse-ignore" title="Facebook share" target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&amp;src=sdkpreparse">Share</a> 
     </div> 

    </body> 
</html>

來源

2017-06-17 Safwat Alshazly

我sloved它，它是相當簡單的，我發現這裏的解決方案

Custom image for Facebook share button

我只需要製作具有onclick事件與一些代碼爲一個div如下：

<div><img src="fbicon.PNG" alt="Share on Facebook" onclick="window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent('https://developers.facebook.com/docs/plugins/'),'facebook-share-dialog','width=626,height=436'); return false;" /></div>

來源

2017-06-17 11:50:21

自定義Facebook分享按鈕

回答

相關問題