Share Code Web - Chia sẻ niềm đam mê bất tận > Share code web > Code Web Wordpress > Share Plugin/Module > Thiết kế plugin hiển thị số lượng theo dõi qua profile mạng xã hội

Thiết kế plugin hiển thị số lượng theo dõi qua profile mạng xã hội

Publish Date: 07/11/2014 | Category: Share Plugin/Module

Trong bài viết này, tôi sẽ hướng dẫn các bạn cách viết một plugin hiển thị số lượng theo dõi qua các mạng xã hội cụ thể như số lượng like fanpage Facebook, Twitter, và số lượng người theo dõi trong Google+.

Ở phần đầu của bài viết, chúng ta sẽ cùng nhau đi viết một widget giúp hiển thị số lượng này ra ngoài website. Cụ thể giao diện của widget sẽ được nhìn như sau:

Tạo widget

Chúng ta sẽ tạo widget bằng cách tạo và sử dụng plugin để không làm ảnh hưởng tới bộ code gốc của bạn. Để tạo plugin thì các bạn có thể theo dõi bài viết hướng dẫn tạo plugin trong wordpress đã được sharecodeweb.net hướng dẫn cụ thể, ở đây chúng ta chỉ cần chú ý một số thông số phần đầu file plugin như sau thôi:

<?php
/*
 * Plugin Name: Tên plugin - Social Profile Widget
 * Plugin URI: Đường dẫn đến plugin - https://sharecodeweb.net/thiet-ke-plugin-hien-thi-so-luong-theo-doi-qua-profile-mang-xa-hoi
 * Description: Miêu tả plugin - Social widget that links to various social media profiles
 * Author: Tác giả - Agbonghama Collins
 * Author URI: Đường link tới trang tác giả - http://tech4sky.com
 */

<?php

* Plugin Name: Tên plugin - Social Profile Widget

* Plugin URI: Đường dẫn đến plugin - https://sharecodeweb.net/thiet-ke-plugin-hien-thi-so-luong-theo-doi-qua-profile-mang-xa-hoi

* Description: Miêu tả plugin - Social widget that links to various social media profiles

* Author: Tác giả - Agbonghama Collins

* Author URI: Đường link tới trang tác giả - http://tech4sky.com

Để tạo widget trong WordPress, chúng ta viết một class kế thừa từ WP_Widget

