В первой части этого поста мы рассмотрели, как можно программно узнать количество лайков страницы на 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 register_widget, а затем прикрепить к действию 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' );

На этом все! Создание виджета закончено.

На заметку

Созданный нами виджет действителен только для трех вышеупомянутых соцсетей, но если вы расширите класс виджета, то сможете добавить и другие социальные сети.

Источник: code.tutsplus.com

Вам понравился материал?

Добавить комментарий

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

2 комментария

сначала новые
по рейтингу сначала новые по хронологии

Был бы очень признателен, если бы вы рассказали как добавить туда ВК

Присоединяюсь!