วิธีทำ Javascript Share ทั้ง 3 โซเชียล Facebook Google Twitter

codebee

7 years ago

วิธีทำ 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 ตัวอย่างเช่น
```
&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>