У першій частині цього посту ми розглянули, як можна програмно дізнатися кількість лайків сторінки на Facebook, зробити підрахунок фоловерів у Twitter та Google+, а також створили три додаткові допоміжні функції для спрощення цього процесу.
Ці функції приймають як аргумент ім'я користувача Facebook, ім'я користувача в Twitter і Google+, або їх ID відповідно, відображаючи кількість лайків або фоловерів.
Дивіться також :
- Створюємо віджет соцмереж для WordPress, щоб дізнатися кількість фоловерів -
Частина 1- Соціальні мережі та WordPress: 5 порад для інтеграції
- Як самому зробити віджет Facebook Like Box для WordPress
- Створюємо кастомний WordPress-віджет для Twitter своїми руками
- Створення соціального віджету «як у Mashable» для бічної панелі
- Вставляємо фото з Instagram у віджет бічної панелі WordPress
У сьогоднішній фінальній частині посту ми спробуємо створити віджет соціальних мереж, який забезпечить нам посилання на профілі у трьох вищезгаданих соцмережах. І за його допомогою на вашому сайті 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
Коментарі до запису: 2
Був би дуже вдячний, якби ви розповіли, як додати туди ВК
Приєднуюся!