มาสร้างปุ่ม social share ที่ดูทันสมัยกันเถอะ

 

วันนี้มาดูกันว่าเราสามารถสร้างปุ่ม share ไปยัง facebook twitter และ google+ ได้อย่างไร เพื่อทำให้เว็บของเราดูทันสมัย และเป็นการเพิ่มช่องทางการประชาสัมพันธ์เว็บของเราอีกทาง มาเริ่มกันเลย

1. ไปที่ blogger แม่แบบ > แก้ไข html

2. ค้นหา   </b:skin>

3. นำ code css นี้ไปวางก่อน ]]></b:skin>

/*** Share Post Styling ***/
#share-post {
width: 100%;
overflow: hidden;
margin-top: 20px;
}
#share-post a {
display: block;
height: 32px;
line-height: 43px;
color: #fff;
float: left;
padding-right: 10px;
margin-right: 10px;
margin-bottom: 25px;
text-decoration: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-o-border-radius: 4px;
-ms-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
overflow: hidden;
margin: 0 10px 10px 0;
transition: .5s;
-webkit-transition: .5s;
-moz-transition: .5s;
width: 125px;
height: 45px;
float: left;
padding: 0;
overflow: hidden;
text-align: center;
font-weight: 600;
}
#share-post
.facebook {
background-color: #6788CE;
}
#share-post
.twitter {
background-color: #29C5F6;
}
#share-post
.google {
background-color: #E75C3C;
}
#share-post
span {
display: block;
width: 32px;
height: 32px;
float: left;
padding: 6px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6SkxVVVQSGbM7VKEor0Q09Boi1lh83XB_rnE3WJfsIRJC0A36aPnes8BUT1nJGKUmdl8s9up4Cpgafo-xSCg_HHKzLpWxgZa2bI5ZbCMxmGbNcX96bLn9wlKpXWgU-V3yoc6e3-hAu4Q/s1600/single-share.png) no-repeat;
background-position-y: 6px;
background-position-x: 7px;
}
#share-post
.facebook span {
background-color: #3967C6;
}
#share-post
.twitter span {
background-color: #26B5F2;
background-position: -65px;
}
#share-post
.google span {
background-color: #E94D36;
background-position: -137px;
}
4. ค้นหาปุ่ม share เดิมที่เราใช้อยู่ ของผมเป็น facebook share ค้นหาตามนี้

 class='fb-share-button'

6. นำ code นี้ไปแทนที่

<!--  Share Button Start -->
<div id='share-post'>
  <a class='facebook' expr:href='data:post.sharePostUrl + &quot;&amp;target=facebook&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640\&quot;); return false;&quot;' expr:title='data:top.shareToFacebookMsg' target='_blank'>
    <span/>
    SHARE
  </a>
  <a class='twitter' expr:href='data:post.sharePostUrl + &quot;&amp;target=twitter&quot;' expr:title='data:top.shareToTwitterMsg' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' target='_blank'>
    <span/>
     SHARE
  </a>
  <a class='google' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='javascript:window.open(this.href,   &quot;&quot;, &quot;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600&quot;);return false;' rel='nofollow' title='Share this on Google+'>
    <span/>
     SHARE
  </a>
</div>
<!--  Share Button Start -->

7. ใช้งานได้แล้วครับ  ;)