Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

→ Добавляем кнопки социальных сетей в Drupal 7. Вариант без внешних скриптов.

Опубликовано: 24 апреля 2012

Социальные кнопки могут быть полезны для посетителей вашего сайта или блога. Нажимая на эти кнопки, они смогут сохранить ссылки на интересные материалы в своих аккаунтах в социальных сетях.

Размещение таких кнопок очень полезно. Ведь после нажатия кнопки «поделиться», ссылка с кратким описанием сайта и может даже картинкой появится на стене у того кто её нажал, а там её могут увидеть и перейти другие пользователи социальной сети. В этой статье рассмотрим три самые популярные соц. сети: Вконтакте, Twitter и Facebook.

Каждая из них предоставляет нужные кнопки для установки на сторонних сайтах.

Для «В Контакте» код можно найти здесь.

Для Твиттера – ссылка.

Для Facebook – здесь.

Однако, как видно, каждая такая кнопка подгружает свой js-файл со скриптом. Это замедляет время загрузки страницы в целом. Кроме того, используя готовый код, вебмастер никак не сможет оформить кнопки социальных сетей по своему желанию – всё оформление находится вне сайта.

К счастью, многие социальные сети позволяют использовать простые HTML гиперссылки с определёнными параметрами для публикации закладок. Используя данный метод, мы можем оформить кнопки, по своему желанию.

Ниже представлен пример создания блока из трёх социальных кнопок, по клику на которые открывается новое окно браузера (в центре экрана), где у посетителя запрашивается подтверждение на создание закладки. После публикации, окно закрывается.

Весь этот блок, мы так же интегрируем с темой Drupal 7.

Для начала небольшая справка:

1. В контакте, «поделиться» принимает адрес вида:



http://vkontakte.ru/share.php?url=http://адресСайта.ru/адресСтраницы

При этом, в качестве заголовка берётся содержание тега <title>

А так же, берётся какая-то похожая на логотип картинка. Если нам нужно указать картинку точно, то необходимо вставить в заголовок страницы (внутрь контейнера <head></head>) такой тег:



<link rel="image_src" href="адресКартинки" />

2. Социальная кнопка от твиттера - «твиттнуть» позволяет опубликовать твитт с заранее заготовленным текстом и ссылкой. URL выглядит следующим образом:



https://twitter.com/share?text="ТекстТвитта&url=http://АдресСайта.ru/адресСтраницы

При этом текст твитта должен быть url-кодирован, иначе могут быть ошибки. При нажатии на эту ссылку будет предложено создать твитт содержащий текст и ссылку.

3. Социальная закладка Facebok похожа на В контакте и выглядит так:



http://www.facebook.com/sharer.php?u=http://адресСайта.ru/страница

Итак, пусть мы хотим оформить блок кнопок как-то так:

При этом HTML - размека довольно проста. Весь HTML состоит из трёх ссылок:



<a href="#" class="soc-icon"><img src="/images/facebook.png" width="30" height="30"></a>
<a href="#" class="soc-icon”><img src="/images/twitter.png" width="30" height="30"></a>
<a href="#" class="soc-icon"><img src="/images/vk.png" width="30" height="30"></a>

Используя несложный CSS, мы оформим эффект подведения курсора к кнопкам.



.soc-icon{
	display:block;
	float:left;
	opacity:0.8;
	margin:2px;}
.soc-icon:hover{
	opacity:1;}

Теперь займёмся функционалом.

В Drupal 7, наши кнопки можно вставить в файл node.tpl.php вашей темы в нужное место. Этот файл указывает как будет выводится именно материал сайта.

Из этого файла мы имеем доступ к переменным $node_url и $title, которые выводят url путь до статьи (от корня сайта, без домена), и заголовок статьи соответственно. Мы можем собрать из этих переменных строки для гиперссылок наших социальных кнопок. Сохраним каждую в переменной. Ниже php-код:



<?php
$urlvk = 'http://vk.com/share.php?url=' . 'http://' . $_SERVER["HTTP_HOST"] . $node_url;
$urlfb = 'http://www.facebook.com/sharer.php?u=' . 'http://' . $_SERVER["HTTP_HOST"] .$node_url;
$urltw = 'https://twitter.com/share?text=' . urlencode($title) . '&url=http://' . $_SERVER["HTTP_HOST"] . $node_url;
?>

