如何製作自定義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

是一個參考：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> 

推特：

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