Доброго часу доби, шановні читачі. Ось уже кілька місяців хочу поділитися з вами красивим оформленням кнопок соціальних мереж. Ще влітку, перейшовши на персональний домен, я задумала поміняти дизайн блогу, під який шукала красиве рішення кнопок додавання в соціальні мережі. Все-таки, ОднаКнопка, яка у мене встановлена ​​в кінці статті виглядає непоказно, а то, що під нею, кнопки Addthis і Мій світ взагалі нікуди не годяться. Дизайн міняти передумала, а ось кнопочки давно хотіла встановити.

Давайте для початку трохи визначимося, що ми називаємо соціальною мережею.
Сайти, які наповнюються зареєстрованими користувачами, учасниками цього сайту і називаються соціальними мережами. Ми звикли називати соціальною мережею Мій Світ, Вконтакте, Одноклассники та інші. Все це сайти, які наповнюються учасниками. Користувачі заводять в них свої сторінки, щоденники, пишуть на стінах один одного (якщо це є), діляться посиланнями на цікаві ресурси. У кожної соціальної мережі є свої кнопки, які можна встановлювати в своєму блозі або на сайті.

Я вже писала у себе в блозі, чому важливо мати подібні кнопки.

Установка кнопок закладок, соціальних мереж відноситься до внутрішньої соціальної оптимізації.

Ми намагаємося зробити наш блог максимально дружнім читачеві. Намагаємося надати йому просте і швидке рішення поділитися цікавими матеріалами в тій соціальній мережі, в якій він найбільше спілкується, причому так, щоб він не пішов з нашого блогу. Звичайно, ми переслідуємо і свою мету. За допомогою таких кнопок по мережі поширюються посилання на наш блог, а це значить, що за цими посиланнями до нас приходять читачі, збільшується відвідуваність, збільшується кількість постійних читачів. Чи не до цього ми прагнемо?

Те, що не так давно було запропоновано розробниками блогер мені подобається.

Просто, зі смаком, лаконічно, але погодьтеся, що цього дуже мало. Дані кнопки зроблені під англомовний інтернет, у нас же, поряд з цими соціальними мережами, користуються навіть більшим успіхом наші, російськомовні мережі. На жаль, в рунеті немає хороших повноцінних рішень для інтеграції кнопок соціальних мереж в блоги на Blogger Blogspot. Для WordPress, наприклад, чого тільки не придумали, а от нашу улюблену платформу обходять стороною. А так хочеться, щоб наші блоги гідно стояли в одному ряду з блогами на WordPress. Та й умільців чомусь дуже мало, хто міг би взяти і зробити це. А даремно, це мало б дуже великий успіх. Тому що навіть те, що я сьогодні вам запропоную, не є ідеальним рішенням.

Рішення я знайшла в одному блозі і в кінці цієї статті дам посилання, а так поясню, чому я вирішила написати свою статтю. Справа в тому, що я допрацювала той код під свій смак, внесла деякі зміни, про які і згадаю в кінці. А ви вже самі вирішите, користуватися моїм рішенням, або тим, яке запропоновано в тому блозі. Але перейду до справи.

Ось як можуть виглядати кнопки на вашому блозі.

Чому "можуть"? Тому що ви можете самі змінювати зовнішній вигляд кнопок, зробити під свій смак, під свій дизайн блогу. Вони можуть бути іншого кольору, форми, в іншому порядку. Я постараюся максимально докладно все описати, щоб ви могли самі міняти їх на свій розсуд.

Почну з того, що для кнопок Twitter і Blogger я взяла код від розробників blogger, тому, щоб вони працювали, необхідно включити у себе в блозі їх показ.

Йдемо в Інструменти блогу, на вкладку Дизайн - Елементи сторінки - Повідомлення блогу - Змінити. І ставимо галочку Показувати копки для публікації. Але нам не потрібно, щоб ці кнопки бачили читачі, адже ми будемо використовувати власні кнопки. Тому йдемо на вкладку Змінити HTML. Ставимо галочку Розширити шаблони віджета і знаходимо код:

<Div class = 'post-share-buttons'>
<B: include data = 'post' name = 'shareButtons' />
</ Div>

Цей код необхідно закомментировать, для цього обрамляемо його ось таким чином

<! - <div class = 'post-share-buttons'>
<B: include data = 'post' name = 'shareButtons' />
</ div> ->

Будь-код в шаблоні можна знайти за допомогою пошуку, викликається натисканням клавіш Ctrl + F.