Здесь мы используем переменную окружения $_SERVER["HTTP_HOST"], чтобы получить имя домена нашего сайта.

URL – адреса есть, HTML разметка тоже есть. Можно просто подставить адреса в атрибут href ссылок, и всё уже будет работать:



<a href="<?=$urlvk?>" class="soc-icon"><img src="/sites/all/themes/heavenweb/images/vk.png" width="20" height="20"></a>
<a href="<?=$urltw?>" class="soc-icon"><img src="/sites/all/themes/heavenweb/images/twitter.png" width="20" height="20"></a>
<a href="<?=$urlfb?>" class="soc-icon"><img src="/sites/all/themes/heavenweb/images/facebook.png" width="20" height="20"></a>

Но есть одна проблема: нам нужно, чтобы посетитель остался на сайте, а не перешёл сайт социальной сети.

Сделаем так, чтобы по клику открывалось новое небольшое окно браузера, и туда загружалась страница, а перехода по ссылке не было.

Так как Drupal поддерживает jQuery, напишем обработчик клика по ссылке с CSS-классом «soc-icon». Нажатие вызовет функцию socialopen, которая откроет новое окно и загрузит туда адрес из атрибута «href» ссылки. Весь JavaScript код ниже:


function socialopen(url){
var winpar='width=500,height=400,left=' + ((window.innerWidth - 500)/2) + ',top=' + ((window.innerHeight - 400)/2) ;
window.open(url,'tvkw',winpar);
}
(function ($) {	
	$(document).ready(function(e) {
		$('a.soc-icon').click(function(){
		var url = $(this).attr('href');	
			socialopen(url);
		return false;
		})
	});
})(jQuery);

Функция socialopen вызывает JavaScript метод window.open(), который и открывает новое окно. В этот метод мы передаём параметры этого окна. Обратите внимание, как мы здесь высчитали положение окна (параметры left и top). Благодаря такому методу, новое окно появляется посередине экрана.

При интеграции социальных кнопок в тему Drupal 7, JavaScript код лучше поместить в js файл, и подключить его к теме (в крайнем случае можно вставить код в html.tpl.php, page.tpl.php или node.tpl.php, с помощью тега <script>). CSS код тоже удобно вставить в файл стилей с расширением css, подключённый к теме. Ну а HTML код вставляется в node.tpl.php в нужное место.

Вы можете посмотреть как работает этот метод на этом блоге, А исходники скачать по ссылке ниже.

Скачать исходник

Поделиться:
Комментарии

play online casino casino games gsn casino games best online casinos | https://onlinecasinokle.com/ - real money casino https://onlinecasinokle.com/ - bovada casino

пт, 2018-08-17 15:27

online casino games empire city online casino casino blackjack casino online slots | https://onlinecasinokle.com/ - play casino https://onlinecasinokle.com/ - online casinos for us players

пт, 2018-08-17 16:04

online casino slots zone online casino online casino games casino bonus | https://onlinecasinogamess.us.org/ - zone online casino https://onlinecasinogamess.us.org/ - casino real money

пт, 2018-08-17 16:34

foxwoods online casino online casino sites online casino real money online casino gambling | https://onlinecasinokle.com/ - casino online slots https://onlinecasinokle.com/ - best online casinos

пт, 2018-08-17 16:42

foxwoods online casino tropicana online casino borgata online casino play online casino | https://casinorealmoneyiplay24.com/ - online casino games https://casinorealmoneyiplay24.com/ - empire city online casino

пт, 2018-08-17 17:00

best online casino gsn casino games betfair online casino free online casino | https://onlinecasinokle.com/ - free online casino https://onlinecasinokle.com/ - slots for real money

пт, 2018-08-17 17:17

best online casinos online casinos online casinos online casino gambling | https://onlinecasinogamess.us.org/ - casino bonus https://onlinecasinogamess.us.org/ - online casino sites

пт, 2018-08-17 17:43

online casino bonus casino real money foxwoods online casino borgata online casino | https://casinorealmoneyiplay24.com/ - parx online casino https://casinorealmoneyiplay24.com/ - real money casino

пт, 2018-08-17 18:04

zone online casino online casino real money borgata online casino betfair online casino | https://casinorealmoneyiplay24.com/ - parx online casino https://casinorealmoneyiplay24.com/ - free online casino slots

