Разбирая залежи накопленных годами материалов, обнаружил скрипт простых кнопок для отправки любых страниц в популярные социальные сети. Сделан он по мотивам кодов, опубликованных на Хабре.
Скрипт генерирует 8 простейших социальных кнопок — Google+, LinkedIn, Facebook, Twitter, ВКонтакте, LiveJournal, Одноклассники и Mail.ru. Код сденан на JS (jQuery), кнопки можно стилизовать через CSS. Используется скрипт очень легко:
нужно добавить код скрипта в footer.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 |
<script> Share = { go: function(_element, _options) { var self = Share, options = $.extend( { type: 'vk', url: location.href, title: param('title'), image: param('image'), text: param('description'), }, $(_element).data(), _options ); if (self.popup(link = self[options.type](options)) === null) { if ( $(_element).is('a') ) { $(_element).prop('href', link); return true; } else { location.href = link; return false; } } else { return false; } function param(name) { return $('meta[property=og\\:' + name + ']').attr('content'); } }, //LinkedIn li: function(_options) { var options = $.extend({ url: location.href, title: document.title, text: '' }, _options); return 'http://www.linkedin.com/shareArticle?mini=true' + '&url=' + encodeURIComponent(options.url) + '&title=' + encodeURIComponent(options.title) + '&summary=' + encodeURIComponent(options.text); }, // Google+ gg: function (_options) { var options = $.extend({ url: location.href }, _options); return 'https://plus.google.com/share?url=' + encodeURIComponent(options.url); }, // ВКонтакте vk: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: '', text: '', }, _options); return 'http://vkontakte.ru/share.php?' + 'url=' + encodeURIComponent(options.url) + '&title=' + encodeURIComponent(options.title) + '&description=' + encodeURIComponent(options.text) + '&image=' + encodeURIComponent(options.image) + '&noparse=true'; }, // Одноклассники ok: function(_options) { var options = $.extend({ url: location.href, text: '', }, _options); return 'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1' + '&st.comments=' + encodeURIComponent(options.text) + '&st._surl=' + encodeURIComponent(options.url); }, // Facebook fb: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: '', text: '', }, _options); return 'http://www.facebook.com/sharer.php?s=100' + '&p[title]=' + encodeURIComponent(options.title) + '&p[summary]=' + encodeURIComponent(options.text) + '&p[url]=' + encodeURIComponent(options.url) + '&p[images][0]=' + encodeURIComponent(options.image); }, // LiveJournal lj: function(_options) { var options = $.extend({ url: location.href, title: document.title, text: '', }, _options); return 'http://livejournal.com/update.bml?' + 'subject=' + encodeURIComponent(options.title) + '&event=' + encodeURIComponent(options.text + '<br/><a href="' + options.url + '">' + options.title + '</a>') + '&transform=1'; }, // Twitter tw: function(_options) { var options = $.extend({ url: location.href, count_url: location.href, title: document.title, }, _options); return 'http://twitter.com/share?' + 'text=' + encodeURIComponent(options.title) + '&url=' + encodeURIComponent(options.url) + '&counturl=' + encodeURIComponent(options.count_url); }, // Mail.Ru mr: function(_options) { var options = $.extend({ url: location.href, title: document.title, image: '', text: '', }, _options); return 'http://connect.mail.ru/share?' + 'url=' + encodeURIComponent(options.url) + '&title=' + encodeURIComponent(options.title) + '&description=' + encodeURIComponent(options.text) + '&imageurl=' + encodeURIComponent(options.image); }, // Popup popup: function(url) { return window.open(url,'','toolbar=0,status=0,scrollbars=1,width=320,height=480'); } } $(document).on('click', '.social_share', function(){ Share.go(this); }); </script> |
и добавить вывод кнопок в том месте, где вы их хотите видеть (например, в single.php):
1 2 3 4 5 6 7 8 9 10 |
<div class="social_div"> <button class="social_share social_share_gg" data-type="gg">Google+</button> <button class="social_share social_share_li" data-type="li">LinkedIn</button> <button class="social_share social_share_fb" data-type="fb">Facebook</button> <button class="social_share social_share_tw" data-type="tw">Twitter</button> <button class="social_share social_share_vk" data-type="vk">ВКонтакте</button> <button class="social_share social_share_lj" data-type="lj">LiveJournal</button> <button class="social_share social_share_ok" data-type="ok">Одноклассники</button> <button class="social_share social_share_mr" data-type="mr">Mail.Ru</button> </div> |
Оформление кнопок задается в style.css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* оформление блока с кнопками */ .social_div { } /* оформление любой кнопки */ .social_share { } /* оформление кнопки Google+ */ .social_share_gg { } /* оформление кнопки LinkedIn */ .social_share_li { } /* оформление кнопки Facebook */ .social_share_fb { } /* оформление кнопки Twitter */ .social_share_tw { } /* оформление кнопки ВКонтакте */ .social_share_vk { } /* оформление кнопки LiveJournal */ .social_share_lj { } /* оформление кнопки Одноклассники */ .social_share_ok { } /* оформление кнопки Mail.Ru */ .social_share_mr { } |
Скрипт хорош тем, что не грузит сайт сторонними скриптами, тянущими откуда-то из вне кучу всего не нужного. Он работает через jQuery. Скрипт подтягивает название страницы, ее текстовое содержимое, и картинку из мета-тегов OpenGraph, поэтому нужно позаботиться, чтобы таковые уже присутствовали (например, установить плагин, создающий эти мета-теги, или вручную прописать код, создающий их).
|
|