How to make Custom Facebook, Twitter and Other Social Networking buttons

Question

I came across this website and i've noticed that it has a customized Facebook and Twitter buttons.

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

I would like to know how can i implement in my website?

Answer 1

if you want to do it yourself here is a reference: Custom Twitter button and Custom Facebook button 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>

Answer 2

Now, There are many jquery plugins can help you to customize your social network buttons. for example

1. Sharrre plugin (Website: http://sharrre.com)
2. Koottam Social jQuery Plugin (http://jobyj.in/koottam-jquery-plugin/index.html)