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

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

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

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

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

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/