วิธีการเพิ่ม Twitter ฟีดไปที่ Shopify Website

หากคุณสมัครใช้บริการจากลิงก์ในหน้านี้ Reeves and Sons Limited อาจได้รับค่าคอมมิชชั่น ดูของเรา คำสั่งจริยธรรม.

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

ส่วนที่ดีเกี่ยวกับการฝัง Twitter ฟีดบนเว็บไซต์ของคุณคือการอัปเดตโดยอัตโนมัติ Twitter เนื้อหาบนเว็บไซต์ของคุณ หมายความว่าคุณไม่จำเป็นต้องคัดลอกโพสต์จากคุณ Twitter หน้า.

นอกจากนี้ก Twitter ฟีดเป็นวิธีที่ยอดเยี่ยมในการแทรกรูปภาพจำนวนมากบนเว็บไซต์ของคุณ หลายยี่ห้อใช้ Twitter แกลเลอรีหรือฟีดเพื่อใช้เป็นแกลเลอรีภาพหน้าแรก

มีสองวิธีในการเพิ่ม a Twitter ฟีดของคุณ Shopify เว็บไซต์:

  1. ด้วยแอพ
  2. โดยการฝังโค้ดสำหรับ Twitter วิดเจ็ต

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

อ่านต่อเพื่อเรียนรู้ทั้งหมดเกี่ยวกับวิธีเพิ่ม a Twitter ฟีดไปยัง Shopify เว็บไซต์!

วิธีเพิ่ม Twitter ฟีดไปที่ Shopify Website

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

วิธีที่ 1: เพิ่ม Twitter ฟีดไปที่ Shopify ด้วยแอพ

มีทั้งแบบฟรีและแบบเสียเงิน Twitter แอพฟีดพร้อมให้ดาวน์โหลดผ่าน Shopify แอพสโตร์. ในบทช่วยสอนนี้ เราจะใช้ Zestard Twitter แอป Feed เนื่องจากมีฟังก์ชันที่จำเป็นและฟรี หากคุณตัดสินใจเลือกแอปอื่น เราขอแนะนำให้ลองใช้แอปฟรีทั้งหมดก่อน เนื่องจากนี่ไม่ใช่คุณลักษณะที่คุณควรจะต้องจ่าย

ในการเริ่มต้น ให้ติดตั้ง ซีสตาร์ด Twitter แอพฟีด บน Shopify เก็บ. หากคุณยังคงเริ่มต้นกับ Shopifyเรียนรู้ วิธีสร้างร้านค้าของคุณที่นี่. คุณสามารถค้นหาแอพได้โดยลงชื่อเข้าใช้ของคุณ Shopify บัญชีและไปที่ เพิ่มแอพ,หรือ การนำทางโดยตรงไปยัง App Store.

คลิก เพิ่มแอพ ใน Shopify แอพสโตร์แล้ว ติดตั้งแอพ เมื่อนำคุณกลับมาที่หน้าจอแดชบอร์ดด้วย informatอิออนเกี่ยวกับการอนุญาตและความเป็นส่วนตัว

ติดตั้งแอพ - วิธีเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์

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

ต้องมีการกำหนดค่าบางอย่างก่อนที่จะดู Twitter ฟีดที่ส่วนหน้า ไปที่ การตั้งค่าไทม์ไลน์ เริ่ม.

ไปที่ Twitter แอพฟีด

หน้านี้มีฟิลด์ต่างๆ สำหรับปรับแต่งรูปลักษณ์โดยรวมและเนื้อหาของฟีด

ช่องที่สำคัญที่สุดในการกรอกคือ ชื่อฟีด; พิมพ์หรือวางใน Twitter จัดการที่คุณต้องการดึงออกมา เป็นไปได้ที่จะแสดงฟีดจากสาธารณะ Twitter โปรไฟล์

การตั้งค่าอื่นๆ ได้แก่:

  • ความกว้างของกล่องฟีด
  • ความสูงของกล่องฟีด
  • ธีมฟีด (สว่างหรือมืด)
  • ขีด จำกัด ฟีด (แสดงเฉพาะทวีตล่าสุดจำนวนหนึ่งเท่านั้น)
  • สีของดาต้าลิงค์
  • สีพื้นหลังของฟีด

เมื่อคุณปรับแต่งเสร็จแล้ว อย่าลืมคลิกที่ บันทึกการเปลี่ยนแปลง ปุ่มเพื่อแสดงตัวอย่าง

ไว้ในชื่อฟีด

