Социальные кнопки и подписка на новые статьи в одном гаджете

Приветствую Вас, дорогие читатели! Все время пытаюсь улучшить свой блог, заодно с Вами идеями делюсь. Иногда не моими :) Вот, например, нашла социальные кнопки и подписку на новые статьи в одном гаджете. Встроенные кнопки на Ваши аккаунты в Facebook, Google+, Twitter, YouTube (если, конечно, вставите ссылки на них в код гаджета).




Сначала у меня в блоге был стандартный "блоггеровский" гаджет Рассылка обновлений по электронной почте. Вот так он выглядел в блоге (на данный момент удалила):

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

Как добавить в Blogger гаджет с социальными кнопками и подпиской на новые статьи (ИСТОЧНИК идеи и кода):

Сначала рекомендую приготовить все ссылки на Ваши аккаунты (скопировать их в Блокнот или Notepad++):

• Google+
• Facebook - на Вашу личную страничку и на страницу, которую создали и продвигаете, 
• Twitter, 
• канал на YouTube (если есть).

А также часть URL c сервиса https://feedburner.google.com Найти ссылку на Ваш канал в Feedburner можно в Вашем "кабинете", но это долго. Проще всего посмотреть код в гаджете "Рассылка обновлений по электронной почте", если он у Вас есть в блоге:

 Если Вы его ранее не добавляли, то зайдите в настройках блога в пункт Дизайн -> Добавить гаджет -> Рассылка обновлений по электронной почте.
Во всплывающем окне в настройках гаджета увидите URL Feedburner.

Нам нужен кусочек blogspot/pbWIR (у Вас будут другие буквы после /). После того, как код скопировали, гаджет не сохраняйте.

Итак, большой код всего гаджета (скопируйте в Блокнот или Notepad++) с социальными кнопками и полем подписки:

<style type="text/css"> /*<!CDATA[*/ #bwg-mashable{width:300px;margin:auto;padding:0;} .bwg-googleplus {margin-bottom:50px; height: 57px;} .bwg-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;} .bwg-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;} .bwg-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;} .bwg-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;} .bwg-twitter a.twitter-follow-button {display: block;} .bwg-twitter iframe {margin: 9px 11px;} .bwg-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;} .bwg-sociallinks a {text-shadow: 1px 1px white;} .bwg-sociallinks .bwg-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;} .bwg-sociallinks .bwg-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWtO1cLUrFWlAf8rPc9qkM6IN4r7n9q6jTZnbA4y6ECMOKllDRNisvKT6PuQ_RpXIE57EA7KIK2s-uJGsJqc3dS1k9njP0IO582294SPjVjOQsgafm07jkArkdXIa3nfi56LQwJyn_hazU/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;} .bwg-sociallinks .bwg-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;} .bwg-sociallinks .bwg-social li a:hover {text-decoration: underline;} .bwg-sociallinks .bwg-social li.facebook {background-position: 0 -450px !important;} .bwg-sociallinks .bwg-social li.twitter {background-position: 0 -150px !important;} .bwg-sociallinks .bwg-social li.youtube {background-position: 0 -90px !important;} .bwg-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;} .bwg-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;} .bwg-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;} .bwg-emailbox input.emailu:focus {color: #333;} .bwg-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;} .bwg-emailbox input.submitu:hover {text-decoration: none;} .bwgOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );} .bwgOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.bwg-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;} .bwg-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;} /*]]>*/ </style>     <div id="bwg-mashable">     <div class="bwg-googleplus">         <script type="text/javascript">         /*<![CDATA[*/         window.___gcfg = {lang: 'en'};         (function(){             var po = document.createElement("script");             po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";             var s = document.getElementsByTagName("script")[0];             s.parentNode.insertBefore(po, s);         })();         /*]]>*/         </script>         <div class="g-plus" data-href="https://plus.google.com/108854458222539859887" data-width="300" data-height="auto" data-theme="light"></div>     </div>     <div class="bwg-facebook">         <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fsamasajt.blogspot.ru&amp;send=false&amp;layout=standard&amp;width=280&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=arial&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
    </div>     <div class="bwg-gplusone">         <script type="text/javascript">/*<![CDATA[*/           (function() {         var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;         po.src = "https://apis.google.com/js/plusone.js";         var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);           })();/*]]>*/         </script>         <div class="g-plusone" data-size="medium" data-href="http://samasajt.blogspot.ru/"></div>
        <span>Recommend on Google</span>     </div>     <div class="bwg-twitter">         <a href="https://twitter.com/MariyaBessonova" class="twitter-follow-button" data-show-count="true">Follow @nitinmaheta</a>
        <script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>     </div>     <div class="bwg-sociallinks">         <ul class="bwg-social">         <li class="facebook"><a href="https://www.facebook.com/mariya.bessonowa">Facebook</a></li>
        <li class="twitter"><a href="https://twitter.com/MariyaBessonova">Twitter</a></li>
        <li class="youtube"><a href="http://www.youtube.com/user/BessonovaMariya">Youtube</a></li>
        </ul>     </div>     <div class="bwg-emailbox">         <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/EmgGT', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">             <tr>             <td>                 <input class="emailu" name="email" placeholder="Enter your email" type="text"/>             </td>             <td width="64px">                 <input class="submitu bwgOrange" type="submit" value="Subscribe"/>             </td>             </tr>         </table>         <input name="uri" type="hidden" value="blogspot/EmgGT"/>
        <input name="loc" type="hidden" value="en_US"/>         </form>     </div>     <div class="bwg-moresubs">         <a href="http://www.bloggerwidgetgenerators.com">Get this Gadget</a>     </div>     </div>

