Вважаю, що більшість блогерів знає, для чого потрібні кнопки соціальних мереж (ті, хто не знає, терміново йдуть знайомитися зі статтею ' Правило трьох "І" '). Розробники платформи Blogger (Blogspot) не обійшли увагою це питання, надавши нам панель з найбільш популярними, на їхню думку, кнопками. Але що робити, якщо стандартного набору нам недостатньо, хоча б тому, що в ньому немає кнопок популярних в Росії соціальних мереж? Або, в разі, якщо нам не подобається дизайн цієї панельки? Тут вам допоможе ця стаття! Що відрізняє мій набір кнопок соціальних мереж від стандартного? По-перше, більшу кількість доступних соціальних мереж. По-друге, більш стильне, на мій погляд, оформлення. По-третє, при натисканні на кнопку ви отримаєте спливаюче вікно, підігнане під розмір форми додавання посилань в обрану соц. мережа. І, нарешті, необмежені можливості для публікації своїх комбінації кнопок! Якщо ви опустите погляд в кінець цієї статті (та й будь-який інший статті на цьому ресурсі), то ви побачите в дії той набір соціальних кнопок, що я хочу вам запропонувати.
Для початку я хочу, щоб ви засвоїли основні принципи того, що з себе представляє одна кнопка. По суті, кнопка - це картинка, яку ми бачимо, коли підводимо до неї курсор, плюс посилання на яку ми кліках для переходу. Посилання супроводжується рядом додаткових опцій: чорно-біла підкладка під картинку, яку ми бачимо, поки не навели на неї курсор, і опис розміру вікна, яке відкриється, якщо натиснути на посилання. Досить спрощено, але більшого, думаю, і не треба. Якщо вам, наприклад, не подобаються використовувані мною картинки для кнопок, ти ви без праці їх замініть, володіючи і цим мінімумом знань.
Переваги мого коду кнопок перед аналогами з інших сайтів:
1. Кнопки, де це можливо, віддають максимум інформації: назва статті, посилання на неї, зменшену копію першої картинки в статті, невеликий фрагмент статті.
2. Де це корисно для оформлення, проводиться виділення переданих даних курсивом, жирним шрифтом і ін.
3. Коректна робота в Internet Explorer: текст, набраний кирилицею, передається без спотворень.
Перейдемо від теорії до практики. Насамперед відключаємо стандартний набір кнопок, якщо він у вас задіяний. Для цього йдемо в настройки зовнішнього вигляду блогу (Дизайн-> Елементи сторінки) і натискаємо в модулі "Повідомлення блогу" посилання "Змінити". У вікні знімаємо галочку з пункту "Показувати кнопки для публікації".
Тепер відкриваємо редактор шаблону (Дизайн-> Змінити HTML), ставимо галочку навпроти "Розширити шаблони віджета", після чого знаходимо цей код:
<Div class = 'post-share-buttons goog-inline-block'> <b: if cond = 'data: post.sharePostUrl'> <b: include data = 'post' name = 'shareButtons' /> </ b : if> </ div> ... і відразу під цим кодом додаємо наступне:
<B: if cond = 'data: blog.pageType == "item"'> <div> <! - Blogger -> <a class = 'shareme' expr: href = '& quot; http: // blogger. com / blog-this.g? u = & quot; + Data: post.url + & quot; & amp; n = & quot; ' expr: name = 'data: post.snippet' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; t = \ & quot; + encodeURIComponent (this.name) , \ & quot; _blank \ & quot;); return false; & quot; ' expr: title = 'data: blog.title + & quot ;: & quot; + Data: post.title 'rel =' nofollow 'style =' background: url (& quot; https: //lh3.googleusercontent.com/-zd86rZgogpY/TzURYbnkfQI/AAAAAAAAAbE/9fpYkwVGFNA/s25/but1bw.png") no-repeat ; font-size: 25px; "> <img alt = 'В Blogger' src = 'https: //lh6.googleusercontent.com/-hoxDpt12RVs/TzURYrLal8I/AAAAAAAAAbM/zG-tKxM6Odk/s25/but1color.png' title = 'Опублікувати в Blogger '/> </a> <! - Twitter -> <a class =' shareme 'expr: href =' & quot; http: //twitter.com/intent/tweet? original_referer = & quot; + Data: post.url + & quot; & amp; url = & quot; + Data: post.url + & quot; & amp; text = & quot; ' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title), \ & quot; _blank \ & quot ;, \ & quot; height = 240, width = 510 \ & quot;); return false; & quot; ' expr: title = 'data: blog.title + & quot ;: & quot; + Data: post.title 'rel =' nofollow 'style =' background: url (& quot; https: //lh4.googleusercontent.com/-YiTfX-3BJSk/TzURY5VnEkI/AAAAAAAAAbY/XfgI7nlwi3c/s25/but2bw.png") no -repeat; font-size: 25px; "> <img alt = 'В Twitter' src = 'https: //lh3.googleusercontent.com/-RE2kB1W5OV0/TzURZBJNQHI/AAAAAAAAAbQ/oCpbf38DKjQ/s25/but2color.png' title = 'Опублікувати в Twitter '/> </a> <! - Живий Журнал -> <a class =' shareme 'expr: href =' & quot; http: //livejournal.com/update.bml? subject = & quot; ' expr: name = 'data: post.url + & quot; & gt; & lt; b & gt; & quot; + Data: post.title + & quot; & lt; / b & gt; & lt; / a & gt; від & lt; b & gt; & quot; + Data: post.author + & quot; & lt; / b & gt; (& Quot; + data: blog.title + & quot;): & lt; i & gt; & quot; + Data: post.snippet + & quot; & lt; / i & gt; & quot; ' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; event = & lt; a href = \ & quot; + encodeURIComponent (this.name), \ & quot; _blank \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh5.googleusercontent.com/-7LyaWP03TPg/TzURaSYqwcI/AAAAAAAAAbw/Z_-_jq_rI_8/s25/but5bw. png & quot;) no-repeat; font-size: 25px; "> <img alt = 'В Живий Журнал' src = 'https: //lh4.googleusercontent.com/-l64jF-dqcvE/TzURavNk_OI/AAAAAAAAAb0/ZKEpghoy6hw/s25/but5color.png' title = ' Опублікувати в ЖЖ '/> </a> <! - ВКонтакте -> <a class =' shareme 'expr: href =' & quot; http: //vk.com/share.php? url = & quot; + Data: post.url + & quot; & amp; image = & quot; + Data: post.thumbnailUrl + & quot; & amp; title = & quot; ' expr: name = 'data: post.snippet' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; description = \ & quot; + encodeURIComponent (this.name) , \ & quot; _blank \ & quot ;, \ & quot; height = 280, width = 480 \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh3.googleusercontent.com/-R6JuHs_66ys/TzURZslznKI/AAAAAAAAAbo/nN7HQg4nqO4/s25/but4bw.png" ) no-repeat; font-size: 25px; "> <img alt = 'у ВКонтакте' src = 'https: //lh6.googleusercontent.com/-Z_lKcxulFwI/TzURZ5LxaXI/AAAAAAAAAbs/Q_6l9HppIdo/s25/but4color.png' title = 'Опублікувати у ВКонтакте '/> </a> <! - Однокласники -> <a class =' shareme 'expr: href =' & quot; http: //odnoklassniki.ru/dk? st.cmd = addShare & amp; st.s = 0 & amp ; st._surl = & quot; + Data: post.url 'expr: onclick =' & quot; window.open (this.href, \ & quot; _blank \ & quot ;, \ & quot; height = 385, width = 600 \ & quot;); return false; & quot; ' rel = 'nofollow' style = 'background: url (& quot; https: //lh3.googleusercontent.com/-3ZggCbbQWqo/TzVaeh8zSCI/AAAAAAAAAdw/9BdzxoWAUTU/s25/but9bw.png") no-repeat; font-size: 25px; "> <img alt = 'В Однокласники' src = 'https: //lh3.googleusercontent.com/-i50nQdPu_KQ/TzVaecZoRcI/AAAAAAAAAds/7K6QEGQxfhc/s25/but9color.png' title = 'Опублікувати в Одноклассниках '/> </a> <! - Я.ру -> <a class =' shareme 'expr: href =' & quot; http: //my.ya.ru/posts_add_link.xml? URL = & quot; + Data: post.url + & quot; & amp; title = & quot; ' expr: name = 'data: post.author + & quot; (& Quot; + data: blog.title + & quot;): & lt; / b & gt; & Lt; i & gt; & quot; + Data: post.snippet + & quot; & lt; / i & gt; & quot; ' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; body = & lt; b & gt; \ & quot; + encodeURIComponent (this.name), \ & quot; _blank \ & quot ;, \ & quot; height = 560, width = 1005 \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh6.googleusercontent.com/-3gnlQVPOQcQ/TzURgEWMOBI/AAAAAAAAAdA/iGxaDkWX9RA/s25/but7bw.png" ) no-repeat; font-size: 25px; "> <img alt = 'В Я.ру' src = 'https: //lh4.googleusercontent.com/-m8LwONvloFU/TzURbjS48aI/AAAAAAAAAcQ/jAT6H-Y3arI/s25/but7color.png' title = 'Опублікувати в Я.ру' /> </a> <! - Мій Світ -> <a class = 'shareme' expr: href = '& quot; http: //connect.mail.ru/share? url = & quot; + Data: post.url + & quot; & amp; imageurl = & quot; + Data: post.thumbnailUrl + & quot; & amp; title = & quot; ' expr: name = 'data: post.snippet' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; description = \ & quot; + encodeURIComponent (this.name) , \ & quot; _blank \ & quot ;, \ & quot; height = 360, width = 537 \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh6.googleusercontent.com/-Q9JTxREWlb8/TzURa9QpEHI/AAAAAAAAAcE/Dm9UdwJznZM/s25/but6bw.png" ) no-repeat; font-size: 25px; "> <img alt = 'В Мой Мир' src = 'https: //lh3.googleusercontent.com/-uL4hMd1Bpyo/TzURa3zi7hI/AAAAAAAAAcI/M5Z47vV9rQg/s25/but6color.png' title = 'Опублікувати в моєму Світі '/> </a> <! - LiveInternet -> <a class =' shareme 'expr: href =' & quot; http: //liveinternet.ru/journal_post.php? action = n_add & amp; cnurl = & quot ; + Data: post.url + & quot; & amp; cntitle = & quot; ' expr: name = 'data: post.url + & quot;] & quot; + Data: post.title + & quot; [/ URL] [/ B] від [B] & quot; + Data: post.author + & quot; [/ B] (& quot; + data: blog.title + & quot;): [I] & quot; + Data: post.snippet + & quot; [/ I] [/ QUOTE] & quot; ' expr: onclick = '& quot; window.open (this.href + encodeURIComponent (this.title) + \ & quot; & amp; cntext = [QUOTE] [B] [URL = \ & quot; + encodeURIComponent (this.name), \ & quot; _blank \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh3.googleusercontent.com/-V1qrtuecAu0/TzURZKi1I2I/AAAAAAAAAbc/fzQLdVuWxCc/s25/but3bw.png" ) no-repeat; font-size: 25px; "> <img alt = 'В LiveInternet' src = 'https: //lh5.googleusercontent.com/-DRj24WA6Cy8/TzURZfiGgwI/AAAAAAAAAb8/u_mNL15otYI/s25/but3color.png' title = 'Опублікувати в LiveInternet '/> </a> <! - Facebook -> <a class =' shareme 'expr: href =' & quot; http: //facebook.com/sharer.php? s = 100 & amp; p [url] = & quot; + Data: post.url + & quot; & amp; p [images] [0] = & quot; + Data: post.thumbnailUrl + & quot; & amp; p [title] = & quot; ' expr: name = 'data: post.snippet' expr: onclick = '& quot; window.open (this.href.replace (/ \ / s72-c \ //, / s125-c /) + encodeURIComponent (this.title ) + \ & quot; & amp; p [summary] = \ & quot; + encodeURIComponent (this.name), \ & quot; _blank \ & quot ;, \ & quot; height = 352, width = 640 \ & quot;); return false; & quot; ' expr: title = 'data: post.title' rel = 'nofollow' style = 'background: url (& quot; https: //lh3.googleusercontent.com/-AMe2KniFK00/TzURbnpPaeI/AAAAAAAAAcM/ayEkODi6g00/s25/but8bw.png" ) no-repeat; font-size: 25px; "> <img alt = 'В Facebook' src = 'https: //lh5.googleusercontent.com/-Xizbo1KGk8w/TzUReaC-S5I/AAAAAAAAAc0/dqbtSKosFd8/s25/but8color.png' title = 'Опублікувати в Facebook '/> </a> <! - AddThis -> <a class =' addthis_button shareme 'expr: addthis: title =' data: post.title 'expr: addthis: url =' data: post.url 'style =' background: url (& quot; https: //lh4.googleusercontent.com/-HCew6spKMOs/TzURYeptFVI/AAAAAAAAAbA/Hdu1V0A07lk/s25/but0bw.png") no-repeat; font-size: 25px; "> <img alt = 'В закладки' src = 'https: //lh4.googleusercontent.com/-lkoVJfokYVQ/TzURYXhp6gI/AAAAAAAAAbI/hubZqYIjrBs/s25/but0color.png'/> </a> <script type = 'text / javascript'> var addthis_config = {& quot; data_track_clickback & quot;: true}; </ script> <script src = 'http: //s7.addthis.com/js/250/addthis_widget.js#pubid = XX-XXXXXXXXXXXXXXXX 'type =' text / javascript '/> </ div> </ b: if> * Я зробив так, щоб соціальні кнопки не відображалися на головній сторінці, а були доступні тільки на сторінках самих статей. Якщо ви хочете, щоб кнопки соціальних мереж відображалися і на головній сторінці, то видаліть з коду першу і останню рядки. Тут вони підсвічені.
Увага! Кнопка AddThis персоніфікована.
Перш, ніж ви отримаєте остаточний код кнопки, необхідно буде внести деякі дані і підтвердити реєстрацію через електронну пошту. Для цього йдемо на сайт сервісу AddThis , Вибираємо кнопку для Website і перший стиль в списку стилів, погоджуємося зареєструватися, щоб отримувати статистику і тиснемо на велику помаранчеву кнопку. В отриманому коді шукаємо "# pubid =". Ідентифікаційний код, що йде після знака рівності і до закриває лапки, копіюємо в аналогічне місце в нашому коді для кнопки AddThis, замінивши їм ікси.
Залишився один невеличкий нюанс: додаємо стилі для відображення кнопок, щоб вони змінювали свій колір і розмір при наведенні. Для цього знаходимо в шаблоні рядок "/ * Posts" і вставляємо під нею наступний код:
/ * Posts ----------------------------------------------- * / .shareme img {opacity: 0; filter: alpha (opacity = 0); vertical-align: text-top; } .Shareme img: hover {opacity: 1; filter: alpha (opacity = 100); vertical-align: text-top; -moz-transform: scale (1.1); -o-transform: scale (1.1); -webkit-transform: scale (1.1); -ms-transform: scale (1.1); }
Ось, власне, і все. Якщо у вас виникли по ходу прочитання якісь питання - не соромтеся. Буду радий відповісти :-)Але що робити, якщо стандартного набору нам недостатньо, хоча б тому, що в ньому немає кнопок популярних в Росії соціальних мереж?
Або, в разі, якщо нам не подобається дизайн цієї панельки?
Що відрізняє мій набір кнопок соціальних мереж від стандартного?
G?
Com/intent/tweet?
Bml?
Php?
Ru/dk?
Xml?
Ru/share?