หลังจากคลิก บันทึกการเปลี่ยนแปลงแอปจะสร้างการแสดงตัวอย่างของ Twitter ให้อาหาร. เลื่อนดูฟีดและย้อนกลับเพื่อปรับการตั้งค่าตามสิ่งที่คุณต้องการบรรลุ

การแสดงตัวอย่างของ Twitter ป้อนเข้า Shopify

เหนือการแสดงตัวอย่าง คุณจะเห็นว่าแอปสร้างรหัสย่อสำหรับฟีดด้วย นี่เป็นรหัสเฉพาะสำหรับคุณที่จะวางที่ใดก็ได้บนของคุณ Shopify เว็บไซต์. คลิกเพื่อ คัดลอก รหัสไปยังคลิปบอร์ดของคุณ

รหัสย่อ

พื้นที่ Twitter แอป Feed จะแสดงป๊อปอัปเพื่อให้คุณคัดลอกรหัสได้อย่างง่ายดาย สิ่งที่คุณต้องทำคือใช้รหัสย่อของแป้นพิมพ์ CTRL + C (Command + C สำหรับ Mac) เพื่อคัดลอกรหัสย่อไปยังคลิปบอร์ดของคอมพิวเตอร์ของคุณ

คัดลอกรหัสย่อสำหรับวิธีการเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์

คุณอาจต้องการวาง Twitter ฟีดบน Shopify หน้าเว็บ เช่น เกี่ยวกับเรา หน้าติดต่อ หรือหน้าสนับสนุน โดยไปที่ ร้านค้าออนไลน์ > หน้า in Shopify. เปิดหน้าใหม่ที่คุณต้องการเพิ่มฟีด คลิก <> (แสดง HTML) ปุ่มสำหรับเปลี่ยนจาก Visual Editor เป็น HTML Code Editor

การเลือกตัวแก้ไข HTML

วางรหัสย่อที่คัดลอกไว้ก่อนหน้านี้ในโปรแกรมแก้ไข HTML หากมีเนื้อหาอื่นในหน้า เพียงเลือกตำแหน่งที่คุณต้องการให้ฟีดไป และใส่โค้ดที่นั่น อย่าลืมบันทึกหน้า

วางรหัสลงใน Shopify หน้า

ไปที่ส่วนหน้าของหน้านั้นโดยดูตัวอย่างหรือไปที่ที่อยู่เว็บ ตอนนี้คุณจะเห็น Twitter ฟีดแสดงตรงตำแหน่งที่คุณใส่รหัสย่อ

ผลลัพธ์ในส่วนหน้า

เจ้าของร้านค้าออนไลน์หลายคนค่อนข้างจะเรียนรู้วิธีเพิ่ม Twitter ฟีดไปยัง Shopify หน้าแรก ในกรณีนั้น, Shopify มีตัวปรับแต่งภาพสำหรับหน้าแรก ทำให้ง่ายยิ่งขึ้นในการแทรก Twitter รหัสย่อของฟีด

ไปที่ ร้านค้าออนไลน์ > ธีม > ปรับแต่ง.

จากนั้น ค้นหาพื้นที่ที่คุณต้องการวาง Twitter ให้อาหาร. คลิก เพิ่มส่วน ปุ่มในบริเวณนี้ ค้นหา ของเหลวที่กำหนดเอง ส่วนธีมและแทรกลงใน Shopify.

การเพิ่มส่วน

พื้นที่ ของเหลวที่กำหนดเอง ส่วนธีมแสดงการตั้งค่าต่างๆ ทางด้านซ้าย ที่สำคัญที่สุดคือ ของเหลวที่กำหนดเอง สนาม. วางรหัสย่อที่คัดลอกไว้ก่อนหน้านี้จาก Twitter แอปฟีด

หลังจากคลิก ลดคุณจะเห็น Twitter ฟีดแสดงผลใน Shopify แสดงตัวอย่างหน้าแรกทางด้านขวา

คุณอาจปรับแต่งส่วนเล็กน้อยด้วยตัวเลือกสำหรับ:

  • แบบแผนชุดสี
  • การขยายส่วน
  • CSS ที่กำหนดเอง
วิธีการเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์โดยใช้ส่วนของเหลวที่กำหนดเอง

วิธีสุดท้ายในการแทรกรหัสย่อจาก Twitter แอปฟีดคือการเพิ่มลงในซอร์สโค้ดของธีมจริง โดยทั่วไปจะแนะนำเฉพาะในกรณีที่คุณต้องการ Twitter ฟีดให้ปรากฏทั่วโลกในบางส่วนหรือบางหน้า