пт, 2018-08-17 19:13

zone online casino online casino bonus play online casino parx online casino | https://onlinecasinogamess.us.org/ - borgata online casino https://onlinecasinogamess.us.org/ - tropicana online casino

пт, 2018-08-17 19:25

foxwoods online casino play casino casino bonus zone online casino | https://casinorealmoneyiplay24.com/ - betfair online casino https://casinorealmoneyiplay24.com/ - best online casinos

пт, 2018-08-17 20:12

online casino gsn casino online casino gambling real casino | https://onlinecasinokle.com/ - free online casino slots https://onlinecasinokle.com/ - online gambling

пт, 2018-08-17 21:45

online gambling best online casino online casinos for us players betfair online casino | https://casinorealmoneyiplay24.com/ - foxwoods online casino https://casinorealmoneyiplay24.com/ - online casinos

пт, 2018-08-17 22:08

slots for real money gsn casino slots play online casino zone online casino | https://onlinecasinokle.com/ - online gambling https://onlinecasinokle.com/ - casino slots

пт, 2018-08-17 22:16

betfair online casino betfair online casino casino real money online casino gambling | https://bestonlinecasinogames.us.org/ - online casinos https://bestonlinecasinogames.us.org/ - foxwoods online casino

пт, 2018-08-17 22:48

tropicana online casino best online casino slots for real money online casinos for us players | https://casinorealmoneyigames.com/ - caesars online casino https://casinorealmoneyigames.com/ - best online casinos

пт, 2018-08-17 22:49

online casino real casino online casinos for us players online casino bonus | http://casinorealmoney888bit.com/ - borgata online casino http://casinorealmoney888bit.com/ - empire city online casino

пт, 2018-08-17 23:28

foxwoods online casino parx online casino online casino gambling empire city online casino | https://casinorealmoneyigames.com/ - casino play https://casinorealmoneyigames.com/ - empire city online casino

пт, 2018-08-17 23:29

borgata online casino mgm online casino foxwoods online casino slots for real money | https://bestonlinecasinogames.us.org/ - zone online casino https://bestonlinecasinogames.us.org/ - caesars online casino

пт, 2018-08-17 23:29

tropicana online casino play casino real money casino free online casino | https://casinorealmoneyigames.com/ - casino bonus https://casinorealmoneyigames.com/ - foxwoods online casino

сб, 2018-08-18 00:08

casino real money online casinos online casino slots gsn casino games | http://casinorealmoney888bit.com/ - online casino real money http://casinorealmoney888bit.com/ - casino bonus

сб, 2018-08-18 00:11

play online casino best online casinos online casino slots casino slots | https://onlinecasinoflow.com/ - casino bonus https://onlinecasinoflow.com/ - casino online slots

сб, 2018-08-18 00:37

betfair online casino foxwoods online casino caesars online casino casino blackjack | https://casinorealmoneyigames.com/ - caesars online casino https://casinorealmoneyigames.com/ - betfair online casino

сб, 2018-08-18 00:46

casino bonus casino bonus online casino gambling bovada casino | http://casinorealmoney888bit.com/ - casino games http://casinorealmoney888bit.com/ - casino play

сб, 2018-08-18 00:50

play casino online casino slots play casino online casino real money | http://casinorealmoney888bit.com/ - gsn casino games http://casinorealmoney888bit.com/ - foxwoods online casino

сб, 2018-08-18 01:28

tropicana online casino borgata online casino zone online casino casino online slots | https://casinorealmoneyigames.com/ - online casino bonus https://casinorealmoneyigames.com/ - real casino

сб, 2018-08-18 01:58

online gambling casino free online casino slots caesars online casino borgata online casino | https://bestonlinecasinogames.us.org/ - play casino https://bestonlinecasinogames.us.org/ - free online casino slots

сб, 2018-08-18 02:02

virgin online casino online casino sites casino blackjack casino online | http://casinorealmoney888bit.com/ - online casinos http://casinorealmoney888bit.com/ - gsn casino slots

сб, 2018-08-18 02:05

tropicana online casino online gambling borgata online casino online gambling | https://casinorealmoneyigames.com/ - online casino bonus https://casinorealmoneyigames.com/ - casino bonus

сб, 2018-08-18 02:32

