
позволяют транслировать ваши твиты или твиты списка ваших друзей непосредственно в блоге. Что нам это даёт?
1. Возможность отправлять сообщение прямо в аккаунт с блога.
2. Прямо со страницы блога следить за информацией, публикуемой в Твиттере.
3. Сразу же ответить или ретвинуть опубликованный твит.
4. Подключиться к вашей ленте читателям блога.
Давайте начнём с формирования кода и установки виджета Твиттер в блоге. Это совсем быстро и не сложно.
1. Заходим в свой аккаунт и в правом верхнем углу нажимаем на фото профиля. В открывшемся списке нам нужна опция настройки. Далее с левой стороны выбираем виджеты, нажимаем и кликаем по кнопке создать. Выбираем профиль.

2. Тут нас перекидывает на новую страницу, где в поле нужно ввести адрес вашего аккаунта и нажать на стрелочку.

3. Далее выбираем из двух вариантов первый.

4. Внизу можно видеть, как будет отображаться виджет. Но нужно сделать кое-какие настройки, чтобы он органично вписался в сайтбаре блога. Нажимаем на ссылку установить параметры настройки.
5. На открывшейся странице определяемся с высотой, шириной, цветом. Выбираем русский язык и нажимаем на кнопочки обновить.

Всё. Мы создали виджет, копируем предложенный код и устанавливаем его в блоге в гаджет HTML/JavaScript.
Обратите внимание, что мы в шаге 1 выбрали вариант профиль, чтобы в виджете отображались наши твиты. Если нужны твиты других авторов вашего списка выбираем список. И если выбрать избранные, то и будут отображены избранные.
Посмотрите на моём тестовом блоге вариант такого виджета. Сразу попрошу там обратить внимание на 2 кнопки Твиттер под ним. О них речь пойдёт ниже.
Кнопки твиттер для блога.
Вернёмся к шагу 3 и выбираем второй вариант. Или же шаг 2 и спускаемся чуть ниже. Создание кнопки для блога. Здесь принцип тот же самый. Выбираете из предложенного любую кнопку. Я использовала начать разговор прямо с сайта.Такая удобная, скажу я вам. Там же на демо блоге можно проверить её в работе. Устанавливается она так же в гаджет или можно установить непосредственно в тело поста.
Для этого нужно зайти во вкладку шаблон-изменить HTML. Найти строку -
<data:post.body/>
Обычно в шаблоне их несколько. Нам нужна последняя. Если хотите, чтобы кнопка отображалась вверху сообщения, то полученный код устанавливайте над этой строкой. Если же внизу под сообщением, то после. И сохраняйте шаблон.
Вот это те варианты, которые нам предлагает сам Твиттер.
Сейчас я предложу вам код ещё одной кнопки с отображением количества подписчиков в Твиттере. Перейдя по ней пользователь попадает на вашу страницу и так же может присоединиться к вам, ретвинуть или поставить лайк прямо с блога.
<a href="http://twitter.com/VikserV " class="twitter-follow-button">присоединяйтесь @VikserV</a>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Вставляйте вместо моего свой адрес. С установкой всё вышеописанным способом.<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
Конечно же я не утерпела и делюсь с вами ещё одной твиттер-штучкой. Возможно, вы уже и встречали такую на некоторых сайтах. Посмотрите на скриншот, как она будет выглядеть.

