Question

当我点击它时，我试图制作一个Facebook分享按钮弹出一个小窗口，就像附加的图像一样。

我在developers.facebook.com上找到了这样做的方法，但问题是我根本无法自定义该按钮，我想制作具有特定宽度，高度的自己的按钮，背景图片，文本等，但看起来这样做无法完成，对包含共享按钮的div类的任何更改都会禁用其功能，或者至少不会弹出。我搜索了这个问题，但无法找到任何明确的解决方案，即使StackOverflow上的类似问题也没有明确说明问题，也没有答案。

无论如何使用Javascript，Jquery甚至bootstrap来做到这一点？这是我的代码：

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

Answer 1

我解决了，很简单，我在这里找到了解决方案

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>

自定义Facebook共享按钮

1 个答案: