Будь в курсе событий!

02.09.2013

Социальные кнопки --- Social sharing

Leave a Comment
Привет всем читателям моего блога, вот начал разбираться со старыми кодами, скриптами, и обнаружил  что у меня завалялись разнообразные  социальные кнопки, и вот решил их выложить. Мне как-бы не надо столько много а может кому то пригодятся, они от  разнообразных социальных сервисов и все рабочие,  а  сервисов таких.


                                 А начнем мы с share42.com сами кнопки выглядят так:


Сами кнопки  распологаются горизонтально, вставлять их надо  после  строчки кода.  Для этого переходим в шаблон,  жмем  изменить HTML, далее зажимаем кнопки  на клавиатуре   CTRL+F  появляется  строка поиска, в ней ищем  вводим <data:post.body/> и  как нашли то вставляем вот этот код чуть ниже строчки <data:post.body/>

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div align='center'>
Если понравилась статья, поделитесь с друзьями.
  <div align='center'>
<div class="share42init"></div>
<script type="text/javascript" src="http://dl.dropbox.com/u/48089857/share43/share42.js"></script>
<script type="text/javascript">share42('http://dl.dropbox.com/u/48089857/share43/')</script>
</div></div></b:if>

Строчку что я пометил зеленым маркером,  мы можете изменить либо вообще убрать.

Теперь про тоже share42.com  только вертикальные выглядеть они будут так, код вставляется в виджет HTML/JavaScript что на страничке дизайн сам код.





        <div id="share42init" style="position: fixed;margin: 0px;padding: 0px;top:100px;left: 0px;list-style: none;z-index:9999;">
<!-- share42 -->
<div class='share42init' data-path='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDfuFEM5706F9y6vRDwVXRYalD0lsB2CYXuGbR5SX3RW8HE3LFSLxOpLoOrfAki5FPltYLP62uyYoK54VsbBoEldyKDTSep2BYSU4jYjL5rVR6l9aVaP6jKh5H0gsrPCS6I351tvs3Vis/s1600/icons'/>
<script src='https://sites.google.com/site/itwordandsoft/home/1/share42.js' type='text/javascript'/>
<!-- share42 End --></script></div></div>


                       Теперь про социальные кнопки  Add This выглядят они так:

 Вставляются  они в виджет HTML/JavaScript, в любом месте вашего блога вот код.

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_pinterest_pinit"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>
<!-- AddThis Button END -->

Следующие  социальные кнопки это Share This,  вставляются так же в любой виджет HTML/JavaScript. Выглядят кнопки так:
 Вставляются в любое место вашего веб ресурса, могут распологатся как горизонтально так и напрмер их можно вставить в виджет, и они  у вас будут в квадратной форме.Помимо того имеют всплываюшие подсказки, в виде названий ресурсов при наведение  как на скриншоте.
 

  Если ваш шаблон поддерживает виджеты  разных форм. Сам код

<h2 class='title' style='background-color: white; border-bottom-color: rgbundefined238, 238, 238); border-bottom-style: solid; border-bottom-width: 4px; color: #333333; font-family: &apos;Bree Serif&apos;, serif; font-size: 19px; font-weight: normal; line-height: 20px; margin: 0px 0px 12px; padding: 0px; text-align: center;'>
Share This Post</h2>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-social-anime.css' rel='stylesheet' type='text/css'/>
<ul class='abt-social' id='abt-cssanime'>
<li class='abt-facebook'>
<a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.openundefinedthis.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' title='Share this on Facebook'><strong>Facebook</strong></a>
</li>
<li class='abt-twitter'>
<a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'><strong>Twitter</strong></a>
</li>
<li class='abt-googlebuzz'>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot;' rel='nofollow' target='_blank' title='Post on Google+'><strong>Google+</strong></a>
</li>
<li class='abt-stumbleupon'>
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Stumble upon something good? Share it on StumbleUpon'><strong>StumbleUpon</strong></a>
</li>
<li class='abt-digg'>
<a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Digg this!'><strong>Digg</strong></a>
</li>
<li class='abt-delicious'>
<a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on del.icio.us'><strong>Delicious</strong></a>
</li>
<li class='abt-linkedin'>
<a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank' title='Share this on LinkedIn'><strong>LinkedIn</strong></a>
</li>
<li class='abt-reddit'>
<a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' title='Share this on Reddit'><strong>Reddit</strong></a>
</li>
<li class='abt-technorati'>
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this on Technorati'><strong>Technorati</strong></a>
</li>
</ul>
</b:if>
<br />
<span style="font-family: Georgia, Times New Roman, serif; font-size: xx-small;"><a href="http://zarnakoom.blogspot.com/2013/07/how-to-add-social-share-buttons-for-blogger.html" target="_blank">Get This Widget</a></span>
<br />

Далее идет виджет так же от Share This.com , только он  горизонтальный и где бы вы не расположили  виджет появится он именно под постами как у меня. Вставлять его так же надо в HTML/JavaScript виджет.

Сам код такой:

 <span id="st_finder"></span><script type="text/javascript" src="http://w.sharethis.com/widget/stblogger2.js"></script><script type="text/javascript">var switchTo5x=false;stBlogger2.init("http://w.sharethis.com/button/buttons.js", {"sharethis":["large","ShareThis",""],"blogger":["large","Blogger",""],"wordpress":["large","WordPress",""],"facebook":["large","Facebook",""],"fbrec":["large","Facebook Recommend",""],"twitter":["large","Tweet",""],"tumblr":["large","Tumblr",""],"myspace":["large","MySpace",""],"googleplus":["large","Google +",""],"google_bmarks":["large","Bookmarks",""],"yahoo":["large","Yahoo",""],"mail_ru":["large","mail.ru",""],"odnoklassniki":["large","Odnoklassniki",""],"vkontakte":["large","Vkontakte",""],"livejournal":["large","LiveJournal",""],"messenger":["large","Messenger",""],"linkedin":["large","LinkedIn",""],"pinterest":["large","Pinterest",""],"stumbleupon":["large","StumbleUpon",""],"delicious":["large","Delicious",""],"digg":["large","Digg",""],"reddit":["large","Reddit",""],"evernote":["large","Evernote",""],"baidu":["large","Baidu",""],"bebo":["large","Bebo",""],"amazon_wishlist":["large","Amazon Wishlist",""],"friendfeed":["large","FriendFeed",""],"yammer":["large","Yammer",""],"yigg":["large","Yigg",""],"technorati":["large","Technorati",""],"typepad":["large","TypePad",""],"email":["large","Email",""]} , "7327fbd0-90ab-4f18-a231-c9dfd6c8b0ea");var f = document.getElementById("st_finder");var c = f.parentNode.parentNode.childNodes;for (i=0;i<c.length;i++) { try { c[i].style.display = "none"; } catch (err) {}}</script>


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


0 коммент. :

© 2012-2017 Cash's from program