Краще ці рядки закомментировать, ніж використовувати в стилях шаблону display: none. Якщо раптом ви не знайшли ці рядки в своєму шаблоні, то чи не мучтеся, а подивіться, відображаються ці кнопки в самому блозі. Скоріш за все ні. А значить, у вас все готово. Справа в тому, що коли розробники впровадили свої кнопки, не у всіх шаблонах вони відображалися, а щоб почали відображатися, потрібно було додати в шаблон саме той код, який ми перед цим закоментувавши. Якщо все ж кнопки в блозі є, а ви не можете їх знайти в шаблоні, то будьте уважні і пошукайте ще раз.

З цим впоралися. Я вирішила не викладати весь код кнопок, а зробила ось такий файл . Відкриваємо його. Це звичайний блокнот. Дивимося. Так виглядає код повністю з моїми коментарями. Давайте розберемо докладніше, як будується код кожної кнопки. Це дуже просто. Вам тільки потрібно розуміти, який код має посилання і зображення на мові HTML

<a class='shareme' expr:href='адрес соціальної мережі і код добавленія'> <img src = 'http: // адреса картинки' /> </a>

Найголовніше зрозуміти, що кожна кнопка являє з себе картинку <img src = 'http: // адреса картинки' />, яка знаходиться всередині посилання <a href='http://...'> тут код картинки </a>.
Я спеціально виділила квітами для більшої наочності. Те, що синє - це посилання, то, що всередині синього зелене - це код картинки.

Якщо ви вперше стикаєтеся з кодом, то рекомендую ознайомитися з цією статтею .

У файлі я спеціально зробила коментарі, які показують, початок коду кожної кнопки, для того, щоб ви могли переставити кнопки місцями, просто вирізавши та вставивши код в інше місце.

Особливу увагу звертаю на код кнопки додавання в закладки. У мене це остання кнопка. Покажу його тут

<! - AddThis ->
<a class='addthis_button' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url'>
<Img alt = 'в закладки' src = 'http: //lh6.ggpht.com/_G92voTj-yF0/TFXt9xlZLrI/AAAAAAAAAbI/p2KDApn2m0E/addthis.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#username=amateurbloger' type = 'text / javascript' />

Справа в тому, що я вирішила не відмовлятися від кнопки Addthis, яка стояла в блозі до цього моменту, і знайшла рішення, як змінити її зовнішній вигляд. Ви можете не використовувати цю кнопку, видаливши її з коду у файлі. А можете зареєструватися на їхньому сайті, підключити статистику і отримати код кнопки.

Для цього йдемо на їх сайт , Вибираємо найпростішу кнопку, погоджуємося зареєструватися, щоб отримувати статистику і тиснемо на велику помаранчеву кнопку.

Перш, ніж ви отримаєте код кнопки, вам потрібно буде внести якісь дані, підтвердити реєстрацію через електронну пошту, і в підсумку ви отримаєте, приблизно такий код:

<! - AddThis Button BEGIN ->
<Div class = "addthis_toolbox addthis_default_style">
<a href=http://www.addthis.com/bookmark.php?v=250&amp;username= тут буде ваш логін class="addthis_button_compact"> Share </a>
</ Div>
<Script type = "text / javascript"> var addthis_config = { "data_track_clickback": true}; </ script>
<Script type = "text / javascript" src = "// s7.addthis.com/js/250/addthis_widget.js#username= тут буде ваш логін"> </ script>
<! - AddThis Button END ->

З цього коду видаляємо все непотрібне, і отримуємо ось такий варіант:

<a href=http://www.addthis.com/bookmark.php?v=250&amp;username= тут буде ваш логін class="addthis_button_compact"> Share </a>
<Script type = "text / javascript"> var addthis_config = { "data_track_clickback": true}; </ script>
<Script type = "text / javascript" src = "// s7.addthis.com/js/250/addthis_widget.js#username= тут буде ваш логін"> </ script>

А замість слова Share вставляємо код картинки. Виходить, як в моєму коді вище.

Перш, ніж ми встановимо код наших кнопок в блозі, необхідно відразу визначити стиль відображення кнопок, щоб відразу після вставки вони органічно виглядали на сторінках блогу. Тут мене чекало невелике розчарування. Справа в тому, що в деяких шаблонах з дизайнера шаблонів за замовчуванням у картинок прописана рамка в один піксель. Ось як негарно це виходить, бачите маленькі білі куточки у кожної кнопки:

Мені довелося колупати шаблон, щоб повністю позбавити від подібних рамок. Якщо у вас шаблон з тієї ж серії, що і у мене, і ви готові позбутися від псує враження рамки, то знаходимо цей код:

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 5px;
background: #fff;
-moz-box-shadow: 1px 1px 5px rgba (0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba (0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba (0, 0, 0, .5);
}

І видаляємо той шматок, який я виділила сірим курсивом. Якщо не хочете видаляти, можете просто закомментировать, помістивши його всередину цієї конструкції / * код, який потрібно закомментировать * /. Зверніть увагу, що закриває дужка} повинна залишитися в незмінному вигляді.

