Создаем виджет соцсетей для WordPress, чтоб узнать количество фолловеров — Часть 2
Опубликовано: 01.09.2018
В первой части этого поста мы рассмотрели, как можно программно узнать количество лайков страницы на Facebook, сделать подсчет фолловеров в Twitter и Google+, а также создали три дополнительные вспомогательные функции для упрощения этого процесса.
Эти функции принимают в качестве аргумента имя пользователя Facebook, имя пользователя в Twitter и Google+, или же их ID соответственно, отображая количество лайков или фолловеров.
Смотрите также :
В сегодняшней финальной части поста мы попытаемся создать виджет социальных сетей, который обеспечит нам ссылки на профили в трех вышеупомянутых соцсетях. И с его помощью на вашем сайте WordPress количество лайков и фолловеров будет отображаться в виде таблички, как изображено на картинке ниже. Но об этом в самом конце поста.
| Скачать готовый плагин |
Код виджета
Как и во всех плагинах WordPress, должна быть шапка, содержащая мета-информацию (как например, имя, версию, автора) и она должна быть в начале файла плагина.
Ниже изображена шапка плагина нашего виджета:
<?php /* * Plugin Name: Tuts+ Social Profile Widget * Plugin URI: http://code.tutsplus.com * Description: Social widget that links to various social media profiles * Author: Agbonghama Collins * Author URI: http://tech4sky.com */Для создания виджета для WordPress необходимо расширить стандартный класс WP_Widget и включить нужные методы в дочернем классе. И наконец, виджет дочернего класса будет зарегистрирован и подключен к WordPress.
Создайте дочерний класс, расширив WP_Widget родительского класса:
class Tutsplus_Social_Profile extends WP_Widget { // ...Дайте виджету название и описание, используя метод __construct() :
function __construct() { parent::__construct( 'Tutsplus_Social_Profile', __( 'Social Networks Profiles', 'translation_domain' ), array( 'description' => __('Links to Author social media profile', 'translation_domain' ) ) ); }Как раз самое время использовать все возможности трех вспомогательных функций, которые мы создали в предыдущем посте . Они нам помогут отобразить фолловеров на нашем сайте WordPress с Facebook, Twitter, и Google+:
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 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; }В вышеуказанном методе twitter_count() токен доступа приложения OAuth для Twitter, секретный токен доступ, ключ пользователя и секретный ключ пользователя жестко привязаны к нему.
Вам нужно будет изменить их на ваши данные ключей приложения OAuth. То же самое и с Google Plus API Key в методе googleplus_count() .
Форма виджета
Настройки виджета будут содержать четыре поля, включая заголовок виджета, имя пользователя всех трех соцсетей (Facebook, Twitter и Google+), как показано на картинке ниже.
Нижеуказанный метод form() создает форму виджета:
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 }После внесения всех нужных данных в поля формы, их нужно сохранить в базе данных. Метод update() помогает избавить форму от вредоносных данных.
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; }Следующий метод widget() отображает ссылки на профили в социальных сетях вместе с количеством лайков и фолловеров во фронтенде WordPress.
$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']; }Теперь, когда мы добавили все необходимые методы и коды к классу, все что осталось сделать – это включить скобку, закрывающую класс.
// ... }Класс виджета Tutsplus_Social_Profile нужно зарегистрировать с помощью функции WordPress , а затем прикрепить к действию widgets_init . Без этого WordPress не распознает виджет:
function register_tutsplus_social_profile() { register_widget( 'Tutsplus_Social_Profile' ); } add_action( 'widgets_init', 'register_tutsplus_social_profile' );Оформление виджета
Чтоб сделать виджет более привлекательным, ниже есть CSS код для нашего виджета, который также содержит импортированные иконки Font Awesome :
@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; }Сохраните файл под названием tutsplus-social-profile-widget.css , который должен находиться в корневой папке плагина. И наконец, подключаем на загрузку файл CSS в WordPress:
// 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' );На этом все! Создание виджета закончено.
На заметку
Созданный нами виджет действителен только для трех вышеупомянутых соцсетей, но если вы расширите класс виджета, то сможете добавить и другие социальные сети.