การ เพิ่มปุ่ม social share ในแนวขวางด้านล่างหัวข้อบทความ

Written By Aucharaporn Theemcle on วันอาทิตย์ที่ 29 กันยายน พ.ศ. 2556 | 06:12

ปกติจะเลือกใช้ Template สำเร็จรูปในการปรับแต่ง blogger เพราะไม่จำเป็นต้องไปปรับแต่งอะไรมากมาย   แค่หารูปแบบที่ตนชอบ  เรื่องตกแต่งยกให้เป็นหน้าที่ของเหล่านักบรรดาออกแบบไป   แต่บางครั้งได้ template ที่ชอบแต่ก็ยังขาดอะไรไปบ้าง  มันก็เป็นเรื่องธรรมดา  เหมือนวันนี้ Template blog ที่ใช้มานาน พึ่งนึกได้ว่า มันขาด Google + share ก้จะให้ขาดตัวนี้ไปได้ยังไง   เมื่อก่อนทำไมนึกไม่ถึงก็ไม่รู้   ทำ blog ยังไงก็ต้องแชร์ผ่าน Google + เพราะเราอาศัย Google ในการเก็บข้อมูลและนำทางผู้ชมเข้า blog เรานี่นา

ปุ่ม social share

หลังจากค้นหามาได้พักใหญ่จึงไปเจอเข้ากับปุ่มแชร์ที่มี social share ที่คนไทยใช้กัน  เช่น twitter ,facebook,pinterest  ,google plus ซึ่งถือว่าเป็น social พื้นฐานในไทยก็ว่าได้  เห็นแล้วนำมาแปะเข้าให้ที่บล็อกของตน เอาไว้ใต้หัวข้อบทความค่ะ  ตามมาดูวิธีการนำ ปุ่ม social share เหล่านี้แปะใต้หัวข้อบทความใน blogger กันคะ

เพิ่ม ปุ่ม share ใน blogger

1. หลังจาก Login เข้าใช้งาน blogger มาที่เมนู แม่แบบ  เพื่อความแน่ใจ  ให้ สำรองข้อมูล ก่อนการแก้ไข code ใน blogger ก่อนค่ะ

2. หลังจากสำรองข้อมูลเสร็จ แล้ว คลิ๊ก แก้ไข HTML

เพิ่ม ปุ่ม share ใน blogger

3. กด  คลิ๊ก crtl+f แล้วค้นหา code   ตัวนี้ <data:post.body/>

เมื่อเจอโค้ดดังกล่าว ให้คัดลอก โค้ดที่อยู่ด้านล่างนี้ไปวางไว้ก่อน <data:post.body/>



<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;http://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Google +1 -->
<script type='text/javascript'>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Google +1 -->
<div style='float:left;'>
<g:plusone annotation='bubble' expr:href='data:post.url' size='medium'/>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<!-- Pinterest Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='pin-wrapper' style='float: left; margin:0px 0px 0px 30px; width:44px;'>
<a data-pin-config='beside' data-pin-do='buttonPin' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'><img src='//assets.pinterest.com/images/pidgets/pin_it_button.png'/></a>
<span style='margin-left:-44px;'><a data-pin-config='beside' data-pin-do='buttonBookmark' href='//pinterest.com/pin/create/button/' style='outline:none;border:none;'/></span>
</div>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'></script>
<style type='text/css'>
#pin-wrapper > a {background-image:none !important;}
</style>
</b:if>
<!-- Pinterest End -->
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End –>



4. ต่อจากนั้นคลิ๊ก บันทึก แล้วลองเข้าไปดูบทความในเวบบล็อกได้เลยค่ะ เจอหรือยังคะ ปุ่ม social share  อ้อ ! บาง template จะปรากฏ <data:post.body/>  2 แห่ง ใน template วาง code ไว้ <data:post.body/> ตัวที่ 2 ค่ะ



 



ปล.หากต้องการให้ปุ่ม social share ปรากฏอยู่ด้านล่างของบทความ ให้วางโค้ดไว้หลัง <data:post.body/>  ค่ะ





ที่มา http://www.bloggersentral.com/

8 comments:

Analysis lens กล่าวว่า...

พี่คับ ผมเจอ 3 ตัว ทำไงดี

Aucharaporn Theemcle กล่าวว่า...

ทดลองวางทีละตัวก็ได้ค่ะ แล้ว publish ดู ไม่ได้ค่อยลบออก

Athlons Thunderbird กล่าวว่า...

ลองทำแล้วไมได้ครับ มัน error

Athlons Thunderbird กล่าวว่า...

ไม่ได้ครับ มันขึ้น
ไม่สามารถโหลดตัวอย่างเทมเพลตได้: เกิดข้อผิดพลาดในการแยกวิเคราะห์ XML บรรทัดที่ 733 คอลัมน์ 45: The string "--" is not permitted within comments.

ของผมมี 3 ตัว

Ratchadaporn Niemloy กล่าวว่า...

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

จัคร์ กล่าวว่า...

code ไม่มี ทำงไงดีครับ

RoseBlossa กล่าวว่า...

can not kha

Athlons Thunderbird กล่าวว่า...

คิดว่า code ผิดนะครับ copy ลงไป มันก็ขึ้นตัวแดงแล้ว

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