多说个性化广告位:让不同UA为你推荐不同的项目

by Posted on

最近有站长说我的多说广告位挺不错的，看其他博客折腾的多说就是显UA，我这个还能让不同UA（浏览器信息）为我推荐不同项目，感觉：哎呦，不错哦！

其实也没什么，分钱榜就做回“分享榜”来说说是怎么实现的吧。

要实现这个首先要保证多说核心脚本embed.js已经本地化，没有本地化的同学请参考《》这篇文章实现多说本地化再来。

本地化后，打开embed.js，在最顶部添加如下显示UA代码：

点击展开显示UA的代码

  1. //显UA开始
  2. function os(e) {
  3. var os = ”;
  4. if (e.match(/win/ig)) {
  5. if (e.match(/nt 5.1/ig)) {
  6. os = ‘<span class=“os_xp”><i class=“fa fa-desktop”> Win XP'</i </span 
  7. } else if (e.match(/nt 6.1/ig)) {
  8. os = ‘<span class=“os_7”><i class=“fa fa-desktop”> Win 7′</i </span 
  9. } else if (e.match(/nt 6.2/ig)) {
  10. os = ‘<span class=“os_8”><i class=“fa fa-desktop”> Win 8′</i </span 
  11. } else if (e.match(/nt 6.3/ig)) {
  12. os = ‘<span class=“os_8_1”><i class=“fa fa-desktop”> Win 8.1′</i </span 
  13. } else if (e.match(/nt 10.0/ig)) {
  14. os = ‘<span class=“os_8_1”><i class=“fa fa-desktop”> Win 10′</i </span 
  15. } else if (e.match(/nt 6.0/ig)) {
  16. os = ‘<span class=“os_vista”><i class=“fa fa-desktop”> Win Vista'</i </span 
  17. } else if (e.match(/nt 5/ig)) {
  18. os = ‘<span class=“os_2000”><i class=“fa fa-desktop”> Win 2000′</i </span 
  19. } else {
  20. os = ‘<span class=“os_windows”><i class=“fa fa-desktop”> Windows'</i </span 
  21. }
  22. } else if (e.match(/android/ig)) {
  23. os = ‘<span class=“os_android”><a href=“http://www.fenqianbang.com/sjwz” target=“_blank” style=“color:#FFFFFF!important;”><i class=“fa fa-android”> Android'</i </a href=</span 
  24. } else if (e.match(/ubuntu/ig)) {
  25. os = ‘<span class=“os_ubuntu”><i class=“fa fa-desktop”> Ubuntu'</i </span 
  26. } else if (e.match(/linux/ig)) {
  27. os = ‘<span class=“os_linux”><i class=“fa fa-linux”> Linux'</i </span 
  28. } else if (e.match(/mac/ig)) {
  29. os = ‘<span class=“os_mac”><i class=“fa fa-desktop”> Mac OS'</i </span 
  30. } else if (e.match(/unix/ig)) {
  31. os = ‘<span class=“os_unix”><i class=“fa fa-desktop”> Unix'</i </span 
  32. } else if (e.match(/symbian/ig)) {
  33. os = ‘<span class=“os_nokia”><i class=“fa fa-mobile”> SymbianOS'</i </span 
  34. } else {
  35. os = ‘<span class=“os_other”><i class=“fa fa-desktop”> 其它系统'</i </span 
  36. }
  37. return os + ““;
  38. }
  39. function ua(e) {
  40. var r = new Array;
  41. var outputer = ”;
  42. if (r = e.match(/FireFox/([^s]+)/ig)) {
  43. var r1 = r[0].split(“/”);
  44. outputer = ‘<span class=“ua_firefox”><a href=“http://www.fenqianbang.com/486.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> FireFox为您推荐：聚享游'</i </a href=</span 
  45. } else if (r = e.match(/Maxthon([d]*)/([^s]+)/ig)) {
  46. var r1 = r[0].split(“/”);
  47. outputer = ‘<span class=“ua_maxthon”><a href=“http://www.fenqianbang.com/111.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> Maxthon为您推荐：欢乐赚'</i </a href=</span 
  48. } else if (r = e.match(/BIDUBrowser([d]*)/([^s]+)/ig)) {
  49. var r1 = r[0].split(“/”);
  50. outputer = ‘<span class=“ua_ucweb”><a href=“http://www.fenqianbang.com/1726.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 百度为您推荐：蹦蹦网'</i </a href=</span 
  51. } else if (r = e.match(/UBrowser([d]*)/([^s]+)/ig)) {
  52. var r1 = r[0].split(“/”);
  53. outputer = ‘<span class=“ua_ucweb”><a href=“http://www.fenqianbang.com/1581.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> UC为您推荐：乐豆玩'</i </a href=</span 
  54. } else if (r = e.match(/MetaSr/ig)) {
  55. outputer = ‘<span class=“ua_sogou”><a href=“http://www.fenqianbang.com/1182.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 搜狗为您推荐：快乐赚'</i </a href=</span 
  56. } else if (r = e.match(/2345Explorer/ig)) {
  57. outputer = ‘<span class=“ua_2345explorer”><a href=“http://www.2345.com/?kq503899300” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 2345：会赚钱的浏览器'</i </a href=</span 
  58. } else if (r = e.match(/2345chrome/ig)) {
  59. outputer = ‘<span class=“ua_2345chrome”><a href=“http://www.2345.com/?kq503899300” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 2345：会赚钱的浏览器'</i </a href=</span 
  60. } else if (r = e.match(/LBBROWSER/ig)) {
  61. outputer = ‘<span class=“ua_lbbrowser”><a href=“http://www.fenqianbang.com/979.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 猎豹为您推荐：天天钻'</i </a href=</span 
  62. } else if (r = e.match(/MicroMessenger/([^s]+)/ig)) {
  63. var r1 = r[0].split(“/”);
  64. outputer = ‘<span class=“ua_qq”><a href=“http://www.fenqianbang.com/sjwz” target=“_blank” rel=“nofollow”><i class=“fa fa-weixin”> 微信：投票也赚钱'</i </a href=</span 
  65. /*.split(‘/’)[0]*/
  66. } else if (r = e.match(/QQBrowser/([^s]+)/ig)) {
  67. var r1 = r[0].split(“/”);
  68. outputer = ‘<span class=“ua_qq”><a href=“http://www.fenqianbang.com/1881.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> QQ为您推荐：集趣网'</i </a href=</span 
  69. /*.split(‘/’)[0]*/
  70. } else if (r = e.match(/QQ/([^s]+)/ig)) {
  71. var r1 = r[0].split(“/”);
  72. outputer = ‘<span class=“ua_qq”><a href=“http://www.fenqianbang.com/1881.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> QQ为您推荐：集趣网'</i </a href=</span 
  73. /*.split(‘/’)[0]*/
  74. } else if (r = e.match(/MiuiBrowser/([^s]+)/ig)) {
  75. var r1 = r[0].split(“/”);
  76. outputer = ‘<span class=“ua_mi”><a href=“http://www.fenqianbang.com/1039.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> Miui为您推荐：有赚网'</i </a href=</span 
  77. /*.split(‘/’)[0]*/
  78. } else if (r = e.match(/Chrome([d]*)/([^s]+)/ig)) {
  79. var r1 = r[0].split(“/”);
  80. outputer = ‘<span class=“ua_chrome”><a href=“http://www.fenqianbang.com/1989.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> 360为您推荐：7U网'</i </a href=</span 
  81. /*.split(‘.’)[0]*/
  82. } else if (r = e.match(/safari/([^s]+)/ig)) {
  83. var r1 = r[0].split(“/”);
  84. outputer = ‘<span class=“ua_apple”><a href=“http://www.fenqianbang.com/sjwz” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> Safari为您推荐：微信投票'</i </a href=</span 
  85. } else if (r = e.match(/Opera[s|/]([^s]+)/ig)) {
  86. var r1 = r[0].split(“/”);
  87. outputer = ‘<span class=“ua_opera”><a href=“http://www.2345.com/?kq503899300” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> Opera'</i </a href=</span 
  88. } else if (r = e.match(/Trident/7.0/gi)) {
  89. outputer = ‘<span class=“ua_ie”><a href=“http://www.fenqianbang.com/315.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> IE 11为您推荐：24趣吧'</i </a href=</span 
  90. } else if (r = e.match(/MSIEs([^s|;]+)/gi)) {
  91. outputer = ‘<span class=“ua_ie”><a href=“http://www.fenqianbang.com/315.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> IE为您推荐：24趣吧'</i </a href=</span 
  92. /*.replace(‘MSIE’, ”).split(‘.’)[0]*/
  93. } else {
  94. outputer = ‘<span class=“ua_other”><a href=“http://www.fenqianbang.com/420.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> Chrome为您推荐：石头村'</i </a href=</span 
  95. }
  96. if (checkMobile()) {
  97. Mobile = ”;
  98. } else {
  99. Mobile = ”;
  100. }
  101. return outputer + “” + Mobile;
  102. }
  104. //显UA结束

