В першій частині цього посту ми розглянули, як можна програмно дізнатися кількість лайків сторінки на 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+), як показано на малюнку нижче.
Нижчезазначений метод форма() створює форму віджету:
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;
}Наступний метод віджет () відображає посилання на профілі у соціальних мережах разом із кількістю лайків та фоловерів у фронтенді 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 код для нашого віджету, який також містить імпортовані іконки Шрифт Високий:
@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
Був би дуже вдячний, якби ви розповіли, як додати туди ВК
Приєднуюся!