國內社交關注按鈕（ChinaSocialFollowUsButtons）

如果你想要一款簡單風格的關注我們按鈕，那麼你可以試一試我們原創的ChinaSocialFollowUsButtons。

在使用時，只需要填寫 a 標籤 href 引數，圖示就會自動顯示出來，你可以放置在你所需要的地方。

你可以看到下面的示例圖示。展示出來的圖示都是我們支援的社會化網站。

只複製你需要的li標籤:

• 新浪微博
• 騰訊微博
• QQ空間
• github
• github
• 微信公眾號
• 百度
• twitter
• facebook
• plus.google
• pinterest
• flickr
• vimeo
• youtube
• instagram
• youtube
• wordpress
• vk
• linkedin
• soundcloud
• tripadvisor
• yelp
• 訂閱我們
• 給我寫信

安裝步驟

1) 在網頁頭部載入css樣式和jquery.js。注意要載入font-awesome的CSS樣式，在這之前要將FONT資料夾複製到靜態資料夾中，與CSS資料夾同級:

1. ```html
2. <script src="js/jquery.js"></script>
3. <link rel="stylesheet" href="css/csfub.css" />
4. <link rel="stylesheet" href="css/font-awesome.min.css?ver=4.4.0'" />
5. ``` 

2) 複製任意的 `.menu-social` 列表到所需的位置:

1.  
2. ```html
3. <!-- 按鈕從這裡開始. 複製 div到你的文件. -->
4. <div id="menu-social" class="menu">
5. <ul id="menu-social-items" class="menu-items" style="-webkit-padding-start: 0px;">
6. <li class="menu-item">
7. <a title="關注我們的新浪微博" target="_blank" rel="nofollow" href="http://weibo.com"><span class="screen-reader-text">新浪微博</span></a>
8. </li>
9. <li class="menu-item">
10. <a title="關注我們的騰訊微博" target="_blank" rel="nofollow" href="http://t.qq.com"><span class="screen-reader-text">騰訊微博</span></a>
11. </li>
12. <li class="menu-item">
13. <a title="關注我們的QQ空間" target="_blank" rel="nofollow" href="http://qzone.qq.com"><span class="screen-reader-text">QQ空間</span></a>
14. </li>
15. <li class="menu-item">
16. <a title="關注我們的github主頁" target="_blank" rel="nofollow" href="https://github.com/yehaicao/"><span class="screen-reader-text">github</span></a>
17. </li>
18. <li class="menu-item">
19. <a title="關注我們的人人主頁" target="_blank" rel="nofollow" href="https://zhan.renren.com/"><span class="screen-reader-text">github</span></a>
20. </li>
21. <li class="menu-item">
22. <a title="關注我們的微信公眾號" target="_blank" rel="nofollow" href="http://wx.qq.com"><span class="screen-reader-text">微信公眾號</span></a>
23. </li>
24. <li class="menu-item">
25. <a title="關注我們的百度空間" target="_blank" rel="nofollow" href="http://www.baidu.com"><span class="screen-reader-text">百度</span></a>
26. </li>
27. <li class="menu-item">
28. <a title="關注我們的twitter" target="_blank" rel="nofollow" href="http://twitter.com"><span class="screen-reader-text">twitter</span></a>
29. </li>
30. <li class="menu-item">
31. <a title="facebook" target="_blank" rel="nofollow" href="http://facebook.com"><span class="screen-reader-text">facebook</span></a>
32. </li>
33. <li class="menu-item">
34. <a title="plus.google" target="_blank" rel="nofollow" href="http://plus.google.com"><span class="screen-reader-text">plus.google</span></a>
35. </li>
36. <li class="menu-item">
37. <a title="pinterest" target="_blank" rel="nofollow" href="http://pinterest.com"><span class="screen-reader-text">pinterest</span></a>
38. </li>
39. <li class="menu-item">
40. <a title="flickr" target="_blank" rel="nofollow" href="http://flickr.com"><span class="screen-reader-text">flickr</span></a>
41. </li>
42. <li class="menu-item">
43. <a title="vimeo" target="_blank" rel="nofollow" href="http://vimeo.com"><span class="screen-reader-text">vimeo</span></a>
44. </li>
45. <li class="menu-item">
46. <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
47. </li>
48. <li class="menu-item">
49. <a title="instagram" target="_blank" rel="nofollow" href="http://instagram.com"><span class="screen-reader-text">instagram</span></a>
50. </li>
51. <li class="menu-item">
52. <a title="youtube" target="_blank" rel="nofollow" href="http://youtube.com"><span class="screen-reader-text">youtube</span></a>
53. </li>
54. <li class="menu-item">
55. <a title="wordpress" target="_blank" rel="nofollow" href="http://wordpress.com"><span class="screen-reader-text">wordpress</span></a>
56. </li>
57. <li class="menu-item">
58. <a title="vk" target="_blank" rel="nofollow" href="http://vk.com"><span class="screen-reader-text">vk</span></a>
59. </li>
60. <li class="menu-item">
61. <a title="linkedin" target="_blank" rel="nofollow" href="http://linkedin.com"><span class="screen-reader-text">linkedin</span></a>
62. </li>
64. <li class="menu-item">
65. <a title="soundcloud" target="_blank" rel="nofollow" href="http://soundcloud.com"><span class="screen-reader-text">soundcloud</span></a>
66. </li>
68. <li class="menu-item">
69. <a title="tripadvisor" target="_blank" rel="nofollow" href="http://tripadvisor.com"><span class="screen-reader-text">tripadvisor</span></a>
70. </li>
72. <li class="menu-item">
73. <a title="yelp" target="_blank" rel="nofollow" href="http://yelp.com"><span class="screen-reader-text">yelp</span></a>
74. </li>
75. <li class="menu-item">
76. <a title="訂閱我們" target="_blank" rel="nofollow" href="http://www.wordpressleaf.com/feed"><span class="screen-reader-text">訂閱我們</span></a>
77. </li>
78. <li class="menu-item">
79. <a title="給我們寫信" target="_blank" rel="nofollow" href="mailto:[email protected]"><span class="screen-reader-text">給我寫信</span></a>
80. </li>
81. </ul>
82. </div>
83. <!-- 按鈕程式碼結束 -->
84. ```

 
這些<li> 程式碼，你可以在 index.html 示例中找到。
 
3) 在你的網頁上加上javascript檔案，它們都在js的檔案內。另外微信二維碼使用了js來載入，所以你也需要載入csfub.js。

1.  ```html
2. <script src="js/csfub.js"></script>
3. ```

 
4) 在csfub.js中將圖片地址改自己的圖片地址。

1.  ```html
2. var imgurl='img/weixin.png';
3. ```

下載地址

你可以在github下載： github

結束

如果你有什麼疑問，可以在本頁留言，獲得幫助。