กาลครั้งหนึ่งนานมาแล้วผมได้ลองหาวิธีเอาปุ่มแชร์ Social Network แบบลอยอยู่ข้าง ๆ มาลองใส่ครับ ซึ่งก็ลองใช้ Javascript จากหลาย ๆ ที่เอามาแปะ แต่ก็ใช้ไม่ได้สักที (ไม่รู้เพราะผมยังใช้ Exteen ไม่ค่อยเก่งหรือเปล่า TT)
 
สุดท้ายวันนี้อยากได้มาก เลยไปเสาะหาวิธีทำมาจนได้ ซึ่งหน้าตาของบาร์จะเหมือนกับที่เห็นด้านข้างบลอคนี้เลยครับ
 
ซึ่งตัวโค้ดต้นฉบับนั้นผมไม่ได้เขียนเองนะครับ แต่ไปเอามาจากเว็บไซต์ของคุณ Don Caprio เป็นบทความสอนใส่บาร์ปุ่มแชร์ Social Network (Facebook, Twitter, Google Plus, StumbleUpon, Digg) ใน Blogger ครับ
 
ถ้าต้องการโค้ดต้นฉบับสามารถเข้าไปเว็บไซต์ด้านบนได้เลนะครับ ส่วนด้านล่างนี้จะเป็นโค้ดที่ผมนำมาปรับแต่งเพิ่มเติม + ทำให้ Responsive ครับ
 
Responsive คืออะไร ทำไมต้อง Responsive?
Responsive Web Design เป็นการทำให้หน้าหน้าเว็บย่อตามขนาดจอได้ครับ ซึ่งเป็นเทคนิคที่เริ่มใช้กันแพร่หลายตั้งแต่ช่วงปี 2012 ครับ
 
สำหรับท่านที่อยากรู้เพิ่มเติมเกี่ยวกับ Responsive Web Design สามารถอ่านได้จากบทความ ทุกอย่างที่คุณควรรู้เกี่ยวกับ Responsive Web Design !!
 
