Tag: twitter

  • [WordPress] ปรับแต่งส่วน Contact Info

    [WordPress] ปรับแต่งส่วน Contact Info

    ถ้าเราอยู่ในส่วนของ Dashboard ลองเข้าไปดูที่หัวข้อ Users -> Your Profile นะครับ เราจะพบว่าในส่วนของ Contact Info จะมีช่องให้กรอกข้อมูลแบบนี้

    [Wordpress] ปรับแต่งส่วนของ Contact Info [1]

    แต่ผมคิดว่า เดี๋ยวนี้เนี่ยไอ้เจ้า AIM, Yahoo IM แล้วก็ Jabber มันไม่ค่อยจะมีใครกรอกเท่าไหร่แล้ว

    [Wordpress] ปรับแต่งส่วนของ Contact Info [2]

    มาเปลี่ยนให้มันอินเทรนกันหน่อย เป็นพวก Facebook, Twitter แล้วก็ LinkedIn กันดีกว่านะครับ

    WordPress : ลบ AIM, Yahoo IM และ Jabber แล้วใส่ Facebook, Twitter และ LinkedIn ลงไป

    ให้เราเข้าไปใน functions.php แล้วแปะโค้ดเพิ่มเติมครับ

    [php]
    /* BEGIN Custom User Contact Info */
    function extra_contact_info($contactmethods) {
    unset($contactmethods[‘aim’]);
    unset($contactmethods[‘yim’]);
    unset($contactmethods[‘jabber’]);
    $contactmethods[‘facebook’] = ‘Facebook’;
    $contactmethods[‘twitter’] = ‘Twitter’;
    $contactmethods[‘linkedin’] = ‘LinkedIn’;
    return $contactmethods;
    }
    add_filter(‘user_contactmethods’, ‘extra_contact_info’);
    /* END Custom User Contact Info */
    [/php]

    เราก็จะได้ผลลัพธ์ออกมาเป็นแบบนี้ครับ

    [Wordpress] ปรับแต่งส่วนของ Contact Info [3]

    แถม : วิธีเรียกใช้งานข้อมูลในส่วนที่เราเพิ่มลงไป

    แน่นอนว่า เมื่อเราเปลี่ยนมาใช้เป็น Facebook, Twitter และ LinkedIn ก็อยากมีวิธีที่เรียกใช้งานข้อมูลเหล่านี้ โดยเราใช้โค้ดแบบนี้เพื่อเรียกใช้งาน

    [php]
    <a href="<?php the_author_meta(‘facebook’, $current_author->ID); ?>">Facebook</a>
    <a href="<?php the_author_meta(‘twitter’, $current_author->ID); ?>">Twitter</a>
    <a href="<?php the_author_meta(‘linkedin’, $current_author->ID); ?>">LinkedIn</a>
    [/php]

  • Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน

    ตอนนี้มี Service ต่าง ๆ ให้เราใช้อยู่มากมาย เช่น Facebook, Twitter, Instagram, GMail หรือ Dropbox ถ้าเราต้องการให้ Service ต่าง ๆ เหล่านี้ทำงานร่วมกันละ ก็ต้องที่นี่เลย If This Then That

    ifttt.com : If This Then That

    เข้าไปในเว็บ เราก็กด Join เพื่อสมัครใช้งาน

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [1]

    สร้าง Account เพื่อใช้งานกันเลยครับ

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [2]

    หลังจากนั้น Log In เข้ามาเพื่อใช้งาน เราจะไปดูตรงส่วนของ Channel ก่อนนะครับ

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [3]

    Channel ก็จะมี List ของ Service ต่าง ๆ ที่ตัว ifttt สามารถทำให้มันใช้งานแบบเชื่อมต่อกันได้

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [4]

    จะเห็นว่ามีอยู่หลากหลาย และพอเพียงสำหรับใช้งานในหลาย ๆ ประเภท คราวนี้เราลองมาสร้าง Task เพื่อจะใช้งานดูนะครับ เข้าหัวข้อ Tasks แล้ว Create task เลยครับ

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [5]

    ตามจุดประสงค์ของเว็บก็คือ ถ้า “มีการทำสิ่งนี้” หลังจากนั้น “ให้ทำสิ่งนี้”

    คราวนี้ผมจะลองว่า ถ้าผมทวิตโดยใส่ #picbox จะให้ File รูปถูกอัพเข้า Dropbox ของผมนะครับ

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [6]

    ก็เลือกหัวข้อ Twitter -> New tweet by you with hashtag -> ใส่ #picbox ลงไป -> เลือกหัวข้อ Dropbox -> ใส่ File ที่จะอัพ และ Path ที่ต้องการอัพไป -> ใส่รายละเอียดของ Task นี้ -> Create Task

    และเราก็จะได้ Task ที่ทำงานโดยอัพรูปใส่ Dropbox ให้เราเมื่อเราใส่ #picbox ลงไปในทวิตของเรา

    Ifttt : เมื่อนำ Service จากต่าง ๆ มาใช้งานร่วมกัน [7]

    ลองไปประยุกต์ใช้งานดูนะครับ ตัวอย่างเช่น ถ้า Facebook เราอัพรูป ให้ทวิตออกไป หรือ ถ้าเรา Favorite Tweet อันไหน ให้ส่งเมล์เข้ามาให้เรา เป็นต้น

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

    [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 ครับ ^^

  • Plugin WordPress : Social Metrics

    Plugin WordPress : Social Metrics

    Plugin ที่มาแนะนำในครั้งนี้ จะรวมข้อมูลว่ามีคนกด Like มีคน tweet หรือมีคนกด +1 ให้แต่ละ Post ของเราเป็นจำนวนเท่าไหร่ โดยมีลักษณะหน้าตาเป็นแบบนี้ครับ

    Plugin WordPress : Social Metrics [1]
    หน้าตาของ Social Metrics

    โดยเมื่อเราดาวน์โหลด Plugin มาติดตั้งแล้ว จะปรากฎเมนูที่ด้านซ้ายแถว ๆ หัวข้อ Dashboard ของเรา

    Plugin WordPress : Social Metrics [2]
    เมนูของ Social Metrics

    ในส่วน Settings ของ Plugin มีหน้าตาเป็นแบบนี้

    Plugin WordPress : Social Metrics [3]
    Settings ของ Social Metrics

    แต่ในเวอร์ชั่นที่เราใช้อยู่จะเป็นแบบฟรี ทำให้ปรับแต่งให้งานอะไรไม่ได้มาก ซึ่งทาง Social Metrics จะมีแบบ Pro ให้เราได้ใช้งานในราคา 69.90 USD

    ถ้าใครสนใจจะดาวน์โหลดมาใช้งาน ก็ไปที่หน้า Plugin ของ Social Metrics ตามนี้เลยครับ

    Plugin WordPress : Social Metrics
  • [Infographic] Sharing Trends

    [Infographic] Sharing Trends

    เนื่องด้วย AddThis ครบรอบ 5 ปี ทาง AddThis เลยทำ Infographic จากข้อมูลที่ทาง AddThis รวบรวมไว้ เกี่ยวกับลักษณะนิสัยการแชร์ของคน อย่างเช่น ไม่ว่าจะเป็นเวลาใดที่คนเราชอบแชร์กัน หรือคนเข้าดูเยอะที่สุดหลังจากแชร์ข้อมูลไปนานเท่าไหร่ เป็นต้น

    Sharing Trends