Butoane de socializare

    Cred că majoritatea bloggerilor ştiu, ce inseamna butoane pentru retele sociale . Dezvoltatorii de platforma Blogger (Blogspot) nu acordă o atenţie la această problemă prin furnizarea butoanelor de retele. In general platforma blogger ne ofera numai unlele butoane de relete sociale , insa uneori avem nevoie si de alte retele, cum sa puneti aceste butoane pe blogul vostru veti afla in acest articol.
Spre deosebire de butoanele standart, aceste butoane vor avea mai mari plusuri si anume:
În primul rând, numărul mare de reţele sociale disponibile.

În al doilea rând, mai elegant, în opinia mea, aspectul.
 În al treilea rând, atunci când faceţi clic pe veţi obţine o fereastră de tip pop-up redimensionate pentru a umple, sub formă de adăugarea de link-uri la serviciile sociale selectate de reţea.
 Şi, în final, posibilităţile nelimitate pentru publicarea de o combinaţie de butoane! Dacă priviti la sfârşitul acestui articol (sau orice alt articol de pe acest site web), veţi vedea în acţiune un set de butoane sociale, pe care eu doresc să vi le ofer.

Butoanele sociale vor arata in felul urmator:

Clar lucru ca aceste butoane se poate de modificat pe placul fiecaruia, insa baza de informatie si codul butoanelor este in genere acelasi.

Pentru a începe, mai intii vreau sa va comunic ce nseamna un buton social:  este o imagine care se afla la inceputul unui articol sau la sfirsit, care la indicarea cursorului, acesta imagine facind click pe ea, va trimite articolul sub forma de link pe saitul care si ii corespunde. Astfel articolele pot fi mai usor socializate cu ajutorul acestor butoane, si deasemenea principalul scop este de a extinde aceast articol pe alte saituri in toate directiile cit mai multe.

Aceste butoane vor trimite informatiile despre articol si anume: 

-numele articolului;

-scurta descriere;

comentarii; 

-si deasemenea utilizatorii sau cititorii blogului vostru vor avea posibilitatea sa informeze prietenii si sa puna un klass pe alte saituri sociale;

Cea mai simpla metoda este de a accesa https://www.addthis.com si de a urmari pasii, insa daca doriti sa faceti totul manual atunci cititi mai departe indicatiile.

In primul rind trebuie de deschis redactorul nostru blogger: edit htlm si bifam extindeti sablonul.(nu uitati sa salvati sablonul in caz de erori si greseli efectuate pe viitor.)

Gasim urmatorul cod:

<div class='post-share-buttons goog-inline-block'>

        <b:if cond='data:post.sharePostUrl'>

          <b:include data='post' name='shareButtons'/>

        </b:if>

      </div>

(daca nu gasiti acest cod nui nimic strasnic, inseamna ca sablonul vostru nu are acest cod sau e putin altfel, insa cautati numai al doilea rind din codul de mai sus. )

si indata dupa acest cod punem urmatorul cod:

