มาติด Facebook Like ให้กับกระทู้กัน

earthdroid · โพสต์ 2010-5-2 19:47:18

แก้ไขล่าสุดโดย suthida เมื่อ 2010-7-4 13:43

แก้ไขล่าสุดโดย earthdroid เมื่อ 2010-5-3 22:07

พอดีไปลองแงะๆดูแล้วติดได้ เลยมาแนะนำครับ ติดแล้วจะเป็นแบบนี้นะครับ

พอใครมากด Like แล้วจะไปโผล่ที่เฟซบุคของคนนั้นด้วย ช่วยโปรโมทเว็บได้มหาศาล

เอาบทความไปแปะที่ไหน ใส่เครดิตให้ด้วยนะครับ http://earthdroid.cmudd.com/

ดูตัวอย่างการใช้งานจริงได้ที่ http://www.thaiandroidphone.com/ นะครับ ^^

-----------------------------------------------------------------
แบ่งเป็นสองขั้นตอนใหญ่ๆนะครับ
1. ขั้นเตรียมการ โดยติดตั้งสคริป XFBML ก่อน
2. ติดตั้งกล่อง Like

ขั้นเตรียมการ
1. ไปที่โฟลเดอร์เทมเพลตปัจจุบัน เปิดไฟล์ header.htm ขึ้นมา (ก่อนทำแบคอัพด้วยนะ)
2. แก้โค้ด จากเดิม

<html xmlns="http://www.w3.org/1999/xhtml">

คัดลอกไปที่คลิปบอร์ด

แก้เป็น

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/"
xmlns:fb="http://www.facebook.com/2008/fbml">

คัดลอกไปที่คลิปบอร์ด

3. ไปลงทะเบียนเว็บของเราไว้กับเฟซบุค http://developers.facebook.com/setup/

4. ไปที่ http://www.facebook.com/developers/apps.php แล้วก็อป หมายเลขแอพพลิเคชั่น ออกมา (ต่อไปจะเรียกว่า App ID)

5. ไปที่ http://graph.facebook.com/ยูเซอร์เนมเฟซบุค แล้วก็อปเลข Admin ID ไว้
- เช่นของผม http://graph.facebook.com/earthchie เลข Admin ID คือ 581849270

6. เอา Meta tag นี้ไปวางต่อท้าย Meta tag เดิมๆที่มีอยู่

<meta property="fb:admins" content="Admin ID"/>
<meta property="fb:app_id" content="App ID" />
<meta property="og:site_name" content="ชื่อเว็บของเรา"/>
<meta property="og:type" content="website" />

คัดลอกไปที่คลิปบอร์ด

อย่าลืมแก้ข้อมูลใน content="xxx" ยกเว้น website ไม่ต้องแก้

7. เอาโค้ดนี้ไปวางต่อท้ายแทก </head>

<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'App ID', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>

คัดลอกไปที่คลิปบอร์ด

