Blogger: ใส่ปุมแช์เนื้อหารวมเป็นกลุ่มไว้ในบทความ

บทความนี้เป็นวิธีใส่สำหรับปุ่มแชร์เนื้อหาบทความที่ผู้อ่านกำลังเปิดอยู่ ด้วยปุ่มของเครือข่ายสังคมยอดนิยมทั้ง 3 ชนิดเรียงเป็นชุดเดียวกันซึ่งก็คือ Facebook, Googleplus, Twitter
โดยถ้าหากใครไม่ชอบปุ่มของผู้ให้บริการเจ้าไหนก็ตัดโค้ดของส่วนนั้นออกได้ตามหัวข้อกำกับที่เขียนไว้แล้ว นอกจากนี้สามารถอ่านในส่วนคำอธิบายเพิ่มเติมเพื่อให้เข้าใจวิธีเพิ่มหรือลดปุ่มได้ง่ายยิ่งขึ้น

ขั้นตอนที่ 1. เข้าสู่บล็อกของคุณจากนั้นไปที่
'แม่แบบ > แก้ไข HTML > ดำเนินการ > ขยายเทมเพลตวิดเจ็ต'

---

ขั้นตอนที่ 2. กดปุ่ม 'Ctrl + F' บนคีย์บอร์ดแล้วสั่งค้นหาคำว่า
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>

หรือถ้าหาไม่พบก็ให้ลองเปลี่ยนไปค้นหา
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'


โดยจะพบว่าบริเวณข้างใต้โค้ดที่หาเจอนั้นจะมีโค้ดในบรรทัดถัดลงมาถูกเขียนเอาไว้ว่า
<data:post.body/>
ซึ่งโค้ดในบรรทัดนี้ก็คือเป้าหมายสำหรับการแก้ไขของเรา
(แต่ถ้าคุณหาโค้ดทั้งสองแบบที่ระบุไว้ไม่พบเลยก็ให้ค้นหา <data:post.body/> แล้วแก้ไขได้เลย)

---

ขั้นตอนที่ 4. ให้คัดลอกโค้ดของปุ่มแชร์ข้างล่างนี้ไปวางในตำแหน่งที่ต้องการ

โดยถ้าต้องการแสดงปุ่มเหล่านี้ไว้เหนือเนื้อหาบทความก็ให้วางโค้ดของปุ่มไว้ข้างบนเหนือ
<data:post.body/>
แต่ถ้าต้องการให้ปุ่มเหล่านี้ตั้งอยู่ในส่วนท้ายข้างใต้เนื้อหาบทความก็ให้นำโค้ดของปุ่มไปวางไว้ข้างใต้
<data:post.body/>

ซึ่งโค้ดของปุ่มแชร์ก็คือ
<!-- Social Sharing Button Group Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; padding: 8px 0 0; margin: 10px 0 0; overflow: hidden;'>
<div class='post-social-share-button'>

<!-- Facebook Share Button Start -->
<div style='float:left; padding:0 5px 0 0; width:60px; height:59px; overflow: hidden;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Share Button End -->

<!-- Googleplusone Share Button Start -->
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Googleplusone Share Button End -->

<!-- Twitter Share Button Start -->
<div style='float:left;padding:0 5px 0 0;margin-left:10px;'>
<a class='twitter-share-button' data-count='vertical' data-via='iassetme' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!-- Twitter Share Button End -->

</div>
</div>
<div style='clear:both;'/>
</b:if>
<!-- Social Sharing Button Group End -->

---

ขั้นตอนที่ 4. จากนั้นกดปุ่ม 'บันทึกเทมเพลต' แล้วลองเปิดบล็อกเพื่อดูผลลัพธ์

---

อธิบายเพิ่มเติมเรื่องวิธีเพิ่มหรือลดปุ่ม

เนื้อหาส่วนนี้เป็นการอธิบายให้เข้าใจวิธีเพิ่มหรือลดปุ่มละเอียดยิ่งขึ้น โดยถ้าหากใครที่ดูโค้ดเข้าใจแล้วก็ไม่ต้องสนใจข้ามไปได้เลยครับ

ถ้าสังเกตดูจะพบว่าในโค้ดข้างบนนี้ประกอบด้วยโค้ดของปุ่ม 3 ชนิด ซึ่งถูกแบ่งด้วยห้วข้อและการเว้นบรรรทัดดังข้างล่างนี้ โดยถ้าหากไม่ชอบปุ่มไหนก็ให้ลบโค้ดส่วนนั้นทิ้งไปได้เลย หรือหากต้องการเพิ่มปุ่มแชร์ของผู้ให้บริการเจ้าอื่นอีกก็ทำได้ด้วยวิธีเขียนสไตล์แบบเดียวกัน

Facebook Share เขียนด้วยโค้ดคือ
<!-- Facebook Share Button Start -->
<div style='float:left; padding:0 5px 0 0; width:60px; height:59px; overflow: hidden;'>
<a expr:share_url='data:post.url' href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
</div>
<!-- Facebook Share Button End -->

Googleplus Share เขียนด้วยโค้ดคือ
<!-- Googleplusone Share Button Start -->
<!-- Place this tag where you want the share button to render. -->
<div class="g-plus" data-action="share" data-annotation="vertical-bubble" data-height="60"></div>
<!-- Place this tag after the last share tag. -->
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
<!-- Googleplusone Share Button End -->

Twitter Share เขียนด้วยโค้ดคือ
<!-- Twitter Share Button Start -->
<div style='float:left;padding:0 5px 0 0;margin-left:10px;'>
<a class='twitter-share-button' data-count='vertical' data-via='iassetme' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<!-- Twitter Share Button End -->

---

สำหรับปุ่มของ Google Plu สามารถปรับลักษณะได้ตามลิงก์นี้ครับ
https://developers.google.com/+/web/share/