В этом случае нам нужно добавить некоторые коды в шаблон блога. Вкладка шаблон Сделайте резервную копию заранее. Изменить HTML.
1. Находим строку ]]></b:skin> и над ней устанавливаем код.
.BWGSharetip {
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.BWGSharetip span {
position:absolute;
content:" ";
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.BWGSharetip a {
color:#f16786;
}
.BWGSharetip:hover {
background:#3D566E;
}
.BWGSharetip:hover span {
border-top-color:#3D566E;
}
.tooltipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.tooltipContainer a {
width:100%;
background:transparent url(http://4.bp.blogspot.com/-HCutv6Nw8iM/VK_Q-v7WT1I/AAAAAAAAFTY/rbxVAhvs_dM/s1600/sprites.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}
display:none;
top:0;
background:#333;
color:#f16786;
width:40px;
height:32px;
position:absolute;
margin-left:-20px;
opacity:0;
filter:alpha(opacity=0);
z-index:99;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
}
.BWGSharetip span {
position:absolute;
content:" ";
border:solid rgba(0,0,0,0);
height:0;
width:0;
top:100%;
border-top-color:#333;
left:50%;
-webkit-transition:all .3s ease;
-moz-transition:all .3s ease-in-out;
-o-transition:all .3s ease;
transition:all .3s ease-in-out;
border-width:7px;
margin:0 0 0 -7px;
}
.BWGSharetip a {
color:#f16786;
}
.BWGSharetip:hover {
background:#3D566E;
}
.BWGSharetip:hover span {
border-top-color:#3D566E;
}
.tooltipContainer {
position:relative;
display:block;
width:100%;
height:100%;
top:0;
left:0;
}
.tooltipContainer a {
width:100%;
background:transparent url(http://4.bp.blogspot.com/-HCutv6Nw8iM/VK_Q-v7WT1I/AAAAAAAAFTY/rbxVAhvs_dM/s1600/sprites.png) 0 0 no-repeat;
left:0;
top:0;
height:100%;
text-decoration:none;
display:block;
padding:0;
}
.sharingLink {
display:block;
position:absolute;
text-indent:-9999px;
}
2. Находим тег </head> и над ним устанавливаем код.
<script type='text/javascript'>
/*<![CDATA[*/
$(document).ready(function() {
textToShare = '';
$(document).mousemove(function(m) {
generateTooltipPosition();
});
});
$(document).mouseup(function() {
$(document).mousemove(function(m) {
generateTooltipPosition()
});
var textToShare = getTextToShare();
var BWGSharetip = document.getElementById("BWGSharetip");
if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $("#BWGSharetip").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== tooltipTitle) $('#BWGSharetip').animate({
opacity: 0
}, 30);
if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
if ($('#BWGSharetip').show()) {
$('#BWGSharetip').animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
$('#BWGSharetip').show();
$('#BWGSharetip').animate({
opacity: 1
}, 30);
$('#sendToTwitter').attr('href', twitterLink);
}
function getTextToShare() {
shareTxt = '';
if (window.getSelection) {
shareTxt = window.getSelection();
generateTooltipPosition();
} else if (document.getSelection) {
shareTxt = document.getSelection();
generateTooltipPosition();
}
return shareTxt;
}
function generateTooltipPosition() {
var selection = window.getSelection && window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
pos = $(window).scrollTop();
selection_text = selection.toString(), rect = range.getBoundingClientRect();
$('#BWGSharetip').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>
/*<![CDATA[*/
$(document).ready(function() {
textToShare = '';
$(document).mousemove(function(m) {
generateTooltipPosition();
});
});
$(document).mouseup(function() {
$(document).mousemove(function(m) {
generateTooltipPosition()
});
var textToShare = getTextToShare();
var BWGSharetip = document.getElementById("BWGSharetip");
if (textToShare != '') showMeTooltip();
});
$(document).click(function() {
var textToShare = getTextToShare();
var tooltipTitle = null;
var newTooltipTitle = $("#BWGSharetip").attr("title");
if (newTooltipTitle == "") return;
if (newTooltipTitle !== tooltipTitle) $('#BWGSharetip').animate({
opacity: 0
}, 30);
if (textToShare != "") showMeTooltip();
});
$(window).resize(function() {
if ($('#BWGSharetip').show()) {
$('#BWGSharetip').animate({
opacity: 0
}, 30);
}
});
function showMeTooltip() {
var pageURL = window.location.toString();
var twitterLink = "https://twitter.com/intent/tweet?text=" + getTextToShare() + "&via=" + twitterAccount + "&url=" + pageURL;
$('#BWGSharetip').show();
$('#BWGSharetip').animate({
opacity: 1
}, 30);
$('#sendToTwitter').attr('href', twitterLink);
}
function getTextToShare() {
shareTxt = '';
if (window.getSelection) {
shareTxt = window.getSelection();
generateTooltipPosition();
} else if (document.getSelection) {
shareTxt = document.getSelection();
generateTooltipPosition();
}
return shareTxt;
}
function generateTooltipPosition() {
var selection = window.getSelection && window.getSelection();
if (selection && selection.rangeCount > 0) {
range = selection.getRangeAt(0);
pos = $(window).scrollTop();
selection_text = selection.toString(), rect = range.getBoundingClientRect();
$('#BWGSharetip').css({
top: (rect.top + pos - 20) - 32 + 'px',
left: rect.left + (rect.width / 2) + 'px',
});
}
}
/*]]>*/
</script>
3. Находим </body> и над ним устанавливаем код.
<script>var twitterAccount = "nitinmaheta";</script>
<div class="BWGSharetip" id="BWGSharetip">
<div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div>
</div>
Сохраняйте шаблон и проверяйте виджет в работе.<div class="BWGSharetip" id="BWGSharetip">
<div class="tooltipContainer"><a id="sendToTwitter" href="" class="sharingLink twitter"><span></span></a></div>
</div>
Надеюсь, что вы на чём то остановились и статья оказалась для вас полезной. Если и этого мало, то можно ещё почитать -
Летающая птичка твиттер в блоге.
Два варианта кнопки Твиттер для блога
У меня сегодня всё. Если что-то установите, обязательно загляну к вам и твитну. Спасибо за внимание и всем удачи.
здесь можно оформить подписку на новые шпаргалки
Виктория! Доброе утро! У меня раньше стояли виджеты Твиттер, Фэйсбук и Одноклассников на Блоге Кота Васьки. Потом я испугалась внешних ссылок и их убрала. Сейчас я поставила вашу кнопку на Волшебный фонарик. Ссылку я закрыла с помощью noindex в начале a href и в конце после /a. Виктория, а rel="nofollow" нигде нельзя вставить?
ОтветитьУдалитьЗдравствуйте Ирина. Попробуйте так a href="site.com" rel="nofollow"> Текст <
ОтветитьУдалитьСпасибо, Виктория! Попробую!
ОтветитьУдалитьВиктория! УРА! У меня получилось! А о кнопках других соц. сетей вы не будете писать? Хотя бы Facebook или В Контакте.
ОтветитьУдалитьИрина, про фейсбук вот кое-что есть. А про ВК именно про кнопки не писала. Надо подумать.Пройдитесь по ссылкам ниже может что-то подберёте.
ОтветитьУдалитьhttp://www.shpargalochki.ru/2014/10/vypadajushhaja-panel-fan-stranicy-dlja.html
http://www.shpargalochki.ru/2015/10/Kak-vstroit-zapis-iz-seti-Facebook-v-soobshhenie-Blogger..html
http://www.shpargalochki.ru/2014/07/jeksport-zapisi-iz-seti-vk.html
Ирина, может уже на ты перейдём. Как.
Виктория! Я согласна на "ты"! Уже давно знакомы!
ОтветитьУдалитьВиктория! Я посмотрела твои посты. Но я не хочу встраивать разные страницы и фан-страницу Фэйсбука в блог. Мне очень нравится кнопка Твиттер, которую я вчера установила. Её можно закрыть от индексации. У тебя есть подобные кнопки других соц. сетей? Интересно, когда появится кнопка от Галактикки? Можно просто дать ссылки на разные соц. сети и закрыть их от индексации? Хочу попробовать!
ОтветитьУдалитьИрина, пишу сейчас пост про другие кнопки. У галактикки можно просто ссылку свою вставить. Она там есть в разделе пригласить друзей-пригласительные ссылки.
ОтветитьУдалитьВиктория, спасибо!
ОтветитьУдалить