class Tutsplus_Social_Profile extends WP_Widget {
// ...

1 2	class Tutsplus_Social_Profile extends WP_Widget { // ...

Tiếp theo là dòng thông tin về tên và miêu tả sơ lược về widget bằng phương thức __construct()

function __construct() {
         
    parent::__construct(
        'Tutsplus_Social_Profile', __( 'Social Networks Profiles', 'translation_domain' ),
        array( 'description' => __('Links to Author social media profile', 'translation_domain' ) )
    );
     
}

function __construct() {

parent::__construct(

'Tutsplus_Social_Profile', __( 'Social Networks Profiles', 'translation_domain' ),

array( 'description' => __('Links to Author social media profile', 'translation_domain' ) )

);

}

Điểm cần chú ý ở đây là 3 functions giúp chúng ta lấy thông tin số lượng follows trên 3 mạng xã hội phổ biến là Facebook, Twitter, Google+ dưới đây

public function twitter_count( $username ) {
     
    require_once 'TwitterAPIExchange.php';
         
    // Set access tokens here - see: https://dev.twitter.com/apps/
    $settings = array(
        'oauth_access_token'        =>   "211978035-fedllb5xEQhnoHxAsK3259VIOhsFrLuRUyR4Atvr",
        'oauth_access_token_secret' =>   "7Nev2EyOxoHAVgb8Y5VHPRYuKbKomFqe3kf1ouOHtmHVs",
        'consumer_key'              =>   "MsHrMc5B9dZyP8mgqV0m2JGsq",
        'consumer_secret'           =>   "YhIdWozaAb9cvKcjKqamEcN2GgSBrzqfWZpIvKSeYVvCQsb8LL"
    );
 
    $url = 'https://api.twitter.com/1.1/users/show.json';
    $getfield = '?screen_name=' . $username;
    $request_method = 'GET';
    $twitter_instance = new TwitterAPIExchange( $settings );
    $follow_count = $twitter_instance   ->setGetfield( $getfield )
                                        ->buildOauth( $url, $request_method )
                                        ->performRequest();
    $count = json_decode( $follow_count, true );
         
    return $count['followers_count'];
     
}

public function twitter_count( $username ) {

require_once 'TwitterAPIExchange.php';

// Set access tokens here - see: https://dev.twitter.com/apps/

$settings = array(

'oauth_access_token' => "211978035-fedllb5xEQhnoHxAsK3259VIOhsFrLuRUyR4Atvr",

'oauth_access_token_secret' => "7Nev2EyOxoHAVgb8Y5VHPRYuKbKomFqe3kf1ouOHtmHVs",

'consumer_key' => "MsHrMc5B9dZyP8mgqV0m2JGsq",

'consumer_secret' => "YhIdWozaAb9cvKcjKqamEcN2GgSBrzqfWZpIvKSeYVvCQsb8LL"

);

$url = 'https://api.twitter.com/1.1/users/show.json';

$getfield = '?screen_name=' . $username;

$request_method = 'GET';

$twitter_instance = new TwitterAPIExchange( $settings );

$follow_count = $twitter_instance ->setGetfield( $getfield )

->buildOauth( $url, $request_method )

->performRequest();

$count = json_decode( $follow_count, true );

return $count['followers_count'];

}

Trong hàm twitter_count() ở trên chúng ta có sử dụng ứng dụng xác thực OAuth để giữ bảo mật về khóa cho ứng dụng của chúng ta, bạn cần thay đổi khóa này cho đúng với khóa mà bạn đã được Twitter cung cấp, tương tự như đối với hàm googleplus_count() bên dưới.

public function facebook_count( $username ) {
    $facebook_count = file_get_contents( 'http://graph.facebook.com/' . $username );
    return json_decode( $facebook_count )->likes;
}

public function facebook_count( $username ) {

$facebook_count = file_get_contents( 'http://graph.facebook.com/' . $username );

return json_decode( $facebook_count )->likes;

}

public function googleplus_count( $username, $apikey = 'AIzaSyBHm7J9qLupabYWaxLg_9_UZPbxWdso2vY' ) {
        $google = file_get_contents( 'https://www.googleapis.com/plus/v1/people/' . $username . '?key=' . $apikey );
        return json_decode( $google ) -> circledByCount;
}

public function googleplus_count( $username, $apikey = 'AIzaSyBHm7J9qLupabYWaxLg_9_UZPbxWdso2vY' ) {

$google = file_get_contents( 'https://www.googleapis.com/plus/v1/people/' . $username . '?key=' . $apikey );

return json_decode( $google ) -> circledByCount;

}

Hàm form() sẽ giúp chúng ta tạo một form trong phần quản trị widget của wordpress như sau:

public function form( $instance ) {
        isset ( $instance['title'] ) ? $title = $instance['title'] : null;
        empty ( $instance['title'] ) ? $title = 'My Social Profile' : null;
 
        isset ( $instance['facebook'] ) ?  $facebook = $instance['facebook'] : null;
        isset ( $instance['twitter'] )  ?  $twitter = $instance['twitter'] : null;
        isset ( $instance['google'] )   ?  $google = $instance['google'] : null;
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook Page Username:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr( $facebook ); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter Username:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr( $twitter ); ?>">
        </p>
 
        <p>
            <label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+ Username or ID:'); ?></label>
            <input class="widefat" id="<?php echo $this->get_field_id( 'google' ); ?>" name="<?php echo $this->get_field_name( 'google' ); ?>" type="text" value="<?php echo esc_attr( $google ); ?>">
        </p>
 
<?php
}

public function form( $instance ) {

isset ( $instance['title'] ) ? $title = $instance['title'] : null;

empty ( $instance['title'] ) ? $title = 'My Social Profile' : null;

isset ( $instance['facebook'] ) ? $facebook = $instance['facebook'] : null;

isset ( $instance['twitter'] ) ? $twitter = $instance['twitter'] : null;

isset ( $instance['google'] ) ? $google = $instance['google'] : null;

<p>

<label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>">

</p>

<p>

<label for="<?php echo $this->get_field_id('facebook'); ?>"><?php _e('Facebook Page Username:'); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>" name="<?php echo $this->get_field_name('facebook'); ?>" type="text" value="<?php echo esc_attr( $facebook ); ?>">

</p>

<p>

<label for="<?php echo $this->get_field_id('twitter'); ?>"><?php _e('Twitter Username:'); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>" name="<?php echo $this->get_field_name('twitter'); ?>" type="text" value="<?php echo esc_attr( $twitter ); ?>">

</p>

<p>

<label for="<?php echo $this->get_field_id('google'); ?>"><?php _e('Google+ Username or ID:'); ?></label>

<input class="widefat" id="<?php echo $this->get_field_id( 'google' ); ?>" name="<?php echo $this->get_field_name( 'google' ); ?>" type="text" value="<?php echo esc_attr( $google ); ?>">

</p>

<?php

}

Kết quả đạt được là như thế này đây

Sau khi nhập xong dữ liệu vào form, chúng ta cần xử lý dữ liệu để lưu vào database. Hàm update() sẽ giúp chúng ta làm được việc này

public function update( $new_instance, $old_instance ) {
     
    $instance = array();
    $instance['title']      =   ( ! empty ( $new_instance['title']) ) ? strip_tags( $new_instance['title'] ) : '';
    $instance['facebook']   =   ( ! empty ( $new_instance['facebook']) ) ? strip_tags( $new_instance['facebook'] ) : '';
    $instance['twitter']    =   ( ! empty ( $new_instance['twitter']) ) ? strip_tags( $new_instance['twitter'] ) : '';
    $instance['google']     =   ( ! empty ( $new_instance['google']) ) ? strip_tags( $new_instance['google'] ) : '';
    $instance['linkedin']   =   ( ! empty ( $new_instance['linkedin']) ) ? strip_tags( $new_instance['linkedin'] ) : '';
 
    return $instance;
     
}

public function update( $new_instance, $old_instance ) {

$instance = array();

$instance['title'] = ( ! empty ( $new_instance['title']) ) ? strip_tags( $new_instance['title'] ) : '';

$instance['facebook'] = ( ! empty ( $new_instance['facebook']) ) ? strip_tags( $new_instance['facebook'] ) : '';

$instance['twitter'] = ( ! empty ( $new_instance['twitter']) ) ? strip_tags( $new_instance['twitter'] ) : '';

$instance['google'] = ( ! empty ( $new_instance['google']) ) ? strip_tags( $new_instance['google'] ) : '';

$instance['linkedin'] = ( ! empty ( $new_instance['linkedin']) ) ? strip_tags( $new_instance['linkedin'] ) : '';

return $instance;

}

Tiếp theo hàm widget() sẽ giúp chúng ta lấy thông tin từ database và hiển thị ra bên ngoài trình duyệt

public function widget( $new_instance, $old_instance ) {
 $title      =   apply_filters( 'widget_title', $instance['title'] );
        $facebook   =   $instance['facebook'];
        $twitter    =   $instance['twitter'];
        $google     =   $instance['google'];
 
        // social profile link
        $social_widget = '
        <ul class="diverz">
        <li class="diverz facebookz">
        <a href="https://www.facebook.com/' . $facebook . '">
        <div class="main-diverz">
        <i class="facebookz fa fa-facebook"></i>
        <br/>
        <big class="spanz facebookz">facebook</big>
        </div>
        </a>
        <div class="sub-diverz">
        <strong>' .
        $this->facebook_count( $facebook ) . '</strong>
        <br/>fans
        </div>
        </li>
                 
        <li class="diverz twitterz">
        <a href="https://www.twitter.com/' . $twitter . '">
        <div class="main-diverz">
        <i class="twitterz fa fa-twitter"></i><br/>
        <big class="spanz twitterz">twitter</big>
        </div></a>
        <div class="sub-diverz"><strong>' .
        $this->twitter_count('tech4sky') . '</strong><br/>fans
        </div>
        </li>
                 
        <li class="diverz googlez">
        <a href="https://plus.google.com/u/0/' . $google . '">
        <div class="main-diverz">
        <i class="googlez fa fa-google-plus"></i><br/>
        <big class="spanz googlez">google+</big>
        </div></a>
        <div class="sub-diverz"><strong>' .
        $this->googleplus_count( $google ) . '</strong><br/>fans
        </div>
        </li>
        </ul>';
         
        echo $args['before_widget'];
 
        if ( !empty($title) ) {
            echo $args['before_title'] . $title . $args['after_title'];
        }
 
        echo $social_widget;
         
        echo $args['after_widget'];
}

public function widget( $new_instance, $old_instance ) {

$title = apply_filters( 'widget_title', $instance['title'] );

$facebook = $instance['facebook'];

$twitter = $instance['twitter'];

$google = $instance['google'];

// social profile link

$social_widget = '

<br/>

<big class="spanz facebookz">facebook</big>

</div>

</a>

<strong>' .

$this->facebook_count( $facebook ) . '</strong>

<br/>fans

</div>

</li>

<big class="spanz twitterz">twitter</big>

</div></a>

<div class="sub-diverz"><strong>' .

$this->twitter_count('tech4sky') . '</strong><br/>fans

</div>

</li>

<big class="spanz googlez">google+</big>

</div></a>

<div class="sub-diverz"><strong>' .

$this->googleplus_count( $google ) . '</strong><br/>fans

</div>

</li>

</ul>';

echo $args['before_widget'];

if ( !empty($title) ) {

echo $args['before_title'] . $title . $args['after_title'];

}

echo $social_widget;

echo $args['after_widget'];

}

Đăng ký widget với wordpress

Để widget có thể hoạt động được, chúng ta cần sử dụng hàm register_widget để đăng ký với wordpress biết và sử dụng hook widgets_init để làm việc này, nếu không wordpress sẽ không nhận dạng được widget của chúng ta.

function register_tutsplus_social_profile() {
    register_widget( 'Tutsplus_Social_Profile' );
}
add_action( 'widgets_init', 'register_tutsplus_social_profile' );

function register_tutsplus_social_profile() {

register_widget( 'Tutsplus_Social_Profile' );

}

add_action( 'widgets_init', 'register_tutsplus_social_profile' );

Style cho widget

Có rất nhiều mẫu thiết kế widget social follow count mà sharecodeweb.net đã giới thiệu, nay mình giới thiệu tiếp cho các bạn một mẫu nữa trong file tutsplus-social-profile-widget.css như sau:

@import "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";
 
social-icons {
    font-size: 21px;
}
 
ul .diverz {
    width: 80px;
    border: 1px solid #e3e3e3;
    list-style-type: none;
    overflow: hidden;
    padding: 4px 2px;
    margin: 2px 2px !important;
    background-color: #eee;
}
.main-diverz {
 
    font-size: 16px;
    padding: 2px;
}
 
.sub-diverz {
 
    color: #000;
    background-color: #FFFFFF;
    margin: 2px;
    padding: 2px;
}
 
.diverz {
    float: left;
    text-align: center;
}
 
.spanz {
    font-size: 15px;
    vertical-align: middle;
}
 
.facebookz, .facebookz a {
    color: #3B5998;
}
 
.twitterz, .twitterz a {
    color: #00abe3;
}
 
.main-diverz i {
 
    font-size: 20px;
}

@import "//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css";

social-icons {

font-size: 21px;

}

ul .diverz {

width: 80px;

border: 1px solid #e3e3e3;

list-style-type: none;

overflow: hidden;

padding: 4px 2px;

margin: 2px 2px !important;

background-color: #eee;

}

.main-diverz {

font-size: 16px;

padding: 2px;

}

.sub-diverz {

color: #000;

background-color: #FFFFFF;

margin: 2px;

padding: 2px;

}

.diverz {

float: left;

text-align: center;

}

.spanz {

font-size: 15px;

vertical-align: middle;

}

.facebookz, .facebookz a {

color: #3B5998;

}

.twitterz, .twitterz a {

color: #00abe3;

}

.main-diverz i {

font-size: 20px;

}

Và để cho file css trên có thể hoạt động được, chúng ta thêm đoạn code cuối cùng sau

// enqueue css stylesheet
function tutsplus_social_profile_widget_css() {
    wp_enqueue_style( 'social-profile-widget', plugins_url( 'tutsplus-social-profile-widget.css', __FILE__ ) );
}
add_action( 'wp_enqueue_scripts', 'tutsplus_social_profile_widget_css' );

// enqueue css stylesheet

function tutsplus_social_profile_widget_css() {

wp_enqueue_style( 'social-profile-widget', plugins_url( 'tutsplus-social-profile-widget.css', __FILE__ ) );

}

add_action( 'wp_enqueue_scripts', 'tutsplus_social_profile_widget_css' );

Download code

Vậy là xong thành quả rồi đó, chúc bạn có một widget đẹp để sử dụng trong website của mình. Các bạn có thể download code bên dưới đây để về tham khảo thêm nhé

Có liên quan

Thẻ:create widget wordpress, how to create plugin in wordpress, plugin, share plugin wordpress, social button count, social media

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

Bạn phải Đăng nhập để tham gia bình luận.

Chú ý

Hướng dẫn download trên Box.com

Series

Customize Wordpress Admin (6)
Hướng dẫn config theme wordpress (2)
Những plugin tuyệt vời cho wordpress (2)
Thiết kế theme Adaptive Blog (12)
Wordpress for Beginner (7)

Thiết kế plugin hiển thị số lượng theo dõi qua profile mạng xã hội

Tạo widget

Đăng ký widget với wordpress

Style cho widget

Download code

Like this:

Có liên quan

Related Posts

Tác giả: Nguyễn Trung Hiếu

Leave a comment

Chú ý

Series

Mục lục

Bài viết mới nhất

Follow me

Giới thiệu

Thiết kế plugin hiển thị số lượng theo dõi qua profile mạng xã hội

Tạo widget

Đăng ký widget với wordpress

Style cho widget

Download code

Share this:

Like this:

Có liên quan

Related Posts

Tác giả: Nguyễn Trung Hiếu

Leave a comment

Chú ý

Series

Mục lục

Bài viết mới nhất

Follow me

Giới thiệu