วิธีสร้างปุ่มแชร์สำหรับเว็บไซต์ของคุณทีละขั้นตอน

ปุ่มแบ่งปันทางสังคมเป็นองค์ประกอบที่ขาดไม่ได้ของทุกเว็บไซต์ ไม่ว่าจะเป็นบล็อกส่วนตัวหรือบล็อกธุรกิจ พอร์ตโฟลิโอออนไลน์ หรือโครงการอีคอมเมิร์ซ ปุ่มโซเชียลช่วยให้ลูกค้ากระจายคำเกี่ยวกับเนื้อหาของคุณบน Facebook, Twitter, Instagram หรือ Pinterest ได้อย่างง่ายดาย ในขณะที่ใช้ปุ่มแชร์ทางสังคมแบบง่ายๆ ในทรัพยากรบนเว็บของคุณ คุณสามารถขยายการเข้าถึงได้อย่างมากและต้อนรับลูกค้าใหม่ให้มาที่ไซต์ของคุณเพื่อค้นหาเนื้อหาหรือสินค้าที่มีค่า พลังของเครือข่ายโซเชียลมีเดียไม่ควรถูกมองข้ามในทุกวันนี้ หากไม่พบธุรกิจบน Facebook หรือ Instagram ก็จะพลาดโอกาสในการเข้าถึงกลุ่มเป้าหมายและทำการตลาดสินค้าและบริการกับผู้คนจำนวนมากขึ้น ตามชื่อที่แนะนำ ปุ่มแชร์ทางสังคมทำให้เนื้อหาของคุณแชร์บนเว็บได้มากขึ้น เป็นเรื่องปกติที่ผู้ใช้สมัยใหม่จะแชร์ลิงก์ไปยังผลิตภัณฑ์ที่ต้องการบนหน้า Facebook ของตน ทุกโพสต์โซเชียลสามารถเข้าถึงได้โดยผู้ติดตามที่มีความสนใจและความชอบเหมือนกันกับลูกค้าของคุณ

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

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

วิธีสร้างปุ่มแชร์ทีละขั้นตอน

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

หลักสูตรการออกแบบเว็บไซต์

• ชั้นเรียนเขียนโค้ดออนไลน์สำหรับการเรียนรู้ที่บ้าน
• ครบชุด Photoshop Mastery

ในกรณีที่คุณไม่ต้องการจัดการกับโค้ดขนาดใหญ่ที่แออัดและการปรับแต่งรายละเอียดที่ซับซ้อน บทแนะนำนี้เหมาะสำหรับคุณ แม้แต่มือใหม่ HTML ก็ยังพบว่าง่ายต่อการติดตาม คาดเข็มขัดนิรภัยแล้วเริ่มกันเลย!

ขั้นตอนที่ 1

สิ่งแรกที่คุณควรทำคือเปิดไฟล์ HTML แล้ววางโค้ดด้านล่าง

<a onclick="Share.facebook('URL','TITLE','IMG_PATH','DESC')"> {sharing is sexy}</a>
<a onclick="Share.twitter('URL','TITLE')"> {sharing is sexy}</a>
หรือ
<a href="http://www.facebook.com/sharer/sharer.php?s=100&
p%5Btitle%5D=TITLE&p%5Bsummary%5D=DESC&p%5Burl%5D=
URL&p%5Bimages%5D%5B0%5D=IMG_PATH" target="_blank" onclick="return Share.me(this);">{sharing is sexy}</a>
<a href="https://twitter.com/intent/tweet?original_referer=
http%3A%2F%2Ffiddle.jshell.net%2F_display%2F&text=TITLE&url
=URL" target="_blank" onclick="return Share.me(this)">{sharing is sexy}</a>

ขั้นตอนที่ 2

ตอนนี้สร้างไฟล์ js ที่มีข้อมูลดังกล่าว:

แค่นั้นแหละ :) วิธีง่ายๆ ในการติดตามสถิติของการคลิกปุ่มแชร์ที่วางอยู่บนหน้าการแบ่งปันโดยตรง ปัญหานี้แก้ไขได้ด้วยความช่วยเหลือของตารางในฐานข้อมูลและ ajax อย่างง่าย:

popup: function(url,soc) {
window.open(url,'','toolbar=0,status=0,width=626, height=436');

}

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

แน่นอน ตัวอย่างนี้ค่อนข้างจะพื้นฐานเล็กน้อย แต่มันเป็นจุดเริ่มต้นที่ดีในการเริ่มสร้างปุ่มแชร์สุดเจ๋งของคุณเอง ปล่อยมันไป!

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

วิธีเพิ่มปุ่มแชร์บน Facebook

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

หากต้องการเพิ่มปุ่มนี้ในเว็บไซต์ของคุณ คุณต้องไปที่หน้านี้ก่อน

ตอนนี้ มาดูกันว่าฟิลด์บางฟิลด์ในหน้าการตั้งค่าหมายถึงอะไร

• URL to Like - ฟิลด์นี้จะเพิ่มเพจของไซต์ที่เราต้องการแชร์บน Facebook
• ความกว้าง - ความกว้างของปุ่มถูกตั้งค่าไว้ที่นี่
• กริยาที่จะแสดง - ที่นี่เราสามารถเลือกข้อความในปุ่ม "ถูกใจ" หรือ "ฉันแนะนำ"
• แบบแผนสี - ที่นี่คุณสามารถเลือกการออกแบบปุ่มสำหรับไซต์สว่างหรือมืด
• แบบอักษร - เลือกแบบอักษรสำหรับป้ายกำกับปุ่ม

หลังจากที่เราเลือกการตั้งค่าแล้ว ให้ค้นหาปุ่ม "รับโค้ด" แล้วคลิก ถัดไป หน้าต่างที่มีรหัสจะปรากฏขึ้น จำเป็นต้องแทรกในสองขั้นตอนด้วย:

ใส่โค้ดหลังแท็ก <body>

รหัสสำหรับแสดงปุ่ม:

วางรหัสนี้ในตำแหน่งที่ควรแสดงปุ่มจาก facebook:

วิธีเพิ่มปุ่มแชร์ Twitter

ขณะเพิ่มปุ่มแชร์ของ Twitter ลงในเว็บไซต์ของคุณ มีหลายสิ่งที่นักพัฒนา Twitter แนะนำให้คุณจำไว้:

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

ในการเพิ่มปุ่มแชร์ของ Twitter ให้ทำดังต่อไปนี้:

• ไปที่ publish.twitter.com แล้วแตะที่ปุ่ม Twitter
• เลือกประเภทปุ่มแชร์ของ Twitter ที่คุณต้องการเพิ่มลงในไซต์ของคุณ
• ปรับทวีตและข้อความที่จะมีในขณะที่พูดถึง @account ที่คุณต้องการพูดถึง
• เมื่อเสร็จแล้ว ให้คัดลอกและวางโค้ดลงในไซต์ของคุณ

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