Соціальні кнопки для сайту без використання wordpress плагінів

1) Збір коду кнопки мережі Google +.

Синьої рамочкою я виділив місця, де потрібно поміняти «Annotation», спочатку варто «inline», потрібно змінити на «bubble». Ну і природно мову в розділі «Language» на Русский, виберіть зі списку. Далі, код який виділений в зелену рамочку слід зберегти, ми його будемо використовувати далі ...

[Php]

Натискаємо зберегти, а нижче залишаємо все як завжди. Як бачите розмір кнопки за замовчуванням встановлений як 22 px, ви можете змінити його під себе, наприклад якщо хочете що б кнопки були трохи більше, але для цього вам можливо доведеться трохи поритися в коді. Причому, ви повинні вибрати варіант «Кнопка з мініатюрним лічильником», інакше одна з кнопок в кінцевому варіанті з'їде.

Для виведення кнопки (друга частина коду).

3) Кнопка «Мені подобається» від Facebook.

По-перше потрібно видалити все, що написано в поле «URL to Like» - це поле показує яку сторінку потрібно вказувати при лайці, або репоста. Якщо цієї посилання не буде, то видаватися буде сторінка на якій знаходиться кнопка.
В поле «Layot» виставляємо «Button_count» - ви відразу помітите, як змінила вигляд сама кнопка нижче на прикладі.
В поле «Width» - вказується ширина кнопки, для більш кращого відображення рекомендую встановити 450.
Натиснути «Get Code», тоді вас перекине на сторінку, де ви зможете забрати потрібний код.

Як бачите тут код так само ділиться на дві частини, першу частину, яку я виділив зелену рамку ви повинні вставити в шапку сайту після відкривається тега , точно так само як ми робили з кнопкою від Вконтакте, тільки після тега .

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

4) Кнопка «Retweet» від Twitter.

Ну куди вже без рідного Twitter. Для того, щоб забрати свою кнопку retweet необхідно знову ж перейти на сторінку. де так само ввести критерії. Вибираємо перший варіант кнопки під назвою «Share a Link», після чого знизу з'являються додаткові налаштування.

В принципі все, ми отримуємо код, який нам потрібно розмістити туди, де повинні відображатися кнопки. У мене це виглядає приблизно так:

[Php]

Кнопка від Гугл +

Кнопка від вКонтакте

Кнопка від Твіттера

Кнопка від Фейсбуку

[/ Php]

Зрозуміло як потрібно зробити? Код кнопки поставити за місце слів «Кнопка від Гугл, ВК, Twitter» ... Замініть цей тест. Саме код кнопок, а не той код, який ви повинні були розмістити після тега або

Після чого, щоб додати кнопок деякі ефекти, уточнити їх розташування і так далі, в style.css в самий низ додаємо наступний код:

opacity: 0.7;
margin-bottom: 20px;
margin-left: 55px;
margin-top: 45px;
-moz-transition: opacity 0.3s 0.05s ease;
-o-transition: opacity 0.3s 0.05s ease;
-webkit-transition: opacity 0.3s 0.05s ease;

#sochknop: hover margin-top: 45px;
opacity: 1;
>

#sochknop span -o-margin-top: 40px;
padding: 0px 0px;

line-height: 10px;
float: left;
> [/ Php]

До швидких зустрічей друзі, чекаємо наступних статей ;-) ...