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/

Post Status




4 ความคิดเห็น:

DEKSOI12 กล่าวว่า...

ทำไมผมเอาไปใส่แล้ว ทวิส กับ g+ ขึ้นนะ.. แต่ facebook มันไม่ขึ้น มันขึ้นแต่ตัวหนังสือเขียนว่า share พื้นหลังหรืออะไรที่ทำคนรู้ว่าเป็น facebook มันไม่ขึ้นน่ะครับ ช่วยตอบผมที่นะครับ ผมลองจากหลายๆที่ก็เป็นเหมือนกัน ผมต้องใส่โค๊ดอะไรก่อนหรือป่าวครับ..

Max กล่าวว่า...

สคริปต์ของปุ่ม Facebook Share นั้นน่าจะถูกกำหนดให้เป็นแบบเดียวกันอยู่แล้วครับ เช่นเดียวกับปุ่ม Facebook Share ที่กำลังแสดงอยู่บริเวณด้านข้างบล็อกอันนี้ โดยปัญหาที่พบนั้นอาจเกิดจากตัวเทมเพลทครับ

อาร์ตตะลอน กล่าวว่า...

จะลองดูครับ

ปุ่มแชร์ fb อันเดิมของผม บางทีมันก็ขึ้นปุ่มแบบสีฟ้า บางทีก็ขึ้นแค่ข้อความว่า share งงมาก

http://athlons.blogspot.com

Unknown กล่าวว่า...

ทำตามแล้วไม่มีอะไรเกิดขึ้นเลย

แสดงความคิดเห็น

หมายเหตุ: มีเพียงสมาชิกของบล็อกนี้เท่านั้นที่สามารถแสดงความคิดเห็น