สำหรับปุ่มแชร์ Social network ตัวนี้ ถ้าเราย่อจากแล้วหน้าตาจะกลายเป็นแบบนี้ครับ
จะเห็นว่าเกิดปัญหาปุ่ม Share มาบังเนื้อหาเว็บไซต์ครับ (ส่วนนึงเพราะส่วน Content ในบลอคนี้ปรับให้กว้างขึ้นกว่าชาวบ้านด้วยครับ กลัวแคบ ๆ อ่านกันไม่สะใจ
 
ผมก็เลยแก้ปัญหาด้วยเทคนิค Responsive ทำให้เวลาย่อขนาดจอ ปุ่มแชร์จะไปเรียงแนวนอนเป็นบลอค ๆ เหนือ Content แทนครับ ตามรูปด้านล่างเลย
 
 
 
อาจไม่ค่อยสวยยังไงก็ต้องขออภัยด้วยครับ T^T ซึ่งถ้าใครอยากให้ปุ่มไปเรียงกันใต้บทความก็ทำได้เหมือนกันครับ อ่านรายละเอียดในส่วนต่อไปได้เลย
 
วิธีใส่ปุ่ม Share Social เลื่อนตามจอ + Code
1. ในส่วน Admin ของ Exteen ให้ไปที่ Theme > Widget ครับ
 
2. ลาก block Custom Code อันไหนก็ได้ที่ยังไม่ได้ใช้ มาใส่ในส่วนที่ต้องการ
 
 
(ในบลอคนี้ผมใส่ตรง Top Menu ครับ ซึ่งเวลามันเป็น Responsive ปุ่มแชร์จะไปเรียงกันเหนือบทความ ถ้าเราใส่ใน Bottom Menu เวลา Responsive ปุ่มแชร์จะไปเรียงกันใต้บทความแทน)
 
3. กดเครื่องหมาย ดินสอ ของ block Custom Code ที่เราลากมาใส่ จะมี pop up มาให้ใส่โค้ด ใส่โค้ดตามนี้เลย:
<div id='pageshare'>
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div></div> 
4. เสร็จแล้วกด OK เพื่อปิด pop up แล้วอย่าลืมกด Save ในหน้า Widget ครับ
 
5. หลังจากใส่ HTML ปุ่มเรียบร้อย ถ้าเข้าหน้าบลอคจะเห็นปุ่ม Share ขึ้นตรงส่วนที่เราใส่ Widget เข้าไปครับ เราจะมาทำให้มันลอยอยู่ด้านข้างด้วย CSS
 
ไปที่เมนู Theme > CSS Editor เลย
 
แล้วใส่โค้ดนี้ไว้ล่างสุดเลยครับ:
 
/*-------- Social --------------*/
#pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solid #ccc; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 5px 5px;z-index:99; -webkit-box-shadow:  0px 0px 2px 2px #cccccc; box-shadow:  0px 0px 2px 2px #cccccc;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

 
6. ถ้ารีเฟรชดูจะเห็นว่าเราได้ปุ่มแชร์ลอยอยู่ด้านข้างแล้ว ถ้าเราอยากให้มัน Responsive ด้วย ก็เพิ่มโค้ดด้านล่างนี้ต่อจากเดิม ใน CSS Editor ครับ (ถ้าไม่ต้องการความสามารถ Responsive ก็ไม่ต้องใส่คร้าบ)
 
@media screen and (max-width: 1024px) {
  #pageshare { position: static; float: none; margin: 10px auto; }
  #pageshare .sbutton { float: none; display: inline-block; }
โค้ดนี้เข้าใจง่ายมากครับ เป็นการเช็คว่าถ้าคนเข้าเปิดบลอคบนหน้าจออะไรสักอย่าง (คอม, มือถือ, ไอแพด = screen) และขนาดจอสูงสุด 1024px จะใส่ style เพิ่มเข้าไปเพื่อทำให้กล่องแชร์เราเลิกลอยครับ
 
แค่นี้ก็จะได้กล่องแชรฺ์ใช้ในเว็บเราเองแล้วครับ มีประโยชน์มากเพราะเราจะเห็นตัวเลขด้วยว่ามีคนแชร์บทความของเราไปเท่าไรแล้วครับ
 
หากใครเอาไปใช้แล้วมีปัญหาอะไรสอบถามได้เลยนะคร้าบ ^^

Comment

Comment:

Tweet

ผมหามาตั้งนาน ขอบคุณคับ

คาสิโนออนไลน์ holiday palace gclub

#18 By britrocker1234 on 2015-11-14 03:35

นี่แหละใช่เลยยย

 

 

 

--------------------------------------------------------------------------------

บาคาร่าออนไลน์  / คาสิโน / genting club

#17 By britrocker1234 on 2015-09-23 23:33

ขอบคุณคับ

#16 By โฆษณา ธุรกิจ ออนไลน์ (1.1.192.255|1.1.192.255) on 2015-07-14 14:07

#15 By โฆษณา (1.1.192.255|1.1.192.255) on 2015-07-14 14:07

ขอบคุณมากค้าาา
บาคาร่า
บาคาร่าออนไลน์

#14 By pimmy (183.89.81.148|183.89.81.148) on 2015-06-08 14:07

ตำแหน่งนี่เราสามารถปรับแต่งได้มั้ยครับ รู้สึกว่ามันต่ำไป หรือต้องแก้ css เอาเอง อยากให้อยู่ตรงกลางด้านซ้าย หรือด้านขวา ไรงี้อะครับ

#13 By ของฟรี (110.170.246.14|unknown, 110.170.246.14) on 2014-06-12 11:06

Hot! Hot! Hot! Hot! Hot! ขอบคุณมากๆนะค้า:)

#12 By llo-oll on 2014-03-22 07:03

ขอบคุณสำหรับความรู้ครับผม Hot! Hot! Hot!

#11 By boatchan on 2014-03-06 07:48

thankkkkkkkk....

#10 By ultaman_ae on 2013-09-05 16:17

ขอบคุณหลายๆๆ
@narathipo วิธีแก้อีกอย่าง คือ กด shift Ctrl F4 (หรือ F5 จำไม่ได้) คร้าบ เป็นการลบ Cache แล้วรีเฟรชใหม่

#8 By Woratana N. on 2013-03-14 13:45

อ่อครับ ผมเพิ่งเข้ามาดู มันเปลี่ยนให้แล้ว sad smile
ผมสังเกตุมาหลายครั้งแล้ว เวลาแก้โค้ด CSS ของ exteen แล้วรีเฟรชเบราเซอร์ดู มันจะไม่เปลี่ยนให้ทันที ทั้งที่คลิกรีเฟรชเป็นสิบรอบแล้ว มันค่อนข้างดีเล ใช้เวลาหลายชั่วโมงหรือเป็นวันเลยกว่าจะเปลี่ยนให้ cry ไม่แน่ใจว่าเป็นที่ตัว exteen เอง หรือว่าเป็นที่เบราเซอร์ของผมเองหรือเปล่า open-mounthed smile  แต่ตอนนี้เปลี่ยนเรียบร้อยแล้วครับ confused smile ขอบคุณสำหรับความรู้ดีๆที่เอามาแบ่งปันกันนะครับ surprised smile big smile double wink Hot! Hot! Hot!

#7 By บุรุษนิรนาม on 2013-03-13 22:18

@narathipo ลองรีเฟรชหลาย ๆ รอบครับ บางที Browser แคช CSS ไว้มันเลยไม่ยอมเปลี่ยนครับ (จริง ๆ เปลี่ยนแล้ว) open-mounthed smile

#6 By Woratana N. on 2013-03-13 15:44

จริงๆแล้วผมลองทดลองทำดูแล้วติดปัญหาอย่างนี้ครับ sad smile
ตอนใส่โค้ดปุ่มแชร์ Social ใน widget แล้ว save พอมาดูมันก็ขึ้นที่ไซต์บาร์ด้านขวาอยู่ครับ
แต่พอจะทำให้มันเป็นปุ่มลอยอยู่ด้านข้าง พอใส่โค้ดใน CSS ตอนคลิกปุ่ม Preview ดู มันก็โชว์ลอยขึ้นมาอยู่ด้านซ้ายมือ แต่มันจะโชว์แต่ twitter ส่วน facebook กับ google+ มันไม่โชว์ แล้วพอลองกด save แล้วรีเฟรชเบราเซอร์ดู มันก็ไม่เห็นมีอะไรเปลียนแปลง คือมันยังอยู่ที่ไซต์บาร์ด้านขวาเหมือนเดิม โดยที่ไม่ไปลอยมาอยู่ที่ด้านซ้าย ส่วนโค้ด Responsive อันสุดท้ายมันเวิร์คอยู่ครับ พอผมรีไซท์หน้าจอเหมือนที่ท่าน @limitblog บอกไว้ มันก็จะปรับให้จริงๆ แต่ดูได้แค่ตอนที่คลิก Preview นะครับ พอคลิก save แล้วมาดู มันก็กลายเป็นแค่ไอคอนปุ่มแชร์ Social ที่ใส่ในไซด์บาร์ด้านขวามือของบล็อกผมเท่านั้นเองครับ ตอนนี้เลยแก้โค้ดใหม่ใ้ห้ตัวบอกจำนวนคลิกอยู่ทางด้านขวามือของปุ่มแชร์แทน open-mounthed smile

#5 By บุรุษนิรนาม on 2013-03-13 14:24

@narathipo เรื่องไอคอนไม่ขึ้นอันนี้ไม่ชัวร์นะครับ ใครลองแล้วติดปัญหาอีกบอกได้ครับ ><
ส่วนเรื่อง Responsive นี่ถ้าหน้าจอ 1024 มันจะขึ้นอัตโนมัติเลยครับ ซึ่งถ้าบลอคเรา content เล็กกว่านั้นแล้วมันไม่บัง ก็ไปเปลี่ยน 1024 เป็นขนาดหน้าจอที่มันจะบังก็ได้ครับ
@limitblog  หามานานแล้วไม่เจอครับ เลยไปเสาะหามาใช้เองซะเลย

#4 By Woratana N. on 2013-03-13 13:32

จ๊าบ !! ดูแล้วทำให้บล๊อกหล่อขึ้นเลยนะเนี่ยHot! Hot! Hot!
@narathipo  แนะนำให้ resize browser ดูครับเพราะท่าน @designil เขียนไว้ที่ 1024px นะครับ :D

#3 By limitblog on 2013-03-13 10:39

พิมพ์ผิดครับ จะบอกว่า "เห็นมันไม่เปลี่ยนเป็นแบบ Responsive" cry

#2 By บุรุษนิรนาม on 2013-03-13 06:21

ขอบคุณสำหรับความรู้ครับ open-mounthed smile Hot! Hot! Hot!
ผมลองดูแล้วตอน Preview ดูได้ีครับ แต่มันโชว์เฉพาะ twitter ไม่โชว์ facebook กับ g+ แล้วตอนกด save แล้วรีเฟรชหน้าเบราเซอร์ดู เห็นมันไปเปลี่ยนเป็นแบบ Responsive ก็เลยแก้โค้ดใหม่ ไม่ทำแบบ Responsive ทำเป็นไอคอนเล็กๆบอกจำนวนตามหลังแทน sad smile

#1 By บุรุษนิรนาม on 2013-03-13 06:19

Code Here.