自定义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分享按钮

回答

相关问题