อย่าลืมแก้ App ID ในบรรทัดนี้ด้วย
FB.init({appId: 'App ID', status: true, cookie: true,

จบขั้นเตรียมการ ต่อไปมาติดตั้งกล่อง Like
-----------------------------------------------

ขั้นที่สอง
1. ไปที่ไฟล์ viewthread_node.htm แล้วมองหาโค้ดนี้ (กด ctrl+f หาก็ได้ไวดี) - อย่าลืมแบคอัพไฟล์

<td class="postcontent postbottom">

คัดลอกไปที่คลิปบอร์ด

2. วางโค้ดนี้ต่อท้ายไปเลย

<fb:like layout="standard" show_faces="true" width="650" action="like" colorscheme="light"></fb:like>

คัดลอกไปที่คลิปบอร์ด

หรือสามารถไป Generate โค้ดเองก็ได้ http://developers.facebook.com/docs/reference/plugins/like
ได้โค้ดมาแล้วเอาไปใส่ระหว่างแทก  โค้ดที่ gen มา 
ของเล่นอื่นๆเฟซบุคมีอีกเพียบ ลองประยุกต์ติดดูครับ http://developers.facebook.com/plugins

3. ลองรีเฟรชดูครับ ถ้ายังไม่มาให้รอซักแป้ป มันอาจจะค้างที่แคชอยู่

ป.ล. ผมไม่ได้เล่นดิสกัสประจำ หากผิดพลาดประการใดขออภัยด้วยครับ ^^
ป.ล.2 ใครอยากให้กล่อง Like กระเถิบขึ้นมาสูงอีกนิด ไปอ่านที่นี่นะครับ http://www.discuzthai.com/redire ... 5&fromuid=33413

jaideejung007 · โพสต์ 2010-5-2 19:55:23

สุดยอดมาก

ขั้นตอนละเอียดได้ใจ

เก็บๆๆ กระทู้เป็นกระทู้โปรดดีกว่า

จัดไป +2

ลองทำดูซะแล้ว

เพื่อมี เกสมาเยี่ยมเยอะๆ

aaa.111 · โพสต์ 2010-5-2 20:02:43

วาวๆ ขอบคุณครับ แต่มั้นน่าจะเป็นภาษาไทยนะ ^^

earthdroid · โพสต์ 2010-5-2 20:08:14

ใครติดแล้วเอาเว็บมาอวดกันบ้างนะครับ ^^

earthdroid · โพสต์ 2010-5-2 20:24:19

ขออนุญาตแก้ไขนิดหน่อยนะครับ เจอ error

จากเดิม ขั้นเตรียมการข้อ 6 เปลี่ยน

<meta property="og:type" content="forum" />

เป็น

<meta property="og:type" content="website" />

นะครับ ไม่งั้นจะ error ตอนกด

earthdroid · โพสต์ 2010-5-2 21:30:47

แก้ไขอีกรอบนะครับ

ขั้นที่สอง ข้อสุดท้าย ใส่แทก

 โค้ดที่ gen มา 

แบบนี้นะครับ แก้ไขโพสต์แรกแล้ว ยังไงไปอ่านโพสต์แรกสุดจะเข้าใจง่ายกว่าครับ

sandspinner · โพสต์ 2010-5-3 15:25:24

เอยยยยย สิ่งนี้แหละที่รอคอย อะๆๆ +1 ไปซะ

sandspinner · โพสต์ 2010-5-3 15:44:46

งงนิดหน่อย user ดูตรงไหน Meta tag อยู่ตรงไหนอะ

earthdroid · โพสต์ 2010-5-3 16:49:54

USER ID ดูได้จากลิงค์นี้ครับ

http://graph.facebook.com/ยูเซอร์เนมเฟซบุคของเรา

เข้าไปแล้ว ช่อง id="xxxx" นั่นแหละครับ User ID ของเรา

ส่วน Meta tag เปิดไฟล์ header.htm แล้วจะเจอโค้ดประมาณนี้เรียงกันเต็มเลยครับ

<meta name="keywords" content="{$metakeywords}$seokeywords" />
<meta name="description" content="$metadescription $bbname $seodescription - Discuz! Board" />
<meta name="generator" content="Discuz! $version" />
<meta name="author" content="Discuz! Team and Comsenz UI Team" />
<meta name="MSSmartTagsPreventParsing" content="True" />
<meta http-equiv="MSThemeCompatible" content="Yes" />
<meta http-equiv="x-ua-compatible" content="ie=7" />

คัดลอกไปที่คลิปบอร์ด

ให้เอาโค้ด meta tag ของเฟซบุค วางต่อท้ายโค้ดพวกนี้ได้เลย

sandspinner · โพสต์ 2010-5-3 17:14:18

ตอบกลับ 9# earthdroid

User นี้คือ e-mail เราหรอเวลาผมล๊อคอิน ใช้ e-mailล๊อคอินอะ

บัญชี		จำสถานะนี้ไว้ในครั้งหน้า	ลืมรหัสผ่าน
รหัสผ่าน			สมัครสมาชิก

มาติด Facebook Like ให้กับกระทู้กัน

ขออภัย! โพสต์นี้มีไฟล์แนบหรือรูปภาพที่ไม่ได้รับอนุญาตให้คุณเข้าถึง

คะแนน