<b:if cond='data:blog.pageType == "item"'>

  <div>

    <!--Blogger-->

    <a class='shareme' expr:href='&quot;http://blogger.com/blog-this.g?u=&quot; + data:post.url + &quot;&amp;n=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;t=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:blog.title + &quot;: &quot; + data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfA_VsjE4evukupcdeiFRq9Ep2JAzvxIJunQz0qLXv88DcngeE6b2JggjZ6K6jJ3EiJpfi0Z31ThUhewUgRkGVxiOhAkFXbiKXIONsppIgcMijiGb6Ixez1b3jlE-YNd5K2O7_lLDl_go/s25/but1bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDKWbzOpdyZYYJObmdItgdl6IgVJHMYRDn8HGs9pav5CtTG6fg_KExyzGGaW7_LChFi3TcHFV6FSUskB8M30lRikTQ4Dl2iuY8Vb2Q6PFIR3i4CCYKo3Kxe4OKk5OLpAoCQmVe1lycjRU/s25/but1color.png' title='Опубликовать в Blogger'/></a>

    <!--Twitter-->

    <a class='shareme' expr:href='&quot;http://twitter.com/intent/tweet?original_referer=&quot; + data:post.url + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;text=&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title), \&quot;_blank\&quot;, \&quot;height=240,width=510\&quot;); return false;&quot;' expr:title='data:blog.title + &quot;: &quot; + data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaCnPl7FnOp6ly4PyqtiE5yd3UA4ouYAPUmk0icrMz07zkkQQW9UpuF3avNMZj-YiUk5043f_oGeR9DwcJQE1fhyphenhyphenI1jn_kRGn9IRYHpdZzHMFrSFwB0Kwh4IaKg52w7EyyldcZrIWp8UY/s25/but2bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDhxu89wlyAD3dN7fLWzWt5JUCk9WX_pRrcgjL1UyDoaXZutB8aYPRAv1cexHVVNefyGJ-Ib7-O1_ce19XO5blXfgYXh0R-erM3JvT2Y21UeZ1JooAb39dQDZuHHbfDrM5XcTxissaxjw/s25/but2color.png' title='Опубликовать в Twitter'/></a>

    <!--Живой Журнал-->

    <a class='shareme' expr:href='&quot;http://livejournal.com/update.bml?subject=&quot;' expr:name='data:post.url + &quot;&gt;&lt;b&gt;&quot; + data:post.title + &quot;&lt;/b&gt;&lt;/a&gt; от &lt;b&gt;&quot; + data:post.author + &quot;&lt;/b&gt; (&quot; + data:blog.title + &quot;) : &lt;i&gt;&quot; + data:post.snippet  + &quot;&lt;/i&gt;&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;event=&lt;a href=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGbnLguMLL0DPQG3cwHvJX8bB8krSLfJFEeTuhieBHtJjiCwQqSIu0acRxTMqpLiP8dtnfAOq2uHk2QjPoWqZiVvzYWKhlqWKePPeN6RrjoKALxvCKcQAHyxjwX1VUhn2nlxTsM0L9hY/s25/but5bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Живой Журнал' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi23fMu5snpNsVLBv36eA96H83wythfbzHuUqed967-hzH4ozDKFexduFWLUYog9h3Cm_jjbI_T8LNkvRhBryXKn2tnKs9onXiA3U4B0jHn2YSIZcrr6qphcKkun5KYdPx6R9ynxDB2nyI/s25/but5color.png' title='Опубликовать в ЖЖ'/></a>

    <!--ВКонтакте-->

    <a class='shareme' expr:href='&quot;http://vk.com/share.php?url=&quot; + data:post.url + &quot;&amp;image=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;description=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=280,width=480\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0arPBoWjO0Jgqh9MWJ57msBSMnJ6ZB61ebsAGlhHaLf59mcN38bEnaQLgqqC4TR-FWkDaxmjv8nGaWTsVTcY-9x6YQYAa_eCwXwtIRZrtqcJbkeo4YOvJnVEttliSLxNfsiqh8cvMGM/s25/but4bw.png&quot;) no-repeat; font-size:25px;'><img alt='во ВКонтакте' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJHtjk9hTAaKfQKEi7jdIBDyoIU8iLk-zTl6ihD3FShVxRhVpdbuVjOtDiEonemsu-yWLIxvc1WRskZG2kuZwf0_53IPkSr8S6WlugIlRvfY-YhmOWKXhjRPm7F2B6zkKDaibPpGixxs/s25/but4color.png' title='Опубликовать во ВКонтакте'/></a>

    <!--Одноклассники-->

    <a class='shareme' expr:href='&quot;http://odnoklassniki.ru/dk?st.cmd=addShare&amp;st.s=0&amp;st._surl=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=385,width=600\&quot;); return false;&quot;' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRnLZePGhLUSXEHtbT3DUiy7KD4wDDdJSkb7DP_MBRP7ia7483KebFOjajUTx7np64jgFvxWEocNTfY24jzpJvO_C2z_qS3DZjyRTHRbgIqeNzcvUS1LD_RYdyjh2Mm2tM2Tpg6Vhx8T8/s25/but9bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Одноклассники' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBHWwH_DFCmMrzuDBLr4xWyoPlGbdzLJvMACPQ6OtGHNHZy1638jnDZHC0AJ9iMSQzlnBnUoH8TnRDeIpRgjGMkHRZt0EZBSEVkXllfOPxpRt-NVcOcrRXq4zOaFQzDi9lapeL-i_v_U/s25/but9color.png' title='Опубликовать в Одноклассниках'/></a>

    <!--Я.ру-->

    <a class='shareme' expr:href='&quot;http://my.ya.ru/posts_add_link.xml?URL=&quot; + data:post.url + &quot;&amp;title=&quot;' expr:name='data:post.author + &quot; (&quot; + data:blog.title + &quot;) :&lt;/b&gt; &lt;i&gt;&quot; + data:post.snippet  + &quot;&lt;/i&gt;&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;body=&lt;b&gt;\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=560,width=1005\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RrUvfA3UHN2yD5jJBeEdb4Itc6c3OtYJAQEduUui-kvG1ZcuE4gUc2xVeQwqu-akwwohxJchxRU-gym5c5KnykK4u003zoC0xZl2X5dSoB_-iLMPrwCwODahTc4kFPRxpcs2ExnUTXE/s25/but7bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Я.ру' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLNHhEQsJZPyyat6PHdYeEoiiLQaJPVdSTjXSEtpNcRgqkl1qGsID30nlQK3oi-I73WGCI4TKrpxCc1mg3Baz3vlV-DRyA0_omBbpN7TdNXtm0jCHXUc85equrFnHvLBqCfx2y6vGoNY0/s25/but7color.png' title='Опубликовать в Я.ру'/></a>

    <!--Мой Мир-->

    <a class='shareme' expr:href='&quot;http://connect.mail.ru/share?url=&quot; + data:post.url + &quot;&amp;imageurl=&quot; + data:post.thumbnailUrl + &quot;&amp;title=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;description=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=360,width=537\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_G14V3u6B1Pc2pjN68oZMzaI0zhSgIwCTB9dqxIdfFP5OMXEMnHRtJGa3GFz-egAPB6bayxg2NMLpBH-ca6bYXfAhDMavbzKiBuuWcmPxw0W6aXWLksNs-ih1iZD8xpbWXLOfs4kDcDo/s25/but6bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Мой Мир' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAdOYwi3X9diMvOJTd58wRXtqNZeFnmCMPjKQolDSGjoPDUOPAkj-3LkNm7CWZSjKdqKzbT7Bhc9yadUNySj7DnFqEfchTF_9ErWZLCB0nPPv3X1JvZThVjgzYSrKkEKkqyK6RFhKG7CY/s25/but6color.png' title='Опубликовать в Моем Мире'/></a>

     <!--LiveInternet-->

    <a class='shareme' expr:href='&quot;http://liveinternet.ru/journal_post.php?action=n_add&amp;cnurl=&quot; + data:post.url + &quot;&amp;cntitle=&quot;' expr:name='data:post.url + &quot;]&quot; + data:post.title + &quot;[/URL][/B] от [B]&quot; + data:post.author + &quot;[/B] (&quot; + data:blog.title + &quot;) : [I]&quot; + data:post.snippet + &quot;[/I][/QUOTE]&quot;' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;cntext=[QUOTE][B][URL=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWbKeYrW9a615VPKTbpnTEy1NR4jcX-vx9l7Ml7Q6R2hk-hYvHxLF2Cr8swk1Yu4hwEyBlwPWj4zHCCJECKDxuw0wotF05qHy1zdUuu0yLYcaVBixACFr50Tp_xouZ2UazN8kVIQpckUs/s25/but3bw.png&quot;) no-repeat; font-size:25px;'><img alt='В LiveInternet' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4ovnjjReeoUE0rXVLCtyOr_11QYMG93oXVAQvgiLRjeLNeKzK1QbTdQEzsiMjfG7Z_xXbyFVwtxMkeXdjrDH_pvsiUyZUFH6EAekE02mT4Qtbh4rOvg6QUN9lPQ5-3kMlw4XjFsY2QQo/s25/but3color.png' title='Опубликовать в LiveInternet'/></a>

    <!--Facebook-->

    <a class='shareme' expr:href='&quot;http://facebook.com/sharer.php?s=100&amp;p[url]=&quot; + data:post.url + &quot;&amp;p[images][0]=&quot; + data:post.thumbnailUrl + &quot;&amp;p[title]=&quot;' expr:name='data:post.snippet' expr:onclick='&quot;window.open(this.href + encodeURIComponent(this.title) + \&quot;&amp;p[summary]=\&quot; + encodeURIComponent(this.name), \&quot;_blank\&quot;, \&quot;height=352,width=640\&quot;); return false;&quot;' expr:title='data:post.title' rel='nofollow' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir0ZKEWzCYf0PGRqTBqQpaOXXqlM6ss8Ml_XyjtUw-42v8FSZlPMWnLb64lpgMlraPs4k0V42itbAdzp5pTqWn4ViNmIzaOD8taLsXc_kUNZW_B4ugdDtDEU5kNYDuPoWXqLSthBob_k0/s25/but8bw.png&quot;) no-repeat; font-size:25px;'><img alt='В Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWEnYVdAO4z97ugssw9YwCruTAk6CMoCINWBFi_f1I_rvYSBxPu4ASXerC2UtDu-hF7q6wQ5O5-E9-CeOU2fpMMwz9SstSSnJgf-wY6cP0CCmaJXklXDE5VEdCYfkDevok-5uth3XjN7U/s25/but8color.png' title='Опубликовать в Facebook'/></a>

    <!--AddThis-->

    <a class='addthis_button shareme' expr:addthis:title='data:post.title' expr:addthis:url='data:post.url' style='background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2H0v94ZUJD4C-_7P4_kyUpWjH3u3Ocf2PzcjDzMYm1RpuCldI61_jnqLTUhBoRibyTbZr4I4t0i8zU_4E_i4w-Z97DRH94ib_1PLqJN6YXjHDzYoRGQnLSp0EH3PNbov8cshB7V3oiXA/s25/but0bw.png&quot;) no-repeat; font-size:25px;'><img alt='В закладки' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE0o-7c1tq62j-A5c6IcZSIYcg6iZ8ReYEit9uSu5ydDRO1yQCF6Frkwjvh2r-K9IURg5fP91Sqebm_HJlMBH-WtTUFWpYKQBMFj1QeohRC1vH6pKzsrsYPpibYOpS3N_VlRkfDlOJqg8/s25/but0color.png'/></a><script type='text/javascript'>var addthis_config = {&quot;data_track_clickback&quot;:true};</script><script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=XX-XXXXXXXXXXXXXXXX' type='text/javascript'/>

  </div>