我们会看到上面的代码有很多类似这样的代码：

  1. outputer = ‘<span class=“ua_firefox”><a href=“http://www.fenqianbang.com/486.html” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> FireFox为您推荐：聚享游'</i </a href=</span 

把这些代码修改一下：

  1. outputer = ‘<span class=“ua_firefox”><a href=“你的广告连接” target=“_blank” rel=“nofollow”><i class=“fa fa-globe”> FireFox为您推荐：你的项目名称‘</i </a href=</span 

全部修改完保存后，我们再去多说后台添加自定义CSS样式:

点击展开自定义CSS样式代码

  1. /*多说UA开始*/
  2. span.ua{
  3. margin: 0 1px!important;
  4. color:#FFFFFF!important;
  5. /*text-transform: Capitalize!important;
  6. float: right!important;
  7. line-height: 18px!important;*/
  8. }
  9. .ua_other.os_other{
  10. background-color: #ccc!important;
  11. color: #fff;
  12. border: 1px solid #BBB!important;
  13. border-radius: 4px;
  14. }
  15. .ua_other a{
  16. color:#FFFFFF!important;
  17. }
  18. .os_other a{
  19. color:#FFFFFF!important;
  20. }
  21. .ua_ie{
  22. background-color: #428bca!important;
  23. border-color: #357ebd!important;
  24. border-radius: 4px;
  25. padding: 0 5px!important;
  26. }
  27. .ua_ie a{
  28. color:#FFFFFF!important;
  29. }
  30. .ua_firefox{
  31. background-color: #f0ad4e!important;
  32. border-color: #eea236!important;
  33. border-radius: 4px;
  34. padding: 0 5px!important;
  35. }
  36. .ua_firefox a{
  37. color:#FFFFFF!important;
  38. }
  39. .ua_maxthon{
  40. background-color: #7373B9!important;
  41. border-color: #7373B9!important;
  42. border-radius: 4px;
  43. padding: 0 5px!important;
  44. }
  45. .ua_maxthon a{
  46. color:#FFFFFF!important;
  47. }
  48. .ua_ucweb{
  49. background-color: #FF740F!important;
  50. border-color: #d43f3a!important;
  51. border-radius: 4px;
  52. padding: 0 5px!important;
  53. }
  54. .ua_ucweb a{
  55. color:#FFFFFF!important;
  56. }
  57. .ua_sogou{
  58. background-color: #78ACE9!important;
  59. border-color: #4cae4c!important;
  60. border-radius: 4px;
  61. padding: 0 5px!important;
  62. }
  63. .ua_sogou a{
  64. color:#FFFFFF!important;
  65. }
  66. .ua_2345explorer{
  67. background-color: #2478B8!important;
  68. border-color: #4cae4c!important;
  69. border-radius: 4px;
  70. padding: 0 5px!important;
  71. }
  72. .ua_2345explorer a{
  73. color:#FFFFFF!important;
  74. }
  75. .ua_2345chrome{
  76. background-color: #F9D024!important;
  77. border-color: #4cae4c!important;
  78. border-radius: 4px;
  79. padding: 0 5px!important;
  80. }
  81. .ua_2345chrome a{
  82. color:#FFFFFF!important;
  83. }
  84. .ua_mi{
  85. background-color: #FF4A00!important;
  86. border-color: #4cae4c!important;
  87. border-radius: 4px;
  88. padding: 0 5px!important;
  89. }
  90. .ua_mi a{
  91. color:#FFFFFF!important;
  92. }
  93. .ua_lbbrowser{
  94. background-color: #FC9D2E!important;
  95. border-color: #4cae4c!important;
  96. border-radius: 4px;
  97. padding: 0 5px!important;
  98. }
  99. .ua_lbbrowser a{
  100. color:#FFFFFF!important;
  101. }
  102. .ua_chrome{
  103. background-color: #EE6252!important;
  104. border-color: #4cae4c!important;
  105. border-radius: 4px;
  106. padding: 0 5px!important;
  107. }
  108. .ua_chrome a{
  109. color:#FFFFFF!important;
  110. }
  111. .ua_qq{
  112. background-color: #3D88A8!important;
  113. border-color: #4cae4c!important;
  114. border-radius: 4px;
  115. padding: 0 5px!important;
  116. }
  117. .ua_qq a{
  118. color:#FFFFFF!important;
  119. }
  120. .ua_apple{
  121. background-color: #E95620!important;
  122. border-color: #4cae4c!important;
  123. border-radius: 4px;
  124. padding: 0 5px!important;
  125. }
  126. .ua_apple a{
  127. color:#FFFFFF!important;
  128. }
  129. .ua_opera{
  130. background-color: #d9534f!important;
  131. border-color: #d43f3a!important;
  132. border-radius: 4px;
  133. padding: 0 5px!important;
  134. }
  135. .ua_opera a{
  136. color:#FFFFFF!important;
  137. }
  138. .os_vista,.os_2000,.os_windows,.os_xp,.os_7,.os_8,.os_8_1 {
  139. background-color: #39b3d7!important;
  140. border-color: #46b8da!important;
  141. border-radius: 4px;
  142. padding: 0 5px!important;
  143. }
  144. .os_vista a{
  145. color:#FFFFFF!important;
  146. }
  147. .os_2000 a{
  148. color:#FFFFFF!important;
  149. }
  150. .os_windows a{
  151. color:#FFFFFF!important;
  152. }
  153. .os_xp a{
  154. color:#FFFFFF!important;
  155. }
  156. .os_7 a{
  157. color:#FFFFFF!important;
  158. }
  159. .os_8 a{
  160. color:#FFFFFF!important;
  161. }
  162. .os_8_1 a{
  163. color:#FFFFFF!important;
  164. }
  166. .os_android {
  167. background-color: #98C13D!important;
  168. border-color: #01B171!important;
  169. border-radius: 4px;
  170. padding: 0 5px!important;
  171. }
  172. .os_android a{
  173. color:#FFFFFF!important;
  174. }
  175. .os_ubuntu{
  176. background-color: #DD4814!important;
  177. border-color: #01B171!important;
  178. border-radius: 4px;
  179. padding: 0 5px!important;
  180. }
  181. .os_ubuntu a{
  182. color:#FFFFFF!important;
  183. }
  184. .os_linux {
  185. background-color: #3A3A3A!important;
  186. border-color: #1F1F1F!important;
  187. border-radius: 4px;
  188. padding: 0 5px!important;
  189. }
  190. .os_linux a{
  191. color:#FFFFFF!important;
  192. }
  193. .os_mac{
  194. background-color: #666666!important;
  195. border-color: #1F1F1F!important;
  196. border-radius: 4px;
  197. padding: 0 5px!important;
  198. }
  199. .os_mac a{
  200. color:#FFFFFF!important;
  201. }
  202. .os_unix{
  203. background-color: #006600!important;
  204. border-color: #1F1F1F!important;
  205. border-radius: 4px;
  206. padding: 0 5px!important;
  207. }
  208. .os_unix a{
  209. color:#FFFFFF!important;
  210. }
  211. .os_nokia{
  212. background-color: #014485!important;
  213. border-color: #1F1F1F!important;
  214. border-radius: 4px;
  215. padding: 0 5px!important;
  216. }
  217. .os_nokia a{
  218. color:#FFFFFF!important;
  219. }
  220. .sskadmin{
  221. background-color: #00a67c!important;
  222. border-color: #01B171!important;
  223. border-radius: 4px;
  224. padding: 0 5px!important;
  225. }
  226. /*多说UA结束*/

以上步骤全部完成后，你就能让不同的浏览器为你推广不同的项目了。

Published by cloud