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:
1 2 3 4 5 6 7 8 | <?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
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()
1 2 3 4 5 6 7 8 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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.
1 2 3 4 | public function facebook_count( $username ) { $facebook_count = file_get_contents( 'http://graph.facebook.com/' . $username ); return json_decode( $facebook_count )->likes; } |
1 2 3 4 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | 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
1 2 3 4 5 6 7 8 9 10 11 12 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 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']; } |
Đă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.
1 2 3 4 | 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | @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
1 2 3 4 5 | // 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é
You must log in to post a comment.