เพิ่มปุ่ม facebook like ใน blogspot

Written By Aucharaporn Theemcle on วันพุธที่ 20 เมษายน พ.ศ. 2554 | 20:51

นี่ก็วันที่ 20 เข้าไปแล้วยังไม่ได้อัพเดท  ชวนเพื่อนเขียนบล็อกสักบทความ  ว่างแต่มาตอบคอมเม้นท์เท่านั้น   วันนี้จึงจำเป็นต้องบังคับให้ตนเองเขียนบทความแล้วหล่ะ   จับเนื้อหาวิธีการเพิ่มปุ่ม Facebook Like มาเพิ่มในเวบบล็อกของเรา   ซึ่งเป็นข้อคำถามของคุณ Sun_Pharma เพื่อนอีกหนึ่งคน  ที่เข้ามาถามคำถามนี้  อาจจะเป็นประโยชน์สำหรับเพื่อนคนอื่น ๆ ด้วย

เพิ่มปุ่ม facebook Like ใน blogspot

คุณ Sun_Pharma มักจะเป็นเพื่อนที่เข้ามากดปุ่ม Like ให้เสมอ  วันนี้เลยขอให้เป็นนายแบบให้ซะเลย  

วิธีแรกสำหรับคนชอบ windowslive writer เหมือนดิฉัน

เพิ่มปุ่ม facebook like ในบทความ แค่คลิ๊กเพิ่มปลั๊กอินแล้วไปดาวน์โหลดมาติดตั้ง คลิ๊กไม่กี่ทีก็เสร็จแล้วจ๊ะ

 เพิ่มปุ่ม facebook like ในบทความ

ทุกครั้งที่เขียนบทความขึ้นมาใหม่ ก็จะมีปุ่ม Facebook Like ปรากฏให้โดยอัตโนมัติทันที  แต่ถ้าหากใครใช้ windowslive writer ไม่ได้แล้วหล่ะก็ ต้องมาดูวิธีการถัดไปค่ะ

วิธีการที่สองนี้ เป็นการเพิ่ม code ในเวบบล็อกค่ะ 

ขั้นตอนแรก  เรามาสร้าง code  Facebook Like กันก่อนนะคะ  โดยเข้าไปเอาโค้ดที่ Like Button - Facebook developers

เพื่อปุ่ม Facebook like ใน blogspot

ปรับแต่งการแสดงผลของปุ่ม Facebook Like ตามชอบใจ

Url to like  : ใส่ url ที่ต้องการนำ ปุ่ม  facebook Like ไปใส่

Layout  stlye : รูปแบบการแสดงผล  ในขณะที่คลิ๊กเลือกเปลี่ยน จะมีตัวอย่างแสดงผลให้เราดูขวามือค่ะ

Show face : แสดงรูปภาพผู้เข้ามากด Like ด้วยหรือเปล่า หากต้องการก็ติ๊ก เครื่องหมายถูก

width ขนาดความกว้างของ ปุ่มแสดงผล

Verb to display : ข้อความที่ต้องการให้ปรากฏ

Font : รูปแบบตัวอักษร

Colour  scheme : สีพื้นของปุ่่ม Facebook Like

หลังจากปรับแต่งจนพอใจแล้วคลิ๊ก Get code

เพื่อปุ่ม Facebook like ใน blogspot

 

ขั้นตอนที่ 2 ให้เพื่อน ๆ copy code iframe นำไปวางในเวบบล็อกของเราค่ะ  โดย Login เข้า Blogger>การออกแบบ>แก้ไข html> ติ๊กขยายแม่แบบเทมเพลตวิดเจ็ต

เพิ่มปุ่ม facebook Like ใน blogspot

คลิีกปุ่ม ctrl+f หาโค้ด <data:post.body/> หรือ  div class='post-body entry-content' ใกล้ ๆ กันค่ะ  หลังจากนั้นวาง code ตามหลัง div class='post-body entry-content' เสร็จเรียบร้อยแล้วค่ะ บันทึกผล  แล้วไปดูการแสดงผลของบล็อกกันดูนะคะ   อย่ามัวผ่านเลยไป ไหน ๆ ก็ไหน ๆ ทดสอบกดปุ่ม Like ที่ชวนเพื่อนเขียนบล็อกก่อนก็ได้จ๊ะ 

37 comments:

tonghealth กล่าวว่า...

ไม่ได้แวะตั้งนานทักทายนะครับ

meesubandmeesuk กล่าวว่า...

สวัสดีช่วงปีใหม่ไทยค่ะคุณ tonghealth สุขภาพดีปีใหม่นะคะ :)