โดยไปที่ ร้านค้าออนไลน์ > ธีม in Shopify. คลิกที่ จุดไข่ปลา (…) ปุ่มเพื่อแสดงตัวเลือกเพิ่มเติม คลิกที่ แก้ไขรหัส จากเมนูแบบเลื่อนลง

รหัสการแก้ไข

เลือก theme.liquid ไฟล์และวางโค้ดทุกที่ที่คุณต้องการภายในโค้ดธีม คุณสามารถเลือกปรับเปลี่ยนได้ แม่แบบ or ส่วน เพื่อการควบคุมที่มากขึ้น Twitter ฟีดปรากฏขึ้น

วิธีการเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์ผ่านไฟล์ธีม

การตั้งค่าอื่นๆ ที่คุณสามารถพบได้ใน Twitter แอพฟีดประกอบด้วย:

  • ตัวเลือกในการฝังทวีตเดียว (หรือรีทวีต)
  • เครื่องมือในการสร้าง Twitter ปุ่มแบ่งปัน
  • ตัวเลือกเพื่อแสดงฟีดแฮชแท็ก

วิธีที่ 2: เพิ่ม Twitter ฟีดไปที่ Shopify ด้วยการฝังตัว Twitter วิดเจ็ต

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

ในการเริ่มต้นให้ไปที่ ประกาศTwitterด้วย..

วางหรือพิมพ์ URL ของ Twitter โปรไฟล์ที่คุณต้องการแสดงเป็นฟีดบนของคุณ Shopify เก็บ. คลิกที่ปุ่มลูกศรเพื่อดำเนินการต่อ

วางใน Twitter URL

ที่นี่คุณมีสองทางเลือก:

  1. ไทม์ไลน์แบบฝัง
  2. Twitter ปุ่ม

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

การเลือกไทม์ไลน์แบบฝังบน Twitter

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

การตั้งค่าตัวเลือกการปรับแต่ง

ซึ่งจะแสดงการตั้งค่าหลายอย่างเพื่อเปลี่ยนรูปลักษณ์ของวิดเจ็ตฟีดของคุณ:

  • ความสูง
  • ความกว้าง
  • ดู (มืดหรือสว่าง)
  • ภาษา (คุณมักจะใช้ Automatic)

คลิก อัปเดตปุ่ม เพื่อดูการแก้ไขของคุณในการแสดงตัวอย่างด้านล่าง อย่างที่คุณเห็น การเปลี่ยนแปลงง่ายๆ ของเราจาก เบา ไปยัง มืด แสดงผลในการแสดงตัวอย่างแล้ว

การปรับแต่ง Twitter วิดเจ็ต

เมื่อคุณพอใจกับวิธีการของคุณแล้ว Twitter ฟีดดูคลิกที่ คัดลอกโค้ด ปุ่มเพื่อคัดลอกรหัสวิดเจ็ตไปยังคลิปบอร์ดของคอมพิวเตอร์ของคุณ

คัดลอก Twitter รหัส

ตอนนี้ได้เวลาเรียนรู้วิธีเพิ่ม Twitter ฟีดของคุณ Shopify เว็บไซต์. ตัวเลือกที่ง่ายที่สุดคือวางฟีดของคุณ Shopify หน้าแรก ผ่านทาง ก Shopify มาตรา.

ไปที่ ร้านค้าออนไลน์ > ธีม > ปรับแต่ง เพื่อเปิด Shopify เครื่องมือปรับแต่งภาพ ค้นหาพื้นที่ของหน้าแรกที่คุณต้องการแทรก Twitter ให้อาหาร. คลิกรายการใดรายการหนึ่ง เพิ่มส่วน ปุ่มที่จะเปิดเผย Shopifyคอลเลกชันของส่วนต่างๆ เลื่อนดูรายการหรือค้นหา ของเหลวที่กำหนดเอง ส่วน. คลิกเพื่อเพิ่มลงในเพจ

การเพิ่มส่วน

ใช้ ของเหลวที่กำหนดเอง ช่องสำหรับวางโค้ดที่คัดลอกมาก่อนหน้านี้ (จากไฟล์ Twitter เว็บไซต์). อย่าลังเลที่จะปรับการตั้งค่าส่วนอื่นๆ เช่น แบบแผนชุดสี, การขยายส่วน,หรือ CSS ที่กำหนดเอง.

