Facebook กันเถอะ

蓝月 (lán yuè) · 01 พ.ค. 2010, 00:42 น.

exteen พัฒนาเป็น widget ใน blog แล้วจ้ะ เจ๋งเวอร์ๆ

http://champcpe.exteen.com/20100430/widget-facebook-like

inatmon · 01 พ.ค. 2010, 01:07 น.

ใส่แล้วเห็นปุ่ม แต่กดไม่ขึ้น (เหมือนเว็ปตูเปี๊ยบเลย

)

Earthchie · 01 พ.ค. 2010, 01:35 น.

อ้างคำพูดจาก: Kums เมื่อ 01 พ.ค. 2010, 00:39 น.
ก็เผื่อคนอื่นไม่เป็น จะได้มาหาอ่านในนี้ไงเล๊า ปั๊ดโธ่ว!!!!

โดนเลย

iannnnn · 01 พ.ค. 2010, 12:45 น.

ลองทำดูแล้ว ไม่ขึ้น

เอิร์ธลองดู source ให้หน่อยดิว่าในหน้านี้มันผิดไหม
http://www.f0nt.com/headline/designthailand/

Earthchie · 01 พ.ค. 2010, 14:05 น.

ไม่ทราบเหมือนกันว่าผิดตรงไหนแฮะครับ ก็วางโค้ดเหมือนของผมเดี๊ยะเลย

ไม่รู้เกี่ยวกันมั้ย แต่ผมเพิ่งสังเกตเห็นโค้ดใน JavaScript SDK

อ้างอิง<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: 'your 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>

มันต้องใส่ app id อะไรด้วยแฮะ

ดาเฉยๆ · 01 พ.ค. 2010, 14:18 น.

app id เป็นของเพจที่เราสร้างสำหรับคอมเม้นอ่ะค่ะ

ดูApplication IDในนี้ http://www.facebook.com/developers/apps.php

ปล. ทำแล้วไม่ขึ้นเหมือนกัน

เกี่ยวมั้ยว่าไม่ได้ตั้งลิงค์เอ็นทรี่เป็นตัวเลข ตั้งเป็นชื่ออะ

Earthchie · 01 พ.ค. 2010, 15:54 น.

ที่น่างงคือ ทำไมของผมมันขึ้นอ่ะ

http://earthdroid.cmudd.com/?p=4

อายจังยังทำไม่เสร็จ

ดาเฉยๆ · 01 พ.ค. 2010, 16:55 น.

หน้านี้เลยเหรอเอิร์ท
พี่ไม่เห็นกล่องคอมเม้นเลยอะ

Earthchie · 01 พ.ค. 2010, 17:19 น.

อ่าว

งงด้วยคน ทำไมผมเห็นอ่ะ ลอง sign out จาก facebook ก็เห็นอยู่นะ
แต่เอา firefox กับ ie เข้าไม่เห็นจริงๆด้วย (ทุกทีเล่น chrome)

แต่เอา chrome เข้าเว็บพี่แอนก็ไม่ขึ้นแฮะ

iannnnn · 01 พ.ค. 2010, 19:04 น.

งงละทีนี้

Earthchie · 01 พ.ค. 2010, 19:14 น.

ได้ละ มี Administer Comments เสร็จสรรพ

คราวนี้คิดว่าน่าจะใช้ได้แล้วหล่ะ วิธีการก็ แบ่งเป็น 2 ขั้นใหญ่ๆนะครับ
1. เตรียมการ โดยติดตั้ง XFBML ก่อน
2. เอา Social Plugins มาติดได้เลย

ขั้นแรก
1. สมัครสมาชิกก่อน http://developers.facebook.com/setup/ ง่ายๆ แค่กรอกชื่อเว็บ กับ url
- หลังจากนั้นเวลาจะแก้ไขอะไรเข้าไปที่ http://www.facebook.com/developers/apps.php นะครับ
2. ก็อป App ID ไว้ก่อน

3. จากนั้นที่ wordpress ไปที่แก้ไขไฟล์ header.php (อย่าลืมแบคอัพไว้ด้วย)
- เอาโค้ดนี้ไว้วางไว้ต่อจากแทก <body> อย่าลืมแก้ YOUR APP ID เป็น APP ID ที่ก็อปไว้ในข้อ 2

โค้ด เลือกทั้งหมด

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'YOUR 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>

4. ตรงแทก

โค้ด เลือกทั้งหมด

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

แก้เป็น

โค้ด เลือกทั้งหมด

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://opengraphprotocol.org/schema/" 
xmlns:fb="http://www.facebook.com/2008/fbml" <?php language_attributes(); ?>>

เพื่อทำให้แสดงผลใน IE ได้ ถ้าไม่แก้จะไม่โชว์ใน IE

5. ใส่ meta tag ลงในต่อจาก meta tag อันเก่าเลย

โค้ด เลือกทั้งหมด

<meta property="fb:admins" content="USER_ID"/>
<meta property="fb:app_id" content="113581508678006" />
<meta property="og:title" content="<?php wp_title(' ',true,'right'); ?>"/>
<meta property="og:site_name" content="YOUR SITE NAME"/>
<meta property="og:type" content="blog" />
<meta property="og:image" content="URL TO YOUR THUMBNAIL IMAGE"/>
<meta property="og:description" content="<?php bloginfo('description'); ?>"/>

อย่าลืมแก้ข้อมูลด้านใน content="xxx" นะครับ

เท่านี้ก็เตรียมการเสร็จ พร้อมใช้ปลั๊กอินได้ทุกตัวเลย

ต่อไปมาติดติดตั้ง Comments กันครับ
1. ไป Gen code กล่อง comments มาก่อน http://developers.facebook.com/docs/reference/plugins/comments
- ช่อง Unique ID เว้นว่างได้เลยครับ

2. เอาโค้ดที่ได้ ไปวางใน single.php (อย่าลืมแบคอัพไว้ก่อน) ตรงไหนก็ได้แล้วแต่ชอบ
ของผมเอาไปแทนที่คอมเมนต์เดิม

โค้ด เลือกทั้งหมด

<?php comments_template(); ?>

แทนที่เป็น

โค้ด เลือกทั้งหมด

<fb:comments numposts="10" width="550"></fb:comments>

3. เสร็จแล้วครับ ผมเทสกับ chrome4.1, firefox 3.5, ie7 แล้ว ใช้ได้ โพสต์แล้วไปโผล่ที่ Facebook ของคนโพสต์ด้วย

ดาเฉยๆ · 01 พ.ค. 2010, 20:02 น.

ที่บล็อกเอิร์ธเห็นแล้วนะ

แต่ทำเองมันไม่ขึ้นอะ

inatmon · 01 พ.ค. 2010, 20:36 น.

ได้ผลหรือเปล่าไม่รู้ ขอบวกพี่เอิร์ธไว้ก่อน

Earthchie · 01 พ.ค. 2010, 20:53 น.

เพิ่มเติมครับ ใส่เมตาแทกนี้ลงไปด้วย

<meta property="fb:app_id" content="APP ID" />

อย่าลืมแก้ข้อมูลใน content="xxxxx" ด้วยนะครับ ทุกอันเลย

inatmon · 01 พ.ค. 2010, 21:29 น.

ไม่ขึ้น.. เย่ๆ