Sun_pharma กล่าวว่า...

You might like: ข้างล่างบทความคือ บทความที่สุ่มมาหรือครับ

บทความเก่าๆ ผมอยากให้มันสุ่มมาให้เห็นบ้าง เพราะบางทีลืมไปแล้ว ว่ามีบทความอยู่ ต้องทำอย่างไรบ้างคุณ meesubandmeesuk ? ;;)

meesubandmeesuk กล่าวว่า...

You might like เป็นบทความสุ่มที่แสดงเนื้อหา keyword เดียวกันหรือคล้ายกันกับบทความที่อ่่านปัจจุบัน ลองดูบทความนี้นะคะ สร้าง related posts เป็น รูปภาพน่า click แต่ถ้าหากอยากแสดงเป็นสุ่มบทความโดยไม่ต้องมีรูปภาพ และการแสดงผลก็สุ่มขึ้นมาโดยไม่ต้องอาศัย keyword แต่อย่างใด ต้องบทความนี้ค่ะ ชวนคนกลับไปดูบทความเก่า ๆ ด้วย Random Post

Sun_pharma กล่าวว่า...

ขอบคุณมากๆครับ :X

meesubandmeesuk กล่าวว่า...

ยินดีค่ะคุณ Sun_pharma :)

Sun_pharma กล่าวว่า...

หลังจากที่คุณ meesubandmeesuk บอก ผมจึงได้ลองเอาไปทำ ...ลองเข้าไปดูที่นี่ิครับ

สิ่งที่ควรทำ - ไม่ควรทำบนโลกออนไลน์

แล้วหากไม่รบกวน...ช่วยวิจารย์ เพิ่มด้วยว่าต้องปรับแก้ยังไงต่ออีกบ้าง ^^

ขอบคุณอีกครั้ง :X

toptentoyou.blogspot.com กล่าวว่า...

สวัสดีครับ

บทความดีๆ ทำให้คนเรามีความรู้มากมาย

meesubandmeesuk กล่าวว่า...

คุณ Sun_pharma คะ คุณมีความสามารถในการนำไปปรับใช้ได้ดีกว่าดิฉันที่เป็นคนนำเสนอบทความซะอีก :)) หลัก ๆ ในการปรับแต่งหน้าตาเวบบล็อกก็คือ เอาจุดสำคัญที่คนเข้ามาที่เวบบล็อกของเรา ก็คือข้อมูล ดิฉันคิดเองนะคะว่าคนอ่านคงไม่ได้มานั่งพิจารณาหน้าตาเวบบล็อกเพื่อให้คะแนนหรอก แต่เข้ามาหาสิ่งที่เค้าต้องการค้น เพียงแต่ว่าหน้าตาหากสะดุดตา หน้าตาเวบบล็อกดูแล้วสบายตา มันก็ดึงคนเข้ามาได้ แต่ถ้าทาแป้งหนามากไป แต่งมากไป บล็อกก็จะช้าแล้วก็อืด คนอ่านอาจจะไม่รอ เมื่อเค้าเข้ามาค้น เราก็หาทางนำเสนอข้อมูลที่คิดว่าเป็นประโยชน์ต่อผู้อ่านให้มากที่สุด แล้วก็เพิ่มช่องทางให้เค้าค้นเพิ่มเติมได้ เช่น บทความสุ่ม นั่นหล่ะ

Joe กล่าวว่า...

เข้าไปสร้างสร้าง code Facebook Like ตรงไหนครับ
ช่วยอธิบายตรงนี้ละเอียด ๆ ได้ไหมครับ

ขอบคุณครับ

meesubandmeesuk กล่าวว่า...

คุณ Joe ค่ะ ดิฉันใช้เป็นลิงค์แบบข้อความ (text link) สีเขียว ๆ ว่า Like Button - Facebook developers สำหรับเข้าไปเอาโค้ด facebook like ลองคลิ๊กผ่าน text ลิงค์เข้าไปดูสิคะ ปกติดิฉันจะใช้ text link แบบนี้ในการเขียนบทความค่ะ จะไม่ใช้ url ยาว ๆ ว่า http://developers.facebook.com/docs/reference/plugins/like/ แบบนี้ค่ะ เพราะมันเป็นผลดี สำหรับการค้นหาเวบบล็อกหรือบทความของเราผ่าน search engine เช่น google,yahoo,ฯลฯ เค้าเรียกว่ามีผลด้าน seo ค่ะ

Fhon SE Beginner กล่าวว่า...

