Blogger: เพิ่มปุ่มทวีตแบ่งปันลิงก์ไว้ในบทความ


วิธีสร้างปุ่มแบ่งปันลิงก์บนทวิตเตอร์ (Share a link on Twitter) ซึ่งจะปรากฎออกมาเมื่อเปิดอ่านบทความแบบเต็มทำได้ดังนี้


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


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

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


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


แบบที่ 1 ปุ่มทวีตแบบมีช่องนับจำนวนในแนวตั้ง (Tweet vertical button)



มีโค้ดคือ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="maxlayout">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>



แบบที่ 2 ปุ่มทวีตแบบมีช่องนับจำนวนในแนวนอน (Tweet Compact Button)



มีโค้ดคือ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="maxlayout">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>



แบบที่ 3 ปุ่มทวีตแบบไม่แสดงช่องนับจำนวน (Tweet Button without count)



มีโค้ดคือ
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right; margin-left:10px;'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="none" data-via="maxlayout">Tweet</a>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</div>
</b:if>



ขั้นตอนที่ 4. กำหนดค่าผู้ใช้ทวิตเตอร์เพื่อให้แสดงลิงก์แนะนำไปสู่หน้าที่คุณต้องการ
โดยแก้คำว่า
maxlayout
ที่อยู่ข้างใน
data-via="maxlayout"
ให้กลายเป็นชื่อผู้ใช้ทวิตเตอร์ที่ต้องการ

ตัวอย่างผลของการตั้งค่า data-via ก่อนผู้ใช้ล็อคอินสู่ทวิตเตอร์


ตัวอย่างผลของการตั้งค่า data-via หลังจากทวีตเสร็จแล้ว


ตัวอย่างการแก้ไขเช่น
ถ้าหากที่ตั้งของหน้าทวิตเตอร์คือ
https://twitter.com/maxlayout
ดังนั้นชื่อผู้ใช้ทวิตเตอร์ที่ต้องใส่ลงก็ไปคือ
maxlayout



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

Credit: http://www.anshuldudeja.com/2010/08/tweet-button-for-blogger-by-twitter.html

Post Status




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

Thanayut KINGRPG กล่าวว่า...

ขอบคุณครับ

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