สวัสดี, ผู้อ่านที่รักเว็บไซต์บล็อก ตามที่คุณอาจเดาได้จากชื่อเรื่องแล้วเราจะพูดถึงปุ่มโซเชียลที่เรียกว่าซึ่งสามารถช่วยดึงดูดบทความมายังเว็บไซต์ของคุณได้อย่างจริงจังด้วยการผสมผสานระหว่างสถานการณ์และ คุณภาพสูงบทความนั้นมีผู้เยี่ยมชมจำนวนมากจากเครือข่ายโซเชียลและบริการ
สัญญาณโซเชียลก็ถูกนำมาพิจารณาด้วย เครื่องมือค้นหาเมื่อจัดอันดับเว็บไซต์ของคุณ ปริมาณมากแบ่งปันไปยังบัญชีคุณภาพบน Twitter, Google+, Facebook (อาจเป็นไปได้ที่ VKontakte และเครือข่ายอื่น ๆ จะถูกนำมาพิจารณาด้วย) สามารถช่วยให้คุณเพิ่มขึ้นได้ จำนวนที่แน่นอนขั้นที่สูงขึ้นและบางทีอาจเข้าสู่ด้านบนและอยู่ที่นั่นหาก ปัจจัยด้านพฤติกรรมจะไม่ทำให้คุณผิดหวัง
โดยทั่วไป บริการที่ให้สคริปต์ (ปุ่ม) สำหรับการแชร์เนื้อหา โซเชียลมีเดียมีมากมายบนอินเทอร์เน็ต แต่ไม่ใช่ทั้งหมดที่ควรเชื่อถือได้ (พวกเขาสามารถใช้งานคุณได้อย่างง่ายดายหรือในทางอื่นด้วยเหตุผลที่ไม่ดี) และพวกเขาสามารถ "แขวนไซต์" ได้ง่ายๆ หากโค้ดของพวกเขาไม่ได้อยู่ในตำแหน่งที่ดีและความสามารถในการประมวลผลของเซิร์ฟเวอร์ไม่มีประสิทธิภาพมากนัก แม้ว่าจะมีตัวเลือกที่เหมาะสมที่ปราศจากข้อบกพร่องเหล่านี้ แต่ฉันได้ระบุไว้ในตอนท้ายของเอกสารนี้
นอกจากนี้ยังสามารถแสดงจำนวนการแชร์ไปยังเครือข่ายโซเชียลเฉพาะบนปุ่มได้ ยิ่งไปกว่านั้น โพสต์ทั้งหมดจะถูกนำมาพิจารณา ไม่ใช่เฉพาะโพสต์ที่สร้างโดยใช้บล็อกนี้ (ข้อมูลถูกโหลดผ่าน API) จริงอยู่ไม่ใช่ทุกเครือข่ายโซเชียลที่รองรับ (เฉพาะ facebook, Google+, Moi Mir, Odnoklassniki.ru, VKontakte) แต่ส่วนใหญ่เป็นเครือข่ายหลัก เป็นเรื่องน่าเศร้าที่ Twitter ถูกลบออกจากรายการนี้เมื่อเร็วๆ นี้ เนื่องจาก... มันหยุดให้ข้อมูลนี้ผ่าน API
ตัวอย่างเช่น ที่นี่คุณสามารถย่อชื่อสำหรับการแชร์บน Twitter ได้ เนื่องจากมีความยาวจำกัด (อ่านวิธีดำเนินการด้านล่าง) กำหนดค่าว่าจะแสดงตัวนับการแชร์หรือไม่ กำหนดทิศทางการเปิดเมนูด้วย ปุ่มเพิ่มเติมเครือข่ายโซเชียลและอีกมากมาย โดยทั่วไปให้ขุดไปรอบ ๆ และดู
โดยทั่วไปเมื่อเปรียบเทียบกับปุ่มแชร์แบบเนทีฟซึ่งเสนอให้ติดตั้งโซเชียลเน็ตเวิร์กบนเว็บไซต์ (อ่านเกี่ยวกับสิ่งนี้ด้านล่าง) บล็อก Yandex ชนะในด้านความเร็วในการโหลดความกะทัดรัดและความง่ายในการติดตั้งและกำหนดค่า ตัวอย่างเช่น ในอดีตปุ่ม Twitter อย่างเป็นทางการของฉันมักจะไม่โหลดเนื่องจากปัญหากับเซิร์ฟเวอร์ ดังนั้นสคริปต์ที่สร้างใน Java จึงไม่โหลดเป็นเวลานาน เมนูด้านซ้ายบล็อกของฉัน อาจเป็นไปได้ว่าปัญหานี้ได้รับการแก้ไขแล้ว แต่สคริปต์จำนวนมากจะแย่กว่าสคริปต์เสมอในแง่ของการเพิ่มประสิทธิภาพความเร็วในการโหลดไซต์
ฉันคิดว่ายานเดกซ์ไม่น่าจะมีปัญหาในการเข้าถึงเนื่องจากเป็นรายได้ที่ดี องค์กรการค้าค่อนข้างอ่อนไหวต่อภาพลักษณ์ของเธอ นอกจากนี้ หากคุณมี คุณสามารถติดตามสถิติการคลิกปุ่มเหล่านี้ได้ซึ่งอาจมีประโยชน์
นอกจากบล็อกที่มีไอคอนขนาดปกติแล้ว คุณสามารถสร้างบล็อกที่มีตัวนับได้ และยานเดกซ์ยังแนะนำให้เพิ่มเมนูแบบเลื่อนลงพร้อมโซเชียลเน็ตเวิร์กเพิ่มเติม ซึ่งจะซ่อนอยู่ใต้สปอยเลอร์ซึ่งอยู่หลังจากแสดงปุ่มตามจำนวนที่ต้องการสำหรับ เครือข่ายโซเชียลหลัก (เช่น VKontakte, MoiMir, ):
หากคุณต้องการเพิ่มตัวนับให้กับปุ่มในบล็อกนี้ (พร้อมเมนูแบบเลื่อนลง) ให้แทรกแอตทริบิวต์อีกหนึ่งรายการลงในโค้ดบนไซต์ (ระหว่างแท็ก Div): data-counter="“ เท่านี้ก็เรียบร้อย อย่างที่ฉันบอกไป ไม่มีอะไรง่ายไปกว่านี้อีกแล้ว คุณสามารถใช้ตัวนับจะถูกเพิ่มลงในปุ่มเล็กๆ ซึ่งจะกล่าวถึงด้านล่าง:
Data-services="vkontakte,odnoklassniki,facebook,gplus,twitter,moimir,blogger,digg,reddit,linkedin,lj"
คุณยังสามารถแทนที่ไอคอนทั้งหมดด้วยภาพขนาดย่อของปุ่มที่เล็กลงได้ ซึ่งโดยส่วนตัวแล้วฉันพบว่ามีประโยชน์เมื่อแทรกบล็อกเข้าไป ส่วนบนบทความทั้งหมดในบล็อกนี้:
ในส่วนแรก แท็ก SCRIPT การเปิดและปิดจะมีเส้นทางไปยังสคริปต์ ซึ่งจะถูกโหลดจากเซิร์ฟเวอร์ Yandex และส่วนที่สองประกอบด้วยโค้ดการแทรก ซึ่งจะต้องวางในตำแหน่งในเทมเพลตของคุณโดยที่ บล็อกนี้จะปรากฏขึ้น
วิธีแทรกปุ่มโซเชียลจาก Yandex บนเว็บไซต์ดังนั้นฉันจึงใส่รหัสการเรียกสคริปต์พร้อมกับบล็อก Div ในตำแหน่งที่ต้องแสดงปุ่มโซเชียลมีเดีย เพื่อให้การโหลดไม่ส่งผลกระทบต่อความเร็วในการโหลดของหน้าหลัก ฉันทำตามคำแนะนำที่ให้ไว้ในเอกสาร Yandex และได้เพิ่มแอตทริบิวต์ async="async" เข้าไปด้วยเหตุนี้จึงเริ่มต้นได้ การโหลดแบบอะซิงโครนัสสคริปต์:
ปัญหาอาจเกิดขึ้นในการค้นหาไฟล์ต่างๆ ของเอ็นจิ้นในไซต์ของคุณซึ่งเป็นไฟล์ที่รับผิดชอบในการสร้างส่วนล่างสุด รหัส HTMLด้วยแท็กปิด /BODY หรือแท็กที่ประกอบเป็น Head และยังค้นหาตำแหน่งในไฟล์ธีมที่คุณต้องการแทรกโค้ดลงไป แท็ก Div(เพื่อวางปุ่มเอง)
โดยหลักการแล้ว ทั้งใน WordPress และ Joomla จะทำในไฟล์ใดไฟล์หนึ่งของธีมที่ใช้ เพราะ บล็อกนี้ทำงานบน WordPress ดังนั้นฉันจะพูดเพื่อมัน
หากคุณทำงานกับ WordPress คุณจะต้องใส่โค้ดสำหรับการเรียกใช้สคริปต์โดยเปิดไฟล์ footer.php เพื่อแก้ไข (คุณจะพบแท็กปิด Body หรือ header.php (คุณจะพบที่นั่น) แท็กหัว) จากโฟลเดอร์:
/wp-content/themes/ชื่อของโฟลเดอร์_with_theme_used/footer.php
ตอนนี้สิ่งที่เหลืออยู่คือการแทรกส่วนที่สองของโค้ดลงในตำแหน่งที่ถูกต้องในเทมเพลตเว็บไซต์ของคุณหรือลงในบทความโดยตรง ปุ่มโซเชียลยานเดกซ์ซึ่งรับผิดชอบตำแหน่งของบล็อกพร้อมปุ่มบนหน้าเว็บไซต์:
อย่างไรก็ตาม ฉันจะจองอีกครั้ง: หากคุณต้องการลบปุ่มใด ๆ ออกจากบล็อกนี้ คุณไม่จำเป็นต้องไปที่ตัวสร้างบนเว็บไซต์ Yandex อีกครั้ง คุณสามารถลบรายการออกจากรายการนี้ได้ (พร้อมกับเครื่องหมายจุลภาคที่อยู่ข้างหลัง เช่น "vkontakte") คุณก็เข้าใจ...
คุณยังสามารถเปลี่ยนตำแหน่งของปุ่มภายในบล็อกโดยใช้ CSS
Li.ya-share2__item (พื้นหลัง: ไม่มี! สำคัญ; ช่องว่างภายใน: 0 7px 0 7px! สำคัญ;)
เพราะ ฉันใช้แบบปรับตัวภายใต้ อุปกรณ์เคลื่อนที่เลย์เอาต์ จากนั้นสำหรับอุปกรณ์ที่มีความละเอียดหน้าจอต่ำฉันได้เพิ่มบรรทัดที่คล้ายกันโดยที่ฉันตั้งค่าการเยื้องให้เล็กลงเล็กน้อย แต่นี่คือรายละเอียด:
Li.ya-share2__item (ช่องว่างภายใน:0 3px 0 3px!สำคัญ;)
โดยทั่วไปแล้ว กรณีเช่นนี้จะเกิดขึ้นกับบล็อก WordPress ของฉัน ใน Joomla หากต้องการแทรกบล็อกนี้ อาจเป็นวิธีที่ง่ายที่สุดในการใช้โมดูล Custom Html Code โดยวางไว้ในตำแหน่งเทมเพลตที่ด้านล่างข้อความของบทความ
ปุ่มโซเชียลมีเดียอย่างเป็นทางการเครือข่ายโซเชียลหลายแห่งเปิดโอกาสให้ทุกคนดาวน์โหลดโค้ดปุ่มและบ่อยครั้งที่คุณสามารถปรับแต่งรูปลักษณ์และฟังก์ชันการทำงานของมันได้ ตัวอย่างเช่น คุณสามารถกำหนดค่าและรับรหัสสคริปต์สำหรับการแชร์โพสต์ใน
อย่างที่คุณเห็นมีการตั้งค่าค่อนข้างมากและนอกเหนือจากรูปลักษณ์ของปุ่ม VKontakte แล้วคุณยังสามารถกำหนดค่าการแสดงตัวนับที่แสดงจำนวนการแชร์ได้อีกด้วย
คุณจะสามารถรับปุ่ม Facebook ได้ มีการปรับแต่งอย่างยืดหยุ่นเพื่อให้เหมาะกับความต้องการของคุณ และอย่าสับสนกับคำจารึกภาษาอังกฤษที่อยู่บนนั้น เพราะเมื่อคุณวางโค้ดบนเว็บไซต์ของคุณ คำจารึกจะถูกแปลเป็นภาษารัสเซียโดยอัตโนมัติ
เป็นการดีกว่าที่จะไม่แทรกสิ่งใด ๆ ลงในช่อง URL จากนั้นเพจที่มีรหัสนี้อยู่จะถูกแชร์
มันจะมีลักษณะดังนี้:
มันจะมีลักษณะดังนี้:
และแน่นอนว่าฉันอดไม่ได้ที่จะพูดถึงปุ่ม Twitter อย่างเป็นทางการซึ่งปรากฏขึ้นเมื่อไม่นานมานี้ ตัวสร้างตั้งอยู่ โดยธรรมชาติแล้วมันให้ความสามารถในการนับจำนวนรีทวีตและคุณจะมีโอกาสกำหนดลักษณะที่ปรากฏ:
จากนั้น ฉันปรับปรุงโค้ดผลลัพธ์ให้ทันสมัยเล็กน้อยตามหลักการที่อธิบายไว้ข้างต้น เพื่อให้ชื่อยาวของฉันถูกตัดออกไปและจะไม่สร้างปัญหาเพิ่มเติมให้กับผู้ใช้เมื่อทำการแชร์
ตัวเลือกอื่นในการรับปุ่มโซเชียลมีเดียสำหรับเว็บไซต์ของคุณอย่างที่ฉันบอกไปแล้วว่ามีบริการออนไลน์ทุกประเภทมากมายที่คุณสามารถใช้สคริปต์สำหรับปุ่มโซเชียลเน็ตเวิร์กได้ฟรีและวางไว้บนเว็บไซต์ของคุณ พวกเขาต่างติดตามเป้าหมายที่แตกต่างกัน: "จากใจ" (เช่นในกรณีของบริการ Dimoxa) เพื่อรวบรวมข้อมูลที่จำเป็นสำหรับการดำเนินงานของบริการอื่น ๆ (เช่นในกรณีของ ApTuLike) หรือเพื่อผลกำไร (ไวรัสและการฉ้อโกงที่ผิดกฎหมายอื่น ๆ ด้วย การเข้าชมที่คุณมีบนไซต์ของคุณ) นอกจากนี้ยังมีโซลูชันแบบชำระเงิน เช่น ปลั๊กอินที่กล่าวถึงด้านล่าง
ยากที่จะบอกว่าจะเลือกอะไรจากความหลากหลายนี้ ฉันจะพูดสักสองสามคำเกี่ยวกับสิ่งที่ฉันมีโอกาสได้ลองด้วยตัวเอง และสิ่งที่ฉันได้เขียนไปแล้วก่อนหน้านี้
โดยทั่วไปให้ดูเปรียบเทียบและเลือกด้วยตัวเอง
ขอให้โชคดี! พบกันเร็ว ๆ นี้ในหน้าของเว็บไซต์บล็อก
คุณสามารถดูวิดีโอเพิ่มเติมได้โดยไปที่ ");">
คุณอาจจะสนใจ
เราสร้างปุ่มสำหรับเพิ่มลงในโซเชียลเน็ตเวิร์กและบุ๊กมาร์กสำหรับบล็อก WordPress (โดยไม่ต้องใช้ปลั๊กอินและสคริปต์) น่าจะเป็นปุ่มโซเชียลแบบสแตนด์อโลนสำหรับไซต์ 
ปุ่มสำหรับไซต์มือถือจาก Uptolike + ความสามารถในการแชร์ลิงก์ใน Messenger UpToLike - เครื่องมือสร้างปุ่มโซเชียลสำหรับไซต์ของคุณพร้อมฟังก์ชันเพิ่มเติม
ข้อดี:
ตามที่นักพัฒนาระบุว่าปุ่มโซเชียลใหม่ได้รับการออกแบบมาสำหรับจอภาพ Retina ทุกสิ่งทุกอย่างเมื่อมองแวบแรกยังคงเหมือนเดิม น่าเสียดายที่ในบรรดาตัวเลือกที่มีในตัวออกแบบ ฉันไม่พบปุ่มที่มีตัวนับ แม้ว่า Pluso รุ่นมาตรฐานจะมีก็ตาม
ฉันไม่รู้ว่าพวกเขาจะแทนที่อันเก่าด้วยคอนสตรัคเตอร์ใหม่หรือไม่ แต่ในขณะนี้ ทั้งสองทำงานพร้อมกันโดยใช้ลิงก์ที่ต่างกัน
มีวิดเจ็ตแบบชำระเงินและฟรี มีเพียงตัวเลือกที่ง่ายที่สุดเท่านั้นที่มีในบัญชีฟรี เวอร์ชันที่ต้องชำระเงินมีแนวคิดการออกแบบอีกมากมาย เช่น ปุ่มแบบปรับได้ ปุ่มพร้อมตัวนับต่างๆ และอีกมากมาย
ฉันคิดว่าตัวเลือกนี้ไม่เหมาะกับคนของเราเนื่องจากคุณจะต้องจ่ายค่าระฆังและนกหวีด แต่ในตลาดภายในประเทศคุณสามารถค้นหาสิ่งเดียวกันได้ทั้งหมด แต่ฟรี
ตัวสร้าง Add This มีรายการเครือข่ายโซเชียลที่มีอยู่มากมาย รวมถึง Vkontakte, Moi Mir และ Odnoklassniki
Good Share ปุ่มแชร์น้ำหนักเบาและสวยงามสำหรับเว็บไซต์ของคุณพร้อมโค้ดฝังตัวขนาดเล็กซึ่งน่าสนใจมาก น่าเสียดายที่มีตัวเลือกการออกแบบเพียงตัวเลือกเดียวที่มีโทนสีหลายสี RuNet มีโซเชียลเน็ตเวิร์กยอดนิยมทั้งหมด
ตามที่นักพัฒนาระบุว่าผลิตผลของพวกเขาได้รับการปรับให้เหมาะสมและเครื่องมือค้นหาจะรักไซต์ของคุณ ฉันไม่รู้ว่าที่นี่มีความจริงมากแค่ไหน
Shareaholic บริการตะวันตกที่น่าสนใจมากสำหรับการสร้างปุ่มโซเชียล ซึ่งฉันค้นพบเมื่อไม่นานมานี้
Shareaholic เสนอแนวคิดปุ่มแชร์ใหม่หลายประการ โดยส่วนตัวแล้วฉันชอบลูกศรเหนือปุ่มต่างๆ (ลูกศรเป็นเครื่องมือทางการตลาดที่แข็งแกร่งมาก) แต่น่าเสียดายที่จารึกเป็นภาษาอังกฤษจึงไม่เหมาะกับคนของเรา ในบรรดาเครือข่ายโซเชียลที่มีอยู่คือ VKontakte
สวัสดีเพื่อนรัก บทความวันนี้จะเน้นไปที่การสร้างบล็อกปุ่มโซเชียลที่ไม่มีบริการและปลั๊กอิน บล็อกนี้จะมีปุ่มที่อนุญาตให้ผู้เยี่ยมชมเว็บไซต์พิมพ์หน้า ส่งลิงก์บทความทางอีเมล และบุ๊กมาร์กบทความของคุณ ปุ่มดังกล่าวสามารถพบได้ในเกือบทุกเว็บไซต์ในปัจจุบัน ตอนนี้มีการใช้งานโดยใช้บริการหรือปลั๊กอินเท่านั้น และฉันจะแสดงวิธีทำด้วยตัวเอง
บริการที่ฉันใช้บนไซต์ไคลเอนต์และในบล็อกของฉัน - และ . บริการเหล่านี้ทำให้การดำเนินงานค่อนข้างง่ายและในบล็อกนี้มีการใช้เฉพาะรูปภาพที่จำเป็นของปุ่มโซเชียลเท่านั้น รวมกันเป็น . สไตล์ทั้งหมดจะถูกเก็บไว้ให้น้อยที่สุด รวมถึงเฟรมเวิร์ก html ที่เรียบง่าย
เราจะพิจารณาตัวเลือกแบบคลาสสิกเมื่อปุ่มต่างๆ อยู่หลังบทความ
ซึ่งสามารถทำได้โดยการเปิดไฟล์ที่รับผิดชอบในการส่งออกบทความ (single.php) และเพิ่มบล็อกของปุ่มโซเชียลลงในซอร์สโค้ด หรือสามารถทำได้ผ่านไฟล์ฟังก์ชันของธีม (functions.php)
ฉันจะแสดงทั้งสองตัวเลือกและคุณเลือกตัวเลือกที่เหมาะกับคุณ
การแทรกบล็อกลงในซอร์สโค้ด single.phpคำเตือน: ก่อนที่จะเริ่มดำเนินการใดๆ ให้สำรองข้อมูลไฟล์ single.php!
เปิดแผงผู้ดูแลระบบ WordPress – “ลักษณะที่ปรากฏ” – “ตัวแก้ไข” – “รายการเดียว (single.php)”
ในซอร์สโค้ด ให้มองหาตำแหน่งที่ผลลัพธ์ของบทความสิ้นสุดลง และความคิดเห็นหรือการนำทางเพจเริ่มต้นขึ้น อยู่ในที่นี้คุณจะต้องแทรกโค้ด html สำหรับบล็อกปุ่มโซเชียล
ดูภาพหน้าจออย่างละเอียด เน้นไปที่รหัสที่รับผิดชอบในการแสดงบทความและความคิดเห็น และวางโค้ดด้านล่าง
แน่นอนว่าเทมเพลตของคุณจะมีความแตกต่างอยู่บ้าง แต่ฉันแน่ใจว่าคุณจะเข้าใจมัน ไม่มีอะไรซับซ้อนเกี่ยวกับมัน และอีกอย่างคุณมีสำเนาสำรองก็ไม่มีอะไรต้องกลัว
และนี่คือโค้ด html สำหรับบล็อกปุ่มโซเชียล:
","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="facebook">&เรื่อง=","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="livejournal">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href = "javascript: เป็นโมฆะ (0)" class = "twitter ">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");" href="javascript: เป็นโมฆะ(0)" class="digg">- แต่ละลิงก์มีคลาสของตัวเอง ซึ่งใช้กำหนดรูปภาพของปุ่ม
การดำเนินการนี้จะเสร็จสิ้นการแทรกผ่านซอร์สโค้ด จากนั้นคุณต้องเชื่อมต่อสไตล์ css
การแทรกบล็อกลงในซอร์สโค้ด single.php ผ่านฟังก์ชันธีมคำเตือน: ก่อนเริ่มงาน ให้สำรองข้อมูลไฟล์ Functions.php ของคุณไว้!
ในการใช้ตัวเลือกนี้ คุณจะต้องเปิดไฟล์ function.php และเพิ่มโค้ดนี้ที่ส่วนท้ายสุด:
/* การแทรกปุ่มโซเชียล */ add_action("comments_template","soc_button"); ฟังก์ชั่น soc_button() ( ?> ","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="facebook">&เรื่อง=","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="livejournal">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href = "javascript: เป็นโมฆะ (0)" class = "twitter">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=700,ความสูง=400");" href="javascript: void(0)" class="odnoklassniki">&target=blog","sharer","toolbar=0,status=0,width=930,height=500");" href="javascript: void(0)" class="evernote">","sharer","แถบเครื่องมือ=0,สถานะ=0,ความกว้าง=812,ความสูง=585");" href="javascript: เป็นโมฆะ(0)" class="digg">- มิฉะนั้นเว็บไซต์จะหยุดทำงานคำอธิบายเกี่ยวกับโค้ด: ตำแหน่งที่ปุ่มโซเชียลเน็ตเวิร์กจะปรากฏขึ้นจะถูกกำหนดผ่านคีย์ API comment_template คีย์นี้จะกำหนดสถานที่ก่อนความคิดเห็น โค้ดปุ่มโซเชียลนั้นอยู่ในแท็กส่งคืนการเปิดและปิดของ php ในรหัสฉันทำเครื่องหมายไว้เป็นสีแดง นี่เป็นเคล็ดลับทั้งหมดในการแทรกโค้ด html ลงใน php ผ่านฟังก์ชันธีม
เสร็จสิ้นวิธีการนี้ มาดูการอัปโหลดรูปภาพไปยังไซต์กันดีกว่า
การอัปโหลดภาพปุ่มไปยังเซิร์ฟเวอร์ตัวอย่างเช่น ฉันเตรียมสไปรท์หลายอันพร้อมรูปภาพของปุ่มโซเชียล คุณสามารถดาวน์โหลดได้
สไปรท์ที่ฉันใช้เป็นตัวอย่างมีขนาดเพียง 3.97 kb และมีเพียงปุ่มที่จำเป็นเท่านั้น และเนื่องจากนี่คือสไปรท์ จึงมีเพียงคำขอเดียวไปยังฐานข้อมูล และไม่ใช่สำหรับแต่ละปุ่มแยกกัน
ดาวน์โหลดภาพหรือเตรียมภาพของคุณเองแล้วอัปโหลดไปยังเว็บไซต์ของคุณ ฉันคิดว่าไม่น่าจะมีปัญหาใดๆ กับเรื่องนี้ ถัดไป จำเป็นต้องมีลิงก์ไปยังสไปรท์นี้เพื่อออกแบบปุ่มโดยใช้สไตล์ CSS
การเชื่อมต่อสไตล์ CSSแน่นอนว่าขั้นตอนนี้สามารถทำให้เสร็จก่อนได้ แต่ฉันชอบที่จะทำงานทางเทคนิคที่ซับซ้อนทั้งหมดก่อน จากนั้นจึงเริ่มสิ่งเล็กๆ น้อยๆ ดีๆ ด้วยสไตล์ CSS
ดังนั้นให้เปิดไฟล์ style.css ซึ่งรับผิดชอบการออกแบบเว็บไซต์ของคุณ และแทรกสไตล์เหล่านี้:
แบ่งปัน a ( display: inline-block; Vertical-align: inherit; Margin: 5px 0 0 2px; padding: 0px; font-size: 0px; width: 40px; height: 40px; background: url("http://test ..png ") ไม่เลื่อนซ้ำ 0px 0px โปร่งใส;) .share a.vkontakte ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -168px 0px transparent; ) .share a.google ( พื้นหลัง: url("http://test..png ") เลื่อนไม่ซ้ำ -252px 0px โปร่งใส; ) .share a.livejournal ( พื้นหลัง: url("http://test..png ") ไม่ทำซ้ำ scroll -336px 0px transparent; ) .share a.mail ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -42px 0px transparent; ) .share a.mail ( พื้นหลัง: url("http ://test..png ") ไม่มีการเลื่อนซ้ำ -294px 0px โปร่งใส; ) .share a.odnoklassniki ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -126px 0px โปร่งใส; ) .share a.pinterest ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -210px 0px transparent; ) .share a.liveinternet ( พื้นหลัง: url("http://test..png ") เลื่อนไม่ซ้ำ -378px 0px โปร่งใส; ) .share a.evernote ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -420px 0px transparent; ) .share a.bookmark ( พื้นหลัง: url("http://test.. png ") ไม่เลื่อนซ้ำ -462px 0px transparent; ) .share a.email ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -504px 0px transparent; ) .share a.print ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ -546px 0px โปร่งใส ) .share a.digg ( พื้นหลัง: url("http://test..png ") ไม่มีการเลื่อนซ้ำ - 588px 0px โปร่งใส; ) .share a.spring ( พื้นหลัง: url("http://test..png ") ไม่เลื่อนซ้ำ -630px 0px โปร่งใส; )
คำอธิบายเกี่ยวกับโค้ด: คลาส .share กำหนดลักษณะทั่วไปของบล็อก ขนาดของแต่ละปุ่ม เยื้องและตั้งค่าพื้นหลังเดียว จากนั้นแต่ละลิงก์จะมีคลาสของตัวเอง และแต่ละลิงก์ดังกล่าวจะถูกกำหนดประเภทของปุ่มผ่านคุณสมบัติพื้นหลัง ปุ่มเหล่านี้สร้างเป็นสไปรท์ CSS และแต่ละปุ่มมีความกว้างและความสูง 40px และมีระยะขอบ 2px ระหว่างปุ่มเหล่านั้น ซึ่งช่วยให้คุณกำหนดรูปภาพสำหรับแต่ละปุ่มได้อย่างแม่นยำ นั่นคือปุ่มแรกระบุเป็น 0 และปุ่มที่สองเป็น 42 และต่อๆ ไป ในโค้ดค่าเหล่านี้จะแสดงเป็นสีส้ม ลิงก์ไปยังสไปรท์ยังถูกเน้นด้วยสีส้ม คุณสามารถเปลี่ยนเส้นทางไปยังสไปรท์ของคุณได้
นี่เป็นการเสร็จสิ้นกระบวนการทั้งหมดในการสร้างบล็อกปุ่มโซเชียลของคุณเอง คุณสามารถดำเนินการตรวจสอบได้อย่างปลอดภัย
ฉันยังมีวิดีโอสอนที่แสดงกระบวนการทั้งหมดอย่างชัดเจน รวมถึงการทำงานของปุ่มต่างๆ ด้วย ดูและนำไปใช้บนเว็บไซต์และบล็อกของคุณ
แค่นั้นแหละ. ฉันจัดการกับงาน ฉันขอให้คุณทุกคนโชคดีและพบคุณในบทความใหม่และบทช่วยสอนแบบวิดีโอ
นี่คือวลี “ใครต้องการซื้อซอฟต์แวร์พร้อมส่วนลด 8% สำหรับโปรโมชั่น” เขียนโดยผู้ใช้เองและด้านล่างนี้คือลักษณะของลิงก์ไปยังไซต์บนโซเชียลเน็ตเวิร์ก ไม่สวยมากใช่มั้ย?
ลิงก์บนโซเชียลเน็ตเวิร์กจะมีลักษณะดังนี้:
ที่นี่ “ วันนี้เป็นวันเกิดของ allsoft.ru - 8 ปี :)” เป็นข้อความที่เขียนโดยผู้ใช้ ส่วนที่เหลือเป็นข้อมูลจากเมตาแท็ก คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเมตาแท็กเหล่านี้ได้ที่หน้า Facebookdevelopers.facebook.com/docs/share เครือข่ายโซเชียลอื่น ๆ ก็เข้าใจพวกเขาค่อนข้างดี
โดยทั่วไปกลไกนี้ทำงานอย่างไร:
1. เมื่อผู้ใช้คลิกปุ่ม วิดเจ็ตจะส่งลิงก์ไปยังเพจไปยังเซิร์ฟเวอร์เครือข่ายโซเชียล
2. เซิร์ฟเวอร์โซเชียล เครือข่ายเข้าถึงลิงก์นี้และอ่านข้อมูลเกี่ยวกับเพจ - ชื่อคำอธิบายรูปภาพ
3. เซิร์ฟเวอร์โซเชียล เครือข่ายแคชข้อมูลหน้าด้านข้างและแสดงบนหน้าเครือข่ายโซเชียล
วิธีส่งคำอธิบายที่แตกต่างกันสำหรับหน้าเดียว
ตัวอย่างเช่น เมื่อสร้างหน้าส่งเสริมการขายบน allsoft.ru ด้วยการทดสอบแบบตลกขบขัน จำเป็นต้องส่งคำอธิบายที่แตกต่างกันไปยังโซเชียลเน็ตเวิร์กสำหรับจำนวนคะแนนที่ผู้ใช้ทำคะแนนต่างกันในการทดสอบ เนื่องจากเครือข่ายโซเชียลได้รับคำอธิบายของเพจโดยการคลิกลิงก์ จึงจำเป็นต้องมีลิงก์ที่แตกต่างกันสำหรับคำอธิบายที่แตกต่างกัน นอกจากนี้ Twitter อนุญาตให้มีอักขระได้เพียง 140 ตัวเท่านั้น ดังนั้นจึงต้องมีคำอธิบายที่สั้นกว่าแยกต่างหาก
ใหม่ Ya.share(( องค์ประกอบ: "ya_share_normal", elementStyle: ( "type": "none", "quickServices": ["facebook", "twitter", "odnoklassniki", "vkontakte", "moimir"] ), ลิงก์: "http://allsoft.ru/promo/allsoft8let/?share=normal", serviceSpecific: ( twitter: ( ชื่อ: "ผลการทดสอบ: The Dragon เกือบจะเป็นจุดแข็งของคุณ! คุณยังไม่สามารถสอน Dragonology ได้ แต่ มาถูกทาง!" ) ) ));
1. ที่นี่ ya_share_normal คือ id ขององค์ประกอบบนหน้า () ซึ่งบล็อกที่มีปุ่มโซเชียลจะปรากฏขึ้น ลิงก์คือลิงก์ รวมถึงใน serviceSpecific สำหรับ Twitter เราระบุชื่อซึ่งแตกต่างจากที่อยู่ใน og: เมตาแท็กชื่อ
ดังนั้น สำหรับงาน “ผลการทดสอบที่แตกต่างกัน 3 รายการพร้อมลิงก์ทั่วไปไปยังหน้านอกการทดสอบ” เราจะมี 4 แท็ก:
และโค้ด JavaScript 4 บล็อกดังด้านบน
วิธีเปลี่ยนชื่อและคำอธิบายที่แคชโดยโซเชียลเน็ตเวิร์ก
1. มีวิธีที่ดีที่สุดสำหรับ Facebook: ไปที่โปรแกรมแก้ไขข้อบกพร่อง