คุณจะสังเกตเห็นว่า ในขั้นต้น สิ่งที่แสดงคือลิงก์ไปยังทวีตของคุณ Twitter บัญชี

วางในรหัส

คุณเพียงแค่ต้องคลิกที่ ลด สำหรับ Shopify เพื่อแสดง Twitter ฟีดในตัวอย่างเครื่องมือปรับแต่ง

วิธีการเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์ในเครื่องมือปรับแต่ง

วิธีเพิ่มเติมในการเพิ่ม Twitter ฟีดผ่านรหัสฝังคือการวางไว้ในหน้าเฉพาะใน Shopify. ไปที่ ร้านค้าออนไลน์ > หน้า เพื่อทำสิ่งนี้ให้สำเร็จ เปิดหน้าที่คุณต้องการแก้ไข

เมื่ออยู่ในเครื่องมือแก้ไขเพจ ให้คลิกที่ แสดง HTML (<>) ปุ่ม. สิ่งนี้จะเปลี่ยนจาก Visual Editor เป็น Custom HTML Editor ซึ่งจำเป็นสำหรับการเพิ่มโค้ด

ไปที่หน้า

วางรหัสที่คุณคัดลอกมาตั้งแต่แรก Twitter. คลิกที่ ลด or สาธารณะ ปุ่มเพื่อให้การเปลี่ยนแปลงมีผล

วางรหัสในหน้า

ดูตัวอย่างหน้าหรือไปที่มุมมองส่วนหน้า ที่นี่คุณจะเห็น Twitter ฟีดที่แสดงควบคู่ไปกับเนื้อหาอื่นๆ ที่คุณอาจมีในหน้านั้น

twitter ฟีดที่ส่วนหน้า

วิธีสุดท้ายในการฝัง Twitter วิดเจ็ตพร้อมรหัสคือการใช้ Shopify ไฟล์ธีม ไปที่ ร้านค้าออนไลน์ > ธีม เพื่อเริ่มต้น. เลือก จุดไข่ปลา (…) ปุ่ม จากนั้นเลือก แก้ไขรหัส.

แก้ไขโค้ดใน Shopify

พื้นที่ theme.liquid ไฟล์ช่วยให้คุณควบคุมธีมที่คุณติดตั้งอยู่ได้อย่างสมบูรณ์ Shopify. วางไฟล์ Twitter รหัสฟีดทุกที่ที่คุณต้องการให้ฟีดปรากฏในธีม อื่นwise, มันเป็นไปได้ที่จะใช้ แบบ และ Section ไฟล์ในกรณีที่คุณต้องการ Twitter ฟีดจะปรากฏเฉพาะในบางส่วนของเว็บไซต์ของคุณ เช่น ในแถบด้านข้าง

วิธีการเพิ่ม Twitter ฟีดไปที่ Shopify เว็บไซต์โดยใช้ไฟล์ธีม

นั่นคือวิธีการเพิ่ม Twitter ฟีดไปยัง Shopify เว็บไซต์!

คุณอาจสังเกตเห็นว่าการใช้ a Shopify app ยังคงสร้างรหัสย่อเพื่อให้คุณวางไว้ที่ใดก็ได้บนเว็บไซต์ของคุณ นั่นอาจทำให้คุณถามว่า “ใช้แอพไปเพื่ออะไร” มีสามเหตุผล:

  1. การใช้แอพหมายความว่างานทั้งหมดของคุณจะรวมอยู่ในแดชบอร์ดเดียว: Shopify.
  2. มีการตั้งค่าการปรับแต่งเพิ่มเติมมากมายใน Twitter ฟีดแอพเมื่อเทียบกับสิ่งที่นำเสนอผ่านทาง Twitter วิดเจ็ตที่ฝังได้
  3. รหัสย่ออย่างน้อยก็น่ากลัวน้อยกว่ารหัสที่ให้ไว้เล็กน้อย Twitter.

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

โจวอร์นิมอนต์

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

ความคิดเห็น 0 คำตอบ

เขียนความเห็น

ที่อยู่อีเมลของคุณจะไม่ถูกเผยแพร่ ช่องที่ต้องการถูกทำเครื่องหมาย *

อันดับ *

ไซต์นี้ใช้ Akismet เพื่อลดสแปม เรียนรู้วิธีการประมวลผลข้อมูลความคิดเห็นของคุณ.

ดู Shopify เป็นเวลา 3 เดือนกับ $1/เดือน!