วิธีทำ Javascript Share ทั้ง 3 โซเชียล Facebook Google Twitter
วิธีทำ Javascript Share ทั้ง 3 โซเชียล Facebook Google Twitter
ระบบการแชร์ข้อมูลข่าวสารไปยังโซเชียลต่าง ๆ นั้น ปัจจุบันมีความจำเป็นและสำคัญมาก ๆ โดยเฉพาะอย่างยิ่งมีผลโดยตรงกับการทำ SEO ให้กับเว็บไซต์ จะเห็นได้ว่าในปัจจุบันเว็บไซต์ไม่ว่าจะพัฒนาจาก CMS เว็บไซต์สำเร็จรูปหรือเว็บไซต์แบบ Customize พัฒนาขึ้นมาใหม่ทั้งหมด จะมี social share plugin เป็นองค์ประกอบสำคัญของเว็บไซต์
แชร์โซเชียลหลัก ๆ ที่เรามักจะพบมากที่สุดจะมีอยู่ 3 โซเชียลหลัก ๆ คือ facebook, google+, twittter วันนี้ลองมาดูกันครับว่า เราจะสามารถใช้ javascript ในการทำ social plugin ให้กับเว็บไซต์ของเราได้อย่างไร
วิธีทำ Javascript Facebook Share
สำหรับโซเชียลหลักอย่าง facebook โดยปกติแล้วเวลาที่เราแชร์หน้าเว็บไซต์ลงบน facebook timeline ระบบจะนำข้อมูลจาก meta tag open graph ซึ่งจะอยู่ในส่วน head ของเว็บไซต์ เช่น og:title, og:image, og:description เป็นต้น แต่ถ้าในกรณีที่ไม่มี meta tag นี้อยู่ ระบบจะไปดึงข้อมูลจาก meta tag ปกติของเว็บไซต์มาแสดงแทน ตัวอย่าง og meta tag ของเฟสบุ้ค
<meta property="og:image" content="codebee.png"> <meta property="og:title" content="บริษัท โค๊ดบี จำกัด"> <meta property="og:type" content="website"> <meta property="og:url" content="https://www.codebee.co.th"> <meta property="og:site_name" content="codebee"> <meta property="og:description" content="พัฒนาเว็บไซต์และโมบายแอพพลิเคชั่น">
สำหรับการแชร์ข้อมูลหน้าเว็บไซต์เราสามารถแชร์ได้ 2 แบบด้วยกันคือ
- 1. แชร์ผ่าน Facebook URL Share ด้วยการส่งตัวแปรแบบ Query String ตัวอย่างเช่น
https://www.facebook.com/sharer.php?u=url &caption=caption &description=description &picture='picture
- 2. แชร์ผ่าน Facebook Javascript API ด้วย FB.ui ตัวอย่างเช่น
FB.ui({ method: 'feed', name: 'บริษัท โค๊ดบี จำกัด', link: 'https://www.codebee.co.th', picture: 'https://www.codebee.co.th/logo.png', caption: 'บริษัทรับทำเว็บไซต์และโมบายแอพพลิเคชั่น', description: 'บริษัทรับทำเว็บไซต์และโมบายแอพพลิเคชั่น' });
วิธีทำ Javascript Google+ Share
สำหรับการแชร์บน Google+ นั้น ข้อมูลที่ Google+ จะนำไปใช้งานนั้น เริ่มต้นจะดึงมาจากข้อมูลที่เป็นมาตรฐาน schema markup แต่ถ้าไม่มีข้อมูลอยู่ในเว็บไซต์ ก็จะไปดึงข้อมูลมาตรฐาน html คือ meta tag title, image, description เหมือนกับ facebook ตัวอย่าง schema syntag เช่น
<meta itemprop="name" content="บริษัท โค๊ดบี จำกัด"> <meta itemprop="description" content="รับทำเว็บไซต์และโมบายแอพพลิเคชั่น"> <meta itemprop="image" content="https://www.codebee.co.th/logo.png">
เราสามารถแชร์ข้อมูลผ่าน Google+ URL Share ได้ดังนี้ครับ
https://plus.google.com/share?url=url&text=title
วิธีทำ Javascript Twitter Share
สำหรับการแชร์ผ่าน Twitter เบื้องต้นข้อมูลที่นำมาแสดงจะถูกดึงมาจาก meta tag twitter แต่ถ้าไม่มีข้อมูลอยู่ก็จะใช้ข้อมูลในลักษณะเดียวกับ facebook และ google+ คือใช้ข้อมูล html meta tag มาแสดงแทน ตัวอย่าง twitter meta tag
<meta name="twitter:title" content="บริษัท โค๊ดบี จำกัด"> <meta name="twitter:description" content="รับทำเว็บไซต์และโมบายแอพพลิเคชั่น"> <meta name="twitter:creator" content="@codebee"> <meta name="twitter:image" content="https://www.codebee.co.th/logo.png">
และสามารถแชร์ข้อมูลหรือทวีตหน้าเว็บไซต์ด้วย Twitter URL Share ตัวอย่างเช่น
http://www.twitter.com/share?url=url&text=title
การแชร์ข้อมูลทั้ง 3 โซเชียลสามารถเขียนให้ทำงานในลักษณะเดียวกันด้วย Javascript ได้ดังนี้ครับ
var winWidth = 600; var winHeight = 600; var title = 'หัวข้อเว็บไซต์'; var caption = 'รายละเอียดโดยย่อ'; var description = 'รายละเอียดเต็ม'; var url_image = 'รูปที่ต้องการให้แสดงตอนแชร์'; function shareFacebook(){ var url = 'https://www.facebook.com/sharer.php?u='+web+'&caption='+slogan+'&description='+description+'&picture='+url_image; window.open(url,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height='+winWidth+',width='+winHeight); } function shareTwitter(){ var url = 'http://www.twitter.com/share?url='+web+'&text='+title; window.open(url,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height='+winWidth+',width='+winHeight); } function shareGoogle(){ var url = 'https://plus.google.com/share?url='+web+'&text='+title; window.open(url,'','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height='+winWidth+',width='+winHeight); }
สามารถใช้คำสั่ง onClick เพื้อแชร์ข้อมูลหน้าเว็บไซต์นั้น ๆ ได้ทันที ตัวอย่างเช่น
<a onClick="shareFacebook();">Facebook Share</a> <a onClick="shareTwitter();">Twitter Share</a> <a onClick="shareGoogle();">Google+ Share</a>