[WordPress] ผนึกกำลัง Facebook, Twitter และ Google+

ตอนนี้อะไรที่เป็น Social Network ช่วยให้เว็บของเรามีการประชาสัมพันธ์ออกไปได้ง่ายกว่าแต่ก่อน ซึ่งตัว WordPress เองก็มี Plugin อยู่หลาย ๆ ตัวที่ใช้สำหรับที่จะผนึกกำลัง WordPress ของเรากับบรรดา Social Network ต่าง ๆ แต่ครั้งนี้ไม่ได้มาแนะนำ Plugin นะครับ แต่เราจะมาเขียนการเชื่อมต่อ ๆ ต่างเองครับ ^^

Facebook Comment

เดี๋ยวนี้คนเราก็ Sign in facebook ไว้ตลอดอยู่แล้ว เลยเป็นเรื่องง่ายที่จะใช้ Facebook Comment แทนที่ WordPress Comment ที่เราใช้งานอยู่

นอกเรื่องนิดนึง เรายังมีระบบ Comment แบบอื่นที่ใช้แทนที่ตัว WordPress Comment ได้ อย่างเช่น IntenseDebate หรือ Disqus ซึ่งทั้งสองตัวก็มี Plugin ที่ใช้งานกับ WordPress โดยเป็น IntenseDebate Comments และ Disqus Comment System

ซึ่งจริง ๆ แล้วตัว Facebook Comment นั่นก็มี Plugin สำหรับ WordPress ไว้อยู่เหมือนกัน ก็คือ Facebook Comments for WordPress แต่ไม่รู้เหมือนกัน ว่าทำไมบางทีบางคนที่ติดตั้งก็ใช้งานมันไม่ได้ ดังนั้นก็ตัดปัญหาโดยไปจัดการเขียนมันเองแล้วกัน

สร้าง Facebook Application

ก่อนจะติดตั้ง Facebook Comment ลงในเว็บของเรา ให้เราไปสร้าง Facebook Application ก่อน ไปที่ Facebook Application กดที่ “+ Create New App” จะปรากฎแบบนี้ ก็กรอกข้อมูลลงไป

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [1]

หลังจากที่สร้างเสร็จแล้ว ก็จะได้ Application มาประมาณนี้ครับ

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [5]

ติดตั้ง Facebook Comment ลงในเว็บของเรา

ไปเอา Code จากที่ Facebook Comments plugin page กรอกข้อมูลของตัว Facebook Comment ลงไป

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [6]

กด Get Code เราก็จะได้ส่วนของ Code ที่เราจะนำไปแปะในเว็บของเรา อย่าลืมเลือก Application ให้ตรงกับที่เราสร้างขึ้นมาด้วยนะครับ

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [7]

คราวนี้เราไปแก้ไขตัว header.php โดยนำ code ในส่วนหัวข้อที่ 1 ไปวางแปะหลังจาก tag body

