เห็นมีเว็บไซต์ญี่ปุ่นทำ น่าสนใจดี คือเปิดเข้าไปแล้วผมเจอหัวข้อข่าว รูปภาพ กับเกริ่นนำ แต่พออยากเข้าไปอ่านต่อ ต้องกด Like Facebook Page เขาก่อน และที่สนุกกว่านั้นคือ แต่ละบทความ บางทีก็เป็น Page อื่นๆ ประหนึ่งว่าเขารับจ้างปั่นไลค์ผ่านบทความ (นี่เป็น Model ทำเงินได้แบบเลยนะเนี่ย)
ไปลองดู Demo และกด View source code กันเองนะครับ ที่
https://myifew.com/source/js/fb-page-like-read/
ขั้นตอนการทำงาน
ก่อนกด Like Fan Page จะเห็นแบบนี้
แต่ถ้ากด Like ปุ๊บ (หรือเคย Like Page เรามาแล้ว) จะขึ้นแบบนี้
โค้ดหลักๆที่ใช้ทำงาน
ข้อมูลตัวอย่างที่ให้เห็นก่อนกด Like
<h2>Do you want to see more</h2>
<p><img src=”https://myifew.com/source/js/fb-page-like-read/example.jpg” width=”300″/></p>
ส่วนของปุ่ม Login Facebook (ซึ่งจะมี <div> ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
ถ้าคนเข้ามา ยังไม่ได้ Login Facebook จะแสดงส่วนนี้ เพื่อให้กดปุ่ม Login
<div id=”login_button”>
<p>Please Login Facebook before</p>
<fb:login-button scope=”public_profile,email,user_likes” onlogin=”checkLoginState();”></fb:login-button>
</div>
ส่วนของปุ่ม Like Facebook Page (ซึ่งจะมี <div> ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
ถ้าคนเข้ามามีการ Login Facebook ไว้แล้ว จะเจอส่วนนี้
โดยถ้าอยากแก้ให้ไปกด Like Page ไหน ก็แก้ที่สีน้ำเงินนะครับ
<div id=”container_notlike”>
<p>Please click LIKE to see more</p>
<div class=”fb-like” data-href=”https://www.facebook.com/thinkjalearn/” data-layout=”box_count” data-action=”like” data-size=”large” data-show-faces=”false” data-share=”true”></div>
</div>
ส่วนของข้อมูลเต็ม (ซึ่งจะมี <div> ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
เมื่อ Login Facebook และกด Like Page ที่เรากำหนด ส่วนนี้ถึงจะแสดงให้เห็น
ซึ่งสีน้ำเงินคือก้อนข้อมูลที่เราจะให้แสดง
<div id=”container_like”>
<p>Ah Ha!!!</p>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/PPGhJ9biv_I?ecver=1″ frameborder=”0″ allowfullscreen></iframe>
</div>
มาดูส่วนของ CSS กัน จะมีสั้นๆ ให้เอาไว้ใน <head>
ซึ่งเราจะให้บรรดา ปุ่ม Login, ปุ่ม Like, ข้อมูลเต็ม ถูกซ่อนไว้ก่อน และให้ Javascript เป็นตัวตรวจสอบสถานะจาก Facebook ว่าจะให้เห็นส่วนไหนบ้าง
<style type=”text/css”>
#container_notlike, #container_like, #login_button {
display:none
}
</style>
ส่วนของ Javascript เพื่อเรียกใช้ Facebook Graph API
ให้เราแก้สีน้ำเงินเป็น App ID ของเราเอง โดย App ID นั้นจะต้องมีการการขอ Permission ชื่อ user_likes ไว้ด้วย (ให้ไปสร้าง App ID ได้ที่ https://developers.facebook.com/apps/, ส่วนใครสร้างไม่เป็น ลองหาจาก Google ดูนะครับ ว่า วิธีสร้าง Facebook app id)
window.fbAsyncInit = function() {
FB.init({
appId : ‘968640803176918‘,
xfbml : true,
status : true,
version : ‘v2.8’
});
FB.AppEvents.logPageView();
FB.getLoginStatus(function(response) {
if (response.status == ‘connected’) {
checkLikePage();
} else {
$(‘#login_button’).show();
}
});FB.Event.subscribe(‘edge.create’, display_content);
};(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
ส่วนของ Javascript เพื่อตรวจสอบการ Login Facebook และ Like Page
ส่วนของสีน้ำเงิน ให้แก้เป็น Page ID ของเรา (วิธีการดู Page ID คือ ให้เข้าไปที่หน้า Page กดแท็บ About และเลื่อนลงไปดูล่างสุด)
function checkLoginState() {
FB.getLoginStatus(function(response) {
$(‘#login_button’).hide();
checkLikePage();
});
}function checkLikePage() {
var page = ‘1354798577894814‘;
FB.api(‘/me/likes/’+page, function(response_like) {
//console.log(response_like);
if(response_like.data.length == 0) {
$(‘#container_notlike’).show();
} else {
$(‘#container_like’).show();
}
});
}
ส่วนของ Javascript เพื่อ เปิด/ปิด ข้อมูล
function display_content() {
$(‘#container_like’).show();
$(‘#container_notlike’).hide();
}
function hide_content() {
$(‘#container_like’).hide();
$(‘#container_notlike’).show();
}
ทั้งหมดมีประมาณนี้ รองรับ Case ที่จะเกิด 4 ช่องทาง คือ
จบ..