Після цього вже можна і внести стиль для кнопок. Знаходимо код:

]]> </ b: skin>

і перед ним вставляємо цей:

.sharebuttons a img {
border: none;
opacity: 0.5;
}
.sharebuttons a: hover img {
border: none;
opacity: 1.0;
}
.sharebuttons img {
padding: 0;
margin: 0;
}

В принципі, цей код не обов'язковий і кнопки будуть відмінно функціонувати без нього. Перший блок надає всіх кнопок напівпрозорий вигляд, а другий блок, навпаки, робить кнопки яскравими при наведенні на них курсора миші. Якщо вам це не подобається, можете видалити або переробити на свій смак. Останній код просто повідомляє, що у картинок кнопок немає полів. У всіх шаблони різні, і можливо, вам знадобитися вказати якісь поля (вказуються в пікселях, наприклад margin: 5px;). В цій статті я давала посилання на підручники, за якими ви можете отримати мінімальні знання по HTML і CSS.

Ну і тепер найголовніше, куди вставляти весь код кнопок в шаблон. На мій погляд, саме ідеальне місце - це, природно, в кінці кожної статті. Відкриваємо вкладку Дизайн-Змінити HTML і знаходимо цей код:

<Div class = 'post-body entry-content'>
<Data: post.body />

Відразу після нього можете вставити весь код, який знаходиться в файлі. Природно, слова "Сподобалася стаття? Поділіться нею з друзями" можете поміняти на свої, а так само вказати свій стиль для них, щоб вони візуально виділялися поруч зі стандартним шрифтом вашої статті. Якісь рекомендації давати не має сенсу, тому що у всіх шаблони різні, але це може бути приблизно так:

.sharebuttons {
font: 20 px Comic Sans MS, Comic Sans MS, cursive;
color: # B01D1D;
}

Параметр font задає розмір і тип шрифту. Найпоширеніші шрифти можете подивитися тут . А color задає колір шрифту, підібрати колір ви можете тут .

На цьому розміщення кнопок соціальних мереж можна вважати завершеним. Сподіваюся, я вас не заплутала. Будуть питання, питайте в коментарях. Код перевірений на трьох блогах, на 2-х різних шаблонах. Все повинно працювати.

Тепер повернемося до джерела, де я знайшла цей код. Ось посилання на сторінку . На мій превеликий жаль, зараз блог потихеньку вмирає, тому що не оновлювався з липня місяця.

Трохи розповім, які є відмінності між кодами.

Як я вище помітила, я вирішила для Twitter і Blogger використовувати код розробників. У випадку з твіттером через те, що в тому варіанті не скорочуються посилання, але зате в повідомлення є RT, так що вирішуйте самі. У випадку з Blogger - в запропонованому коді відправляється одна тільки посилання, в "моєму" ж варіанті після заслання йде невеликий шматочок початку статті, що і виглядає приємніше і позбавляє блогера (який вирішив опублікувати у себе посилання) від зайвих рухів тіла.

Так само, практично до всіх кнопок я додала код, завдяки якому посилання відкриваються в невеликому віконці. Що і виглядає акуратніше, і, знову ж таки, наш читач не йде на інший сайт, а залишається в нашому блозі. Чи не вдалося зробити тільки для Twitter, чому то ніяк не хоче виходити, і не зробила для ЖЖ, тому що не мало сенсу. Були й інші дрібниці, про які не має сенсу писати. Так що вибір за вами.

Якщо вам сподобалися мої кнопочки, то ось архів з картинками . Ви можете, як користуватися моїми, так і завантажити ці ж кнопки в свій веб-альбом, а в код помістити адресу своїх картинок. Або взагалі придумати свої особисті кнопки.

PS Доповнення через годину після публікації статті.
Прошу вибачення у всіх читачів, які могли вже встигнути прочитати статтю. Ось так буває, поквапишся і зовсім з голови вилетить. У шаблон необхідно вставити ще один код. Він повністю взятий з того блогу, на який я дала посилання, і необхідний для зручності користувачів Яндекс Блогов Я.ру. Ось цей код:

<Script type = "text / javascript" src = "// ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "A.shareme [href ^ = 'http: //my.ya.ru']") .attr ( "href", function () {
return "http://passport.yandex.ru/passport?mode=auth&amp;retpath=" + escape (this.href);
});
});
</ Script>

Вставити його потрібно перед закриває тегом </ head>.
На цьому все. Хай щастить.