如何使自定义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. sharere插件(网站:http://sharrre.com)
Koottam Social jQuery Plugin (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>

twitter:

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