button - 如何制作自定义 Facebook、Twitter 和其他社交网络按钮

Question

我遇到了这个网站，我注意到它有一个定制的 Facebook 和 Twitter 按钮。

http://www.mint.com/blog/how-to/4-essential-questions-to-ask-at-the-end-of-a-job-interview/

我想知道如何在我的网站中实施？

Answer 1

现在，有很多 jquery 插件可以帮助您自定义您的社交网络按钮。例如

1. Sharrre 插件（网站：http ://sharrre.com ）
2. Koottam 社交 jQuery 插件 ( http://jobyj.in/koottam-jquery-plugin/index.html )

Answer 2

如果你想自己做，这里有一个参考：自定义 Twitter 按钮和自定义 Facebook 按钮 facebook：

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

    window.fbAsyncInit = function() {
        FB.init({
            appId: '{appId}',
            status: true,
            xfbml: true
        });
    };

    (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/all.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    $(document).on(
            'fbpost', //  <—- HERE'S OUR CUSTOM EVENT BEING LISTENED FOR
            function() {

                FB.ui(
                        {
                            method: 'feed',
                            name: '{appShareName}',
                            message: '{appShareMessage}',
                            caption: '{appShareCaption}',
                            description: (
                                    '{appShareDescription}'
                                    ),
                            link: '{appLink}',
                            picture: '{appURLToImage}',
                            actions: {
                                name: '{appShareActionName}',
                                link: '{appActionLink}'
                            }
                        },
                function(response) {
                    if (response && response.post_id) {
                        alert('Post was published.');
                    }
                });
            });
    $(document).ready(function() {
        $('.facebook').click(function() {
            $(document).trigger('fbpost');
        });
    });

</script>

<div class="facebook"><img src="/assets/images/facebook.png" /></div>

推特：

<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>

<div class="twitter">
    <a href="https://twitter.com/intent/tweet?url={appLink};text={appShareMessage};size=l&amp;count=none">
        <img src="/assets/images/twitter.png" />
    </a>
</div>