วิธีล็อคบทความ โดยถ้าจะอ่านได้ ต้องกด Like Facebook Page ก่อน

iFew — Fri, 24 Feb 2017 10:57:50 +0000

เห็นมีเว็บไซต์ญี่ปุ่นทำ น่าสนใจดี คือเปิดเข้าไปแล้วผมเจอหัวข้อข่าว รูปภาพ กับเกริ่นนำ แต่พออยากเข้าไปอ่านต่อ ต้องกด 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

Do you want to see more

ส่วนของปุ่ม Login Facebook (ซึ่งจะมี

ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
ถ้าคนเข้ามา ยังไม่ได้ Login Facebook จะแสดงส่วนนี้ เพื่อให้กดปุ่ม Login

Please Login Facebook before

ส่วนของปุ่ม Like Facebook Page (ซึ่งจะมี

ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
ถ้าคนเข้ามามีการ Login Facebook ไว้แล้ว จะเจอส่วนนี้
โดยถ้าอยากแก้ให้ไปกด Like Page ไหน ก็แก้ที่สีน้ำเงินนะครับ

Please click LIKE to see more

https://www.facebook.com/thinkjalearn/” data-layout=”box_count” data-action=”like” data-size=”large” data-show-faces=”false” data-share=”true”>

ส่วนของข้อมูลเต็ม (ซึ่งจะมี

ครอบอยู่ เพราะเราจะเอาไว้ ซ่อน/แสดง มันได้)
เมื่อ Login Facebook และกด Like Page ที่เรากำหนด ส่วนนี้ถึงจะแสดงให้เห็น
ซึ่งสีน้ำเงินคือก้อนข้อมูลที่เราจะให้แสดง

Ah Ha!!!

มาดูส่วนของ CSS กัน จะมีสั้นๆ ให้เอาไว้ใน
ซึ่งเราจะให้บรรดา ปุ่ม Login, ปุ่ม Like, ข้อมูลเต็ม ถูกซ่อนไว้ก่อน และให้ Javascript เป็นตัวตรวจสอบสถานะจาก Facebook ว่าจะให้เห็นส่วนไหนบ้าง

ส่วนของ 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 ช่องทาง คือ

1. ผู้อ่านยังไม่ sign-in Facebook, และยังไม่ Like Page เรา

2. ผู้อ่านยังไม่ sign-in Facebook, แต่เคย Like Page เราแล้ว

3. ผู้อ่านได้เข้าระบบ Facebook ไว้แล้ว, แต่ยังไม่เคย Like Page เรา

4. ผู้อ่านได้เข้าระบบ Facebook ไว้แล้ว, และเคย Like Page เราแล้ว

จบ..

Facebook Graph API – Few Steps – ก้าวสั้นๆ แต่ไปเรื่อยๆ

วิธีล็อคบทความ โดยถ้าจะอ่านได้ ต้องกด Like Facebook Page ก่อน

ขั้นตอนการทำงาน

โค้ดหลักๆที่ใช้ทำงาน

Do you want to see more