เพิ่งทำ blog ฝากเนื้อฝากตัวด้วยน่ะค่ะ :)

>> http://i-amfon.blogspot.com/

meesubandmeesuk กล่าวว่า...

ยินดีต้อนรับนะคะคุณ Fhon SE Beginner

Baladas Mp3 กล่าวว่า...


Hello my sweet friend, congratulations, very good your blog. I'm Speaker of Argentina and I invite you to listen to the best romantic ballads of the world and my voice on my blog.This Saturday May 14th, I'll do a tribute to Vietnam and the Philippines with that beautiful music.I hope your visit.
A cordial greeting to you.
Beto.
http://baladasmp3.blogspot.com

iLobos กล่าวว่า...

ขอบคุณค้าบบบ...

meesubandmeesuk กล่าวว่า...

สวัสดีค่ะคุณ iLobos หากมีคนใช้บทความได้ประโยชน์แค่นี้ก็ยิ้มได้แล้วค่ะ ::)

myhit กล่าวว่า...

สวัสดีครับพี่ meesubandmeesuk
ผมกด getcode แล้วมนไม่ขึ้นโค็ดให้ครับ
มันขึ้นหน้าต่างข้อความนี้ครับ Only verified developers can be added as listed developers of this app.
ทำไงดีครับ

meesubandmeesuk กล่าวว่า...

สวัสดีจ้า myhit เป็นความผิดของพี่จริง ๆที่ไม่ได้อธิบายไว้ ก่อนจะใช้ app ของ facebook บางตัวต้อง ยืนยันตัวตน ก่อนจ๊ะ มี 2 วิธีให้ยืนยันใน facebook คือยืนยันโดยโทรศัพท์ และ เครดิตการด์ เลือกวิธีแรกแล้วกันนะ ไปที่ Confirm Your Phone Number แล้วเติมหมายเลขโทรศัพท์น้องลงไป หลังจากนั้นรอรับ sms แล้วก็เติมตัวเลขจาก sms ลงไปเป็นการยืนยันเสร็จสิ้น หลังจากนั้นจะใช้ app facebook like ได้แล้วจ๊ะ ทดลองดูก่อนนะคะ

ไม่ระบุชื่อ กล่าวว่า...

ลองทำตามดูแล้วครับ ไม่ได้เลย พอดีไม่มีความรู้ code ขอคำแนะนำด้วยจ๊ะ

Meesubandmeesuk กล่าวว่า...

อืม...ทำไงดีนะ ชื่อก็ไม่ได้ระบุจะได้ค้นตัวเจอบล็อกที่ต้องการความช่วยเหลือ เพื่อน ๆ คะ หากมีบล็อกก็แสดงความคิดเห็นเป็น profile ของตนให้ดิฉันตามเจอตัวด้วยนะจ๊ะ จะได้ตอบคำถามได้ง่าย ขึ้น เอ? ว่าแต่คุณคนไม่ระบุชื่อ ดำเนินการตรงไหนแล้วบ้าง ตอนที่ขอรับ code มีการแสดงผลไมคะ

maxky กล่าวว่า...

พี่ครับ ผมต้องการที่คอมเม้นท์ เฟชบุค ในบล็อก ทำอย่างไรดีครับ ลองทำดูแล้ว ทำไม่ได้เลย ขอคำปรึกษาหน่อยสิครับ ขอบคุณครับ

meesubandmeesuk กล่าวว่า...

น้อง maxky คะ ลองอ่านบทความตรงนี้ดูก่อนนะเพิ่มกล่อง เพิ่มกล่อง facebook comment ในเวบบล็อก

หาก ไม่ได้ติดตรงไหน ถามได้นะจ๊ะ อืม ...แวะไปดูที่เวบบล็อกมา น้อง maxky ลองใช้ windowslive writer เขียนบทความหรือยังจ๊ะ พี่แนะนำว่า มันจะง่ายนะ ลองอ่านบทความนี้ เครื่องมือเขียนบล็อก offline แล้วดาวน์โหลดไปทดลองใช้นะคะ ดู ยินดีตอบทุกคำถามนะคะ อาชีพหลักพี่คือแม่พิมพ์ของชาติ ชอบมากมายที่เด็ก ๆใฝ่หาความรู้ค่ะ

maxky กล่าวว่า...

ขอบคุณนะครับ

maxky กล่าวว่า...