[php]
<div id="fb-root"></div>
<script>(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/all.js#xfbml=1&appId=เลขที่ Application ID ของเรา";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
[/php]

หลังจากนั้นเราจะนำส่วนหัวข้อที่ 2 ไปแทนที่ส่วนของ WordPress Comment แต่อย่าลืมเปลี่ยนในส่วนของหัวข้อ data-href ให้เป็น <?php the_permalink(); ?> ด้วยนะครับ เพื่อที่เราจะแยก Comment ในแต่ละหน้าออกจากกัน

[php]
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-num-posts="10" data-width="870"></div>
[/php]

แล้วส่วนนี้จะไปวางแปะที่ไหนเหรอ ก็ให้ไปที่ comments.php แล้วนำ code นี้ไปวางแปะแทนที่ทั้งหมดไปเลย หรือจะเขียนเงื่อนไขในการแสดงก็ตามใจแต่เราจะปรับแต่งเลยครับ ซึ่งเราสามารถไปดูรวม Comment ในเว็บเราได้ที่ Comment Moderation tool

ดึง Latest Tweet ของเรามาโชว์

โดยเราจะดึงตัว RSS ของตัว Twitter มาใช้ ซึ่งตัว RSS ที่เราจะใช้ก็คือ

https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=xxxxx

ตัว xxxxx นั้นก็ให้เราใส่ชื่อลงไป เช่นของผม @Rabbitinblack ก็ใส่เป็น

https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=rabbitinblack

ส่วน Code ที่เราจะนำไปใช้ก็มาจาก CSS Tricks โดยปรับมาใช้แบบนี้ครับ

[php]
<?php
include_once(ABSPATH . WPINC . ‘/feed.php’);
$rss = fetch_feed(‘https://api.twitter.com/1/statuses/user_timeline.rss?screen_name=rabbitinblack’);
$maxitems = $rss->get_item_quantity(3);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo ‘<li>No items.</li>’;
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li><a href='<?php echo $item->get_permalink(); ?>’><?php echo $item->get_title(); ?></a></li>
<?php endforeach; ?>
</ul>
[/php]

จากที่ผมทดลองดูตัว get_item_quantity จะได้สูงสุดที่ 20 นะครับ ที่เหลือจะเพิ่มเติม code หรือจะนำไปวางไว้ตรงไหนก็แล้วแต่เราเลยครับ

ดึง Tweet ที่เรา Favorite ไว้

ถ้าตามไปดูที่เว็บ CSS Tricks จะเห็นว่าเค้าดึงเป็น Tweet ที่ Favorite ไว้ ดังนั้นเราจึงทราบว่า ต้องใช้ RSS ที่ตัวไหน

https://twitter.com/favorites/xxxxx.rss

เช่นกันในส่วนของ xxxxx ก็ให้เป็นชื่อแทน

https://twitter.com/favorites/rabbitinblack.rss

ใช้ Official Twitter Widget

เราสามารถสร้าง Twitter Widget ได้ง่าย ๆ โดยไปที่ official Twitter profile widget

[WordPress] ผนึกกำลัง Facebook, Twitter และ Google+ [9]

และหลังจากที่ปรับแต่งค่าต่าง ๆ เสร็จแล้ว ก็นำ Code ไปใช้งานได้แล้วครับ วิธีที่ง่ายที่สุดก็คือในส่วนของหลังบ้าน WordPress ของเรา เข้าไปที่

Appearance => Widgets

แล้วก็เพิ่มตัว Text Widget ลงไป แล้วในช่องที่ให้กรอกข้อความ ก็แปะ Code ที่ได้มาจากตัว Official Twitter Widget มาแปะก็เสร็จแล้วครับ

แต่ Plugin สำหรับ Twitter ก็มีนะ

แน่นอนครับ สำหรับ WordPress ที่มี Plugin ให้เราเลือกเยอะแยะมากมายอยู่แล้ว จะไม่มี Plugin สำหรับตัว Twitter Widget ก็ยังไงอยู่

เพิ่มปุ่ม Share ไปยัง Facebook, Twitter และ Google+

[WordPress] ผนึกกำลัง Facebook, Twitter และ Google+ [10]

เรามาดูกันทีละตัวเลยแล้วกันนะครับ โดย Code เราก็ต้องมีการปรับเปลี่ยนเพื่อให้ใช้ในทุกจุด

Facebook

สำหรับตัว Facebook Like Button นั้น เมื่อเราเข้าไปปรับแต่งค่าต่าง ๆ เพื่อนำมาใช้งานในเว็บเราแล้ว

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [11]

โดย Code ที่ได้ในส่วนที่ 1 จะเหมือนกับที่เราได้ตอนทำ Facebook Comment ดังนั้นถ้าเราเคยแปะ Code ในส่วนที่ 1 ในส่วนของ header.php ด้านล่างของ tag body ไปแล้ว ก็ไม่ต้องแปะซ้ำ

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [12]

แต่ในส่วนที่ 2 นั้น จะมีการเพิ่ม href="<?php the_permalink(); ?>" ลงไปเพิ่มเติมจาก

[php]
<div class="fb-like" data-href="https://rabbitinblack.com" data-send="false" data-layout="button_count" data-width="55" data-show-faces="false"></div>
[/php]

เป็น

[php]
<div class="fb-like" data-href="https://rabbitinblack.com" href="<?php the_permalink(); ?>" data-send="false" data-layout="box_count" data-width="55" data-show-faces="false"></div>
[/php]

Twitter

สำหรับ Twitter Button นั้น เลือกที่ Share a link เพื่อสร้างปุ่มขึ้นมา

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [13]

ซึ่ง Code ที่ได้มาเป็นแบบนี้ครับ

[php]
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Rabbitinblack">Tweet</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
[/php]

โดยเราจะเพิ่มส่วนของ data-text="<?php the_title(); ?>" และ data-url="<?php the_permalink(); ?>" แต่ถ้าอยากได้ปุ่มแบบมีการนับในแนวตั้งก็ให้ใส่ data-count="vertical" ลงไปด้วย

[php]
<a href="https://twitter.com/share" class="twitter-share-button" data-via="Rabbitinblack" data-count="vertical" data-text="<?php the_title(); ?>" data-url="<?php the_permalink(); ?>">Tweet</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
[/php]

ซึ่งเราสามารถหาข้อมูลของ Tweet Button ได้เพิ่มที่ official Twitter button documentation page

Google+

และสุดท้ายกับปุ่ม +1 ของ Google+ นั้น เมื่อเราปรับแต่งรูปแบบของปุ่ม +1 แล้ว

[Wordpress] ผนึกกำลัง Facebook, Twitter และ Google+ [14]

Code ที่ได้มานั้น

[php]
<!– Place this tag where you want the +1 button to render –>
<g:plusone size="tall"></g:plusone>

<!– Place this render call where appropriate –>
<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
[/php]

เราแค่เพิ่ม href="<?php the_permalink(); ?>" ลงไปในส่วน g:plusone แบบนี้ครับ

[php]
<!– Place this tag where you want the +1 button to render –>
<g:plusone size="tall" href="<?php the_permalink(); ?>"></g:plusone>

<!– Place this render call where appropriate –>
<script type="text/javascript">
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
[/php]

เท่านี้ก็เสร็จแล้ว เราสามารถหาข้อมูลของปุ่ม +1 เพิ่มเติมได้ที่ official Google+ button documentation page ครับ ^^


Posted

in

by

Comments

28 responses to “[WordPress] ผนึกกำลัง Facebook, Twitter และ Google+”

  1.  Avatar
    Anonymous

    การทำปุ่ม Like tweet G+ ดีมากครับ ผมก็ทำอยู่ เพิ่ม code เอง ไม่ได้ใช้ plugin ใดๆ แต่สงสัยนิดนึงว่า เวลาที่เราสร้างไว้ที่ไฟล์ single.php แต่ที่หน้า index.php จำนวนการกด Like ทั้งสองหน้าของแต่ละบทความไม่ตรงกัน เพราะอะไรครับ ส่วน fb comment ก็มักเกิดปัญหาฟ้องว่า ไม่สามารถแสดงผลหรือเชื่อมต่อได้กับบางบทความ ตอนนี้ผมเลยไม่ใช้เลย เพราะเซงมาก

    1.  Avatar
      Anonymous

      ถ้าใช้เขียนตามที่อธิบายไป มันต้องเท่ากันอยู่แล้วครับ กรณีที่ไม่เท่ากัน จะอยู่ที่ URL ที่เราใช้งาน มันคนละตัว โดยยึดหลักที่ href=”xxxx” เป็นหลักอะครับ

      ส่วน fb comment เนี่ยรู้สึกว่าที่ผมเคยใช้แล้วมีปัญหาแบบที่บอก มันจะเป็นกับหน้าที่มี URL ภาษาไทยผสมอยู่ด้วยอะครับ ไม่รู้ว่าจะเป็นเหมือนกันหรือเปล่า

      1.  Avatar
        Anonymous

        เข้าใจแล้วครับ คือที่ผมใส่คือ code ธรรมดาจาก fb ส่วนเรื่อง comment น่าจะเป็นอย่างที่พี่ว่าแน่เลย

  2.  Avatar
    Anonymous

    ผมลองใช้ code นี้ครับ แต่มันไม่ได้อะพี่ <div class="g-plusone" href="” data-size=”tall”>

    1.  Avatar
      Anonymous

      เออ มันต้องเป็น <?php the_permalink(); ?> ดิครับ – -“

  3. VattanaLapanich Avatar
    VattanaLapanich

    พี่ครับ ถ้าเราใช้ facebook comment กับ wordpress comment ปกติ อะไรทำให้ hosting ทำงานหนักกว่ากันครับ และการผนวก f,g,t จะทำให้ host ทำงานหนักหรือไม่ครับ

    1. rabbitinblack Avatar
      rabbitinblack

      ถามขนาดนี้ ผมก็ยังไม่ทราบเหมือนกันครับ

      แต่คิดว่าเราไม่น่าจะใช้งานอะไร host หนักขนาดที่มันจะเห็นผลอย่างชัดเจนขนาดนั้นนะครับ

      1. VattanaLapanich Avatar
        VattanaLapanich

        ขอบคุณครับ ตอนนี้กำลังทำเว็บไซต์ให้ลูกค้าอยู่ เจ้าแรกในชีวิตผมเลย ถ้าเสร็จแล้วยังไงจะเอามาให้พี่ติชมซักหน่อยครับ

        1. rabbitinblack Avatar
          rabbitinblack

          สู้ ๆ ครับผม ถ้ามีอะไรพอจะตอบให้ได้ ก็จะตอบให้เหมือนเดิมครับ ^^

  4. Webmedesigns Avatar
    Webmedesigns

    การสร้าง appid ของ facebook ต้องเสียตังค์สัปดาห์ละ 9 บาท เหรอครับ? 
    แล้วยกเลิกได้มั้ยครับ 

    1. rabbitinblack Avatar
      rabbitinblack

      เออ ที่ไหนบอกเหรอครับ ว่าต้องเสียตังค์ ขอ URL หน่อยครับ

      1. Webmedesigns Avatar
        Webmedesigns

        ขั้นตอนในการสร้าง appid ครับ ให้ยืนยันหมายเลขโทรศัพท์ก่อนนะครับ แล้วจะมี  sms มายังโทรศัพท์ใบอกว่าต้องเสียค่าบริการ 9 บาท / week ครับ 

        1. rabbitinblack Avatar
          rabbitinblack

          ผมไม่เห็นเคยเจอเลยนะครับ ทุกวันนี้ใช้ไม่รู้กี่ตัว ไม่เห็นเสียเลยซักตัวนะครับ sms ที่บอกมันเป็นของอะไรครับ ไม่น่าจะเป็นของ facebook เองนะครับ

          1. Webmedesigns Avatar
            Webmedesigns

            https://aisclub.ais.co.th/WebboardDetail.aspx?mid=28&room=56&qid=9725

            ตอนที่เราสมัครเป็น developer ให้กรอกเบอร์โทร เพื่อยืนยัน
            แล้ว facebook ก็จะใส่บริการ sms ให้อัตโนมัติ เสียค่าบริการที่บอกไป
            เมื่อตะกี้ผมลองเข้าไปยกเลิก ยากน่าดู
            สุดท้ายได้วิธีคือ 
            1. พิมพ์ Stop 
            2. ส่งไปที่เบอร์ 42665 

            แค่นี้ครับ
            ขอบคุณนะครับ
            สำหรับข้อมูลดีๆ เกี่ยวกับ wordpress 
            มีหลายเรื่องยังสงสัย เดี๋ยวทยอยถามนะครับ

          2. rabbitinblack Avatar
            rabbitinblack

            อ๋อ แบบนี้นี่้เอง ว่าแล้วว่าผมไม่เคยโดนเก็บค่าบริการอะไรนะ

  5. Pix Pix Evitcepsrep Avatar

    ถ้าเราใช้แต่ระบบ share โค้ดชุดที่ 1 ใส่เหมือนตัวอย่าง แล้วโค้ดชุดที่ 2 ใส่ที่ไฟล์ไหน

    1. rabbitinblack Avatar
      rabbitinblack

       ยังเข้าใจคำถามเลยอะ – -“

  6. Pix Pix Evitcepsrep Avatar

    งั้นถามใหม่ ถ้าเราไม่ใช่ fb comment ใช้แค่ like เราจะเอาโค้ดส่วนที่ 2 ไปไว้ในไฟล์ไหน

    1. rabbitinblack Avatar
      rabbitinblack

       ก็เอาไปไว้ตรงที่เราจะวางปุ่ม like ไง

      1. Pix Pix Evitcepsrep Avatar

        เราอธิบายไม่รุ้เรื่องจริงด้วย ตอนนี้เราหาเจอแล้ว เอาใส่ไว้ที่ single post (single.php)

        ตอนนี้กำลังหาว่าจะใส่ให้หน้า product (ระบบ cart) 

  7. Narasak Avatar
    Narasak

    สวัสดีครับ

    ปุ่มแชร์ของผมยังเรียงตัวไม่สวยงาม (ปุ่ม like อยู่ต่ำกว่าเพื่อน) ไม่ทราบต้องแก้ไขยังไงครับ

    ขอบคุณครับ

    1. rabbitinblack Avatar
      rabbitinblack

      ลองกำหนด padding ให้กับตัว div ของ tweet ดิครับ

  8. LikeFreeVer Avatar
    LikeFreeVer

    อยากจะวางปุ่ม Share, Like และ Comment ของ Facebook ในหน้าเดียวกัน มีวิธีมั้ยครับ ผมลองวาง 3 อย่างพร้อมกัน จะขึ้นแต่ปุ่ม Share ตอนนี้เลยวางแค่ Like กับ Comment

    1. rabbitinblack Avatar
      rabbitinblack

      อ๋อ รู้สึกว่า script ของตัว share จะมีปัญหากับ Like และ Comment ครับ ด้วยความที่ Share ตอนนี้ไม่จำเป็นแล้วด้วยสำหรับ Facebook เนื่องจากเค้าพัฒนาให้แค่ Like มันก็พิมพ์ข้อความ ไปโผล่หน้า Wall เหมือน Share ทุกอย่างแล้วครับ

  9. forgetme Avatar
    forgetme

    ขอโทษนะครับหารบกวน กวนเพื่อนๆ ทวิเตอร์ช่วยทำแบบสอบถามหน่อยนะครับ
    ขอขอบคุณที่ท่านเสียสละเวลาในครั้งนี้ด้วยครับ (-/|-)
    https://docs.google.com/forms/d/1byMAaEc6CmvMir5n24ykmLaqFgLLXPwj__whhU-saPk/viewform

  10. Siamaof Avatar
    Siamaof

    ปรึกษาหน่อยน่ะครับ พอจะมีเครื่องมือไหนที่ผมคีย์ข้อความบนเว็บที่เขียนขึ้นเอง พอโพสข้อความในเว็บ ก็จะไปโพสลงหน้า fanpage ทีเรากำหนดหรือ fanpage ที่เราสร้างขึ้นมาครับ

Leave a Reply to rabbitinblack Cancel reply

Your email address will not be published. Required fields are marked *