Виджеты, кнопки и другие фишки Твиттер в блоге.

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

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>

Вставляйте вместо моего свой адрес. С установкой всё вышеописанным способом.

Конечно же я не утерпела и делюсь с вами ещё одной твиттер-штучкой. Возможно, вы уже и встречали такую на некоторых сайтах. Посмотрите на скриншот, как она будет выглядеть.

Когда посетитель выделит участок текста вашего сообщения появляется иконка с птичкой. Если нажать на неё открывается окно с предложением поделиться твитом. Рабочий вариант тоже на тестовом блоге ( ссылка выше). Подглядела на сайте www.bloggerwidgetgenerators.

В этом случае нам нужно добавить некоторые коды в шаблон блога. Вкладка шаблон Сделайте резервную копию заранее. Изменить 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJSlGLnVPatb6_FLazNTWsh0LbnhIpkIvg_O-pVUdRc-dXhcL83o1bI02RKIt8qaAcupVGIhf11qmRQ68xMH67ddfgtts3ZipB1UjDEJyYtJIuL9bf1YmKU3VcR-vIMi_G_0SWZmekg4Bm/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>

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>

Сохраняйте шаблон и проверяйте виджет в работе.

Надеюсь, что вы на чём то остановились и статья оказалась для вас полезной. Если и этого мало, то можно ещё почитать -

Летающая птичка твиттер в блоге.
Два варианта кнопки Твиттер для блога

У меня сегодня всё. Если что-то установите, обязательно загляну к вам и твитну. Спасибо за внимание и всем удачи. 

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email