พี่ครับ ผมกด App แล้วเขาให้ใส่รหัสยืนยันเลยอ่ะครับ เรื่องนี้น่าจะเป็นผลมาจากตอนที่ผมเข้าไป app ในเฟชบุคอีก app นึงแล้ว ก็เคยใส่เบอร์โทรศัพท์ไปแล้วรอบนึง แต่ก็ไม่เห้นจะมีข้อความส่งมาเลย พอวันนี้จะไปใส่เบอร์โทรศัพท์ app มันก็ขึ้น ให้ใส่รหัสเลย ซึ่งผมยังไม่ได้รับรหัส ผมลองเอาเฟชบุคเพื่อนไปทำ ก็ทำไม่ได้ ทำอย่างไรดีครับ .......(จะดีมั้ย ที่ผมอยากไห้พี่ทำไห้ ถ้าพี่จะทำไห้ผมจะเอา Gmail และ รหัส ให้พี่ช่วยผมหน่อย ถือสะว่าผมจนปัญญา เลยอยากไห้พี่เข้ามาทำไห้ผมหน่อยนะ ถ้าได้ผมจะดีใจเป็นอย่างมาก)

Meesubandmeesuk กล่าวว่า...

ยินดีจ้า

meesubandmeesuk กล่าวว่า...

ขอ account ของ facebook นะจ๊ะ พร้อม password แล้วค่อยไปเปลี่ยนเอาจ๊ะ aucharapon@yahoo.com

gigi rose กล่าวว่า...

หวัดดีค่าเจ้าของบล็อก มาแอบอ่านอยู่เรื่อยๆ เข้าใจบ้างไม่เข้าใจบ้าง ตอนนี้โอ๋แอบทําบล็อกอยู่ บอกตรงๆ ไม่มีความรู้เรื่องคอมเลย แย่จัง แต่ดันสะเออะจะทํา เฮ้อ!! ขอบคุณนะที่นําเสนอสาระเต็มไปหมด จะค่อยๆ มาอ่านและหัดทํานะจ๊ะ

Meesubandmeesuk กล่าวว่า...

สวัสดีค่ะ :)) gigi rose ดิฉันก็เหมือนกันค่ะ ไม่มีความรู้แต่ก็สะเออะมาเขียนบทความเกี่ยวกับเรื่องบล็อก เอาเถอะน่า .... ผิดบ้าง พลาดบ้าง เรียนรู้ไปเรื่อย ๆ มันคงจะ work สักวันหล่ะน๊า ....จริงป่ะ ? :)

Thanakrid Excellent กล่าวว่า...

สวัสดีครับ และขอขอบคุณมากครับสำหรับ คำแนะนำต่างๆในนี้มีประโยชน์มากๆ ครับ

Meesubandmeesuk กล่าวว่า...

ยินดีค่ะคุณ Thanakrid Excellent

Wachirakiat Baothongchan กล่าวว่า...

ทำมาจนถึงขั้นตอน Get Code แล้วคับ แต่มันไม่ขึ้นหน้าตาเหมือนตัวอย่างอะคับ โค้ดที่มันให้เลือกไม่ใช่ iframe แต่เป็น html5 มันคือไรหราคับ แล้วสามารถคัดลอกโค้ดที่ว่านี้ไปวางในแก้ไขแม่แบบได้ปะคับ แล้ววางไว้บนสุดด้วยปะคับ รบกวนผู้รู้ด้วยนะค๊าพ

meesubandmeesuk กล่าวว่า...

คุณ Wachirakiat Baothongchan คะ สังเกตว่าตอนคุณสร้าง code คุณติีกเครื่องหมายถูกตรง send เอาเครื่องหมายถูกตรงหน้า send ออกมันก็จะสร้าง code iframe ให้ค่ะ

Wachirakiat Baothongchan กล่าวว่า...

ขอบคุณมากค๊าพ

meesubandmeesuk กล่าวว่า...

:) ยินดีนะคะ Wachirakiat Baothongchan

Little Sewing House By Nong R.S. กล่าวว่า...

ขอบคุณมากนะค่ะ ได้ไปวางในบล็อก http://littlesewinghousebynong.blogspot.com/
แล้วค่ะ

0 กล่าวว่า...

ขอบคุณมากครับ

http://sport-thai.blogspot.com/

wanpen nartakong กล่าวว่า...

ทั้งสวยเก่งยังใจดีจังเลยปรบมือให้ เรายังไม่ไปไหนเลย แก่แล้วก็งี้แหละตามไม่ทัน
อยากทำกับเขามั่ง อยากขายของออนไลน์ แต่ไม่ค่อยมีความรู้ ยังไม่มีใครเข้าไปคอมเมนทเลย
ทำมาเป็นเดือนแหละ

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