gsn casino slots online casino games online casino games zone online casino | http://casinorealmoney888bit.com/ - casino games http://casinorealmoney888bit.com/ - tropicana online casino

сб, 2018-08-18 02:45

online gambling online casino real money casino bonus online casino gambling | https://onlinecasinoflow.com/ - real casino https://onlinecasinoflow.com/ - casino blackjack

сб, 2018-08-18 02:46

borgata online casino best online casino real casino real casino | https://casinorealmoneyigames.com/ - casino online slots https://casinorealmoneyigames.com/ - casino games

сб, 2018-08-18 03:06

online casinos for us players parx online casino mgm online casino play online casino | https://bestonlinecasinogames.us.org/ - online casino slots https://bestonlinecasinogames.us.org/ - best online casinos

сб, 2018-08-18 03:13

virgin online casino online casino slots online gambling caesars online casino | http://casinorealmoney888bit.com/ - foxwoods online casino http://casinorealmoney888bit.com/ - bovada casino

сб, 2018-08-18 03:19

play online casino online casinos borgata online casino real casino | https://casinorealmoneyigames.com/ - betfair online casino https://casinorealmoneyigames.com/ - online casinos

сб, 2018-08-18 03:39

real casino slots for real money best online casinos casino slots | https://onlinecasinoflow.com/ - online casino gambling https://onlinecasinoflow.com/ - online casino slots

сб, 2018-08-18 04:42

online gambling online casino slots online casino bonus online casino sites | https://casinorealmoneyigames.com/ - casino blackjack https://casinorealmoneyigames.com/ - online gambling casino

сб, 2018-08-18 04:45

online casino games real money casino best online casino real money casino | https://onlinecasinoflow.com/ - play casino https://onlinecasinoflow.com/ - casino online

сб, 2018-08-18 05:13

parx online casino casino bonus betfair online casino online casino gambling | https://casinorealmoneyigames.com/ - casino play https://casinorealmoneyigames.com/ - tropicana online casino

сб, 2018-08-18 05:46

real casino borgata online casino casino play borgata online casino | https://bestonlinecasinogames.us.org/ - mgm online casino https://bestonlinecasinogames.us.org/ - mgm online casino

сб, 2018-08-18 05:59

free online casino slots online casino gambling online casino slots online gambling | https://casinorealmoneyigames.com/ - online casinos https://casinorealmoneyigames.com/ - online casino bonus

сб, 2018-08-18 06:18

online casino games free online casino play online casino online casino sites | https://onlinecasinoflow.com/ - real money casino https://onlinecasinoflow.com/ - best online casinos

сб, 2018-08-18 06:49

zone online casino online gambling play casino online casinos for us players | https://bestonlinecasinogames.us.org/ - casino blackjack https://bestonlinecasinogames.us.org/ - foxwoods online casino

сб, 2018-08-18 07:33

casino play mgm online casino free online casino slots foxwoods online casino | https://bestonlinecasinogames.us.org/ - slots for real money https://bestonlinecasinogames.us.org/ - casino bonus

сб, 2018-08-18 10:55

online casino real money online casino games online casino gambling betfair online casino | https://onlinecasinoxplay.us.org/ - empire city online casino https://onlinecasinoxplay.us.org/ - real casino

сб, 2018-08-18 13:40

play casino online casino gambling best online casino borgata online casino | https://online-casinos.us.org/ - casino real money https://online-casinos.us.org/ - tropicana online casino

сб, 2018-08-18 13:41

casino games casino slots casino blackjack best online casino | https://onlinecasinodd.com/ - real casino https://onlinecasinodd.com/ - zone online casino

сб, 2018-08-18 13:43

online casino slots online casino real money online casino games casino bonus | http://onlinecasinoleo.com/ - online casinos http://onlinecasinoleo.com/ - betfair online casino

сб, 2018-08-18 13:52

caesars online casino casino bonus mgm online casino empire city online casino | https://online-casinos.us.org/ - free online casino slots https://online-casinos.us.org/ - casino bonus

сб, 2018-08-18 14:18

online gambling casino real money casino play foxwoods online casino | https://onlinecasinoxplay.us.org/ - online casinos https://onlinecasinoxplay.us.org/ - online casinos for us players

сб, 2018-08-18 14:19

Страницы

Комментировать