Что нужно заменить (выделено желтым цветом) на Ваши данные:

1) Ссылку на Ваш аккаунт в Google+ в строке:

<div class="g-plus" data-href="https://plus.google.com/+BessonovaMariya" data-width="300" data-height="auto" data-theme="light"></div>

2) Ссылку на Вашу СТРАНИЦУ (не на личную страничку) в Facebook в строке
(например, https://www.facebook.com/samasajt.blogspot.ru/):

<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fsamasajt.blogspot.ru&amp;send=false&amp;layout=standard&amp;width=280....

3) Ссылку на Ваш блог в строке:

<div class="g-plusone" data-size="medium" data-href="http://samasajt.blogspot.ru/"></div>
        <span>Recommend on Google</span>

4) Ссылку на Ваш аккаунт в Twitter в строке:

<a href="https://twitter.com/MariyaBessonova" class="twitter-follow-button" data-show-count="true">Follow @nitinmaheta</a>

5) Ссылку на Ваш аккаунт в Facebook (личную страничку) в строке:

<li class="facebook"><a href="https://www.facebook.com/mariya.bessonowa">Facebook</a></li>

6) Ссылку на Ваш аккаунт в Twitter в строке:

<li class="twitter"><a href="https://twitter.com/MariyaBessonova">Twitter</a></li>

7) Ссылку на Ваш канал на YouTube в строке:

<li class="youtube"><a href="http://www.youtube.com/user/BessonovaMariya">Youtube</a></li>

8 и 9) Код Feedburner (где взять - писала выше) в двух местах:

- здесь: <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/EmgGT', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">

- и здесь: <input name="uri" type="hidden" value="blogspot/EmgGT"/>

Когда после долгих трудов, у Вас будет полностью готов код гаджета, нужно его весь скопировать и вставить в поле Содержание гаджета HTML/JavaScript (Дизайн -> Добавить гаджет -> HTML/JavaScript).

И перетащить гаджет, например, на боковую колонку блога. 

Автор пишет, что можно еще менять средствами CSS цвет фона гаджета, ширину и высоту. Но меня и так все устроило :) Большое спасибо ему (автору) за такой классный гаджет!