</b:if>

Dupa cum vedem fiecare cod a butonului este indicat cu: spre exemplu la facebook: <!--Facebook-->

adica puteti sa stergeti codul daca nu doriti sa fie butonul aceste relete sociale.

Acest cod este destinat pentru articlolele deschise in indregime, insa daca doriti ca butoanele sa fie si pe prima pagina a blogului dupa fiecare articol,  nu va ramine sa introduceti codul de mai sus insa fara primul si ultimul rind. Ele sunt de culoare rosie.

A ramas sa faceti ultimul pas: sa adaugam codul pentru stil al butoanelor. Acest pas nu este obligatoriu, doar ca va modifica stilul  butoanelor la indicarea cursorului.

Cautam urmatoul cod:

/* Posts

sau

]]></b:skin>

in depemdenta ce sablon, ultimul este pentru sabloane mai noi, si inainte punem acest cod:

.shareme img {

  opacity: 0;

  filter: alpha (opacity = 0);

  vertical-align: text-top;

}

.shareme img:hover {

  opacity: 1;

  filter: alpha (opacity = 100);

  vertical-align: text-top;

  -moz-transform: scale(1.1);

  -o-transform: scale(1.1);

  -webkit-transform: scale(1.1);

  -ms-transform: scale(1.1);

}

Asta e tot, daca vreti ca la indicarea cursorului sa nu se modifice imaginea butonului, pur si simplu stergeti codul de culoare verde. 

==============================================

Suntem recunoscatori pentru email, socializare si comentarii, succes!! :)

Introdu emailul tau si primesti articole gratis:

Apasa mai jos, arata si prietenilor