Як самому зробити віджет Facebook Like Box для WordPress

Якщо ваш сайт має сторінку на Facebook, то було б непогано розповісти про це вашим читачам, показавши блок Подобається Facebook у сайдбарі сайту.

У цьому посібнику ми самі створимо WordPress віджетякий покаже ваш блок Подобається Facebook. З цим WordPress віджетом у вас буде можливість відображати заголовок сайту, останніх користувачів, які поставили Like, та останні записи вашої стрічки у Facebook.

Facebook сторінки

Facebook сторінки існують давно, але недавно вони перетворилися, почавши використовувати нову можливість - таймлайн (Timeline).

Facebook сторінка — це те саме, що особиста сторінка, але ви не можете додавати до друзів інших людей, тому що Facebook сторінки створені для бізнесів, для зв'язку з клієнтами.

Facebook сторінки дають динамічніші взаємини з публічними особистостями та організаціями, які вам цікаві.

Якщо у вас є свій бізнес, ви також можете створити свою сторінку Facebook.

Поле лайків Facebook

Поле лайків Facebook — це соціальний плагін, який дозволяє власникам Facebook сторінок показувати кнопку Like та статус потоку на своєму сайті.

Facebook Like Box, тобто блок лайків, означає, що ваші користувачі зможуть:

• побачити, скільком людям сподобалася сторінка та скільки їхніх друзів уже поставили лайк сторінці;
• побачити останні оновлення статусу;
• поставити лайк вашій Facebook станиці, не залишаючи ваш сайт.

Щоб створити блок лайків Facebook для вашої Facebook сторінки, вам потрібно зареєструвати Facebook програму, щоб вона змогла використовувати Факелектронна книга open graph API.

Тепер, коли ви розумієте, що таке блок лайків Facebook, ви можете зрозуміти, як увімкнути це в WordPress віджет.

Віджет WordPress

Перед тим, як ми почнемо писати код для віджету, нам потрібно зрозуміти, що таке віджет WordPress, і як ми можемо використовувати WordPress Widget API для того, щоб легко створювати WordPress віджети.

WordPress віджет — це такий собі PHP код, який запускається всередині сайдбару WordPress.

wordpress сайдбар - Це зареєстрована область у вашій темі, куди ви можете додавати віджети WordPress.

Віджети WordPress можна легко додати до сайдбару, перейшовши на сторінку віджетів у консолі в меню Зовнішній вигляд → Віджети. Зі сторінок віджетів ви можете перетягнути віджети в сайдбар. Віджет повинен мати щось на зразок форми адміністратора, щоб ви могли редагувати інформацію, яка відображається у віджеті.

WordPress WP_Widget

Щоб створити віджет WordPress, все, що вам потрібно зробити, це наслідувати стандартний клас і використовувати деякі його функції.

Є три основні функції, які повинні бути використані для того, щоб віджет працював. Це форма(), віджет () и update ().

Клас WP_Widget знаходиться в wp-includes/widgets.php.

WordPress Starter Widget

Нижче представлена ​​"болванка" WordPress віджета. Для створення нового віджету просто скопіюйте та вставте код нижче на початок віджету.

/**
 * Adds Foo_Widget widget.
 */
class Foo_Widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */
	public function __construct() {
		parent::__construct(
			'foo_widget', // Base ID
			'Foo_Widget', // Name
			array( 'description' => __( 'A Foo Widget', 'text_domain' ), ) // Args
		);
	}

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
		extract( $args );
		$title = apply_filters( 'widget_title', $instance['title'] );

		echo $before_widget;
		if ( ! empty( $title ) )
			echo $before_title . $title . $after_title;
		?>Hello, World!<?php
		echo $after_widget;
	}

	/**
	 * Sanitize widget form values as they are saved.
	 *
	 * @see WP_Widget::update()
	 *
	 * @param array $new_instance Values just sent to be saved.
	 * @param array $old_instance Previously saved values from database.
	 *
	 * @return array Updated safe values to be saved.
	 */
	public function update( $new_instance, $old_instance ) {
		$instance = array();
		$instance['title'] = strip_tags( $new_instance['title'] );

		return $instance;
	}

	/**
	 * Back-end widget form.
	 *
	 * @see WP_Widget::form()
	 *
	 * @param array $instance Previously saved values from database.
	 */
	public function form( $instance ) {
		if ( isset( $instance[ 'title' ] ) ) {
			$title = $instance[ 'title' ];
		}
		else {
			$title = __( 'New title', 'text_domain' );
		}
		?>
		<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>
		<?php
	}

} // class Foo_Widget

Створення Facebook Like Box віджету

Ми створимо WordPress віджет, який дозволить вам легко додати та змінити блок лайків Facebook на вашому WordPress блозі.

Вигода від використання віджету – у гнучкості, яку він вам дає. Вибір, який у вас є у вашому блоці лайків Facebook, дозволяє повністю міняти функціонал, просто додаючи різні атрибути в блок лайків.

Блок лайків Facebook приймає такі атрибути:

• data-href - URL вашої сторінки Facebook.
• data-width - Ширина блоку.
• data-show-faces - Значення правда або false, яке визначать, чи показувати людей, які лайкнули вашу сторінку.
• data-stream - Значення правда або false, який визначає, чи показувати останні оновлення статусу.
• data-header - Значення правда або false, яке визначать, чи показувати панель "Знайді нас у Facebook".

Переконайтеся, що користувачі можуть змінювати ці опції в зоні адміністратора віджету, щоб вони могли змінювати вигляд блоку прямо в консолі WordPress.

Тепер, коли ми знаємо, чого можна очікувати від блоку лайків Facebook, ми можемо почати писати код.

Конструктор віджетів Facebook

Спочатку ми зареєструємо віджет, використовуючи action widget_init.

/*
 * Plugin Name: Paulund Facebook Like Box
 * Plugin URI: 
 * Description: A widget that a facebook like box for your website
 * Version: 1.0
 * Author: Paul Underwood
 * Author URI: 
 * License: GPL2

    Copyright 2012  Paul Underwood

    This program is free software; you can redistribute it and/or
    modify it under the terms of the GNU General Public License,
    version 2, as published by the Free Software Foundation.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
*/

/**
 * Register the Widget
 */
add_action( 'widgets_init', create_function( '', 'register_widget("pu_facebook_widget");' ) );

Функція register_widget викличе клас pu_Facebook_widget. У конструкторі ми можемо створити віджет, передавши аргументи конструктору WP_Widget.

/**
 * Create the widget class and extend from the WP_Widget
 */
class pu_facebook_widget extends WP_Widget {

	/**
	 * Register widget with WordPress.
	 */
	public function __construct() {

		parent::__construct(
			'pu_facebook_widget',		// Base ID
			'Facebook Like Box',		// Name
			array(
				'classname'		=>	'pu_facebook_widget',
				'description'	=>	__('A widget that displays a facebook like box from your facebook page.', 'framework')
			)
		);

	} // end constructor
}

Функція Віджет

Функція віджет викликається для виведення віджету у сайдбарі. Тут вам потрібно зібрати дані, введені користувачем у консолі, та показати віджет на сайті.

Використовуйте наступну функцію для відображення вашого блоку лайків Facebook.

	/**
	 * Front-end display of widget.
	 *
	 * @see WP_Widget::widget()
	 *
	 * @param array $args     Widget arguments.
	 * @param array $instance Saved values from database.
	 */
	public function widget( $args, $instance ) {
		extract( $args );

		/* Our variables from the widget settings. */
		$this->widget_title = apply_filters('widget_title', $instance['title'] );

		$this->facebook_id = $instance['app_id'];
		$this->facebook_username = $instance['page_name'];
		$this->facebook_width = $instance['width'];
		$this->facebook_show_faces = ($instance['show_faces'] == "1" ? "true" : "false");
		$this->facebook_stream = ($instance['show_stream'] == "1" ? "true" : "false");
		$this->facebook_header = ($instance['show_header'] == "1" ? "true" : "false");

		add_action('wp_footer', array(&$this,'add_js'));

		/* Display the widget title if one was input (before and after defined by themes). */
		if ( $this->widget_title )
			echo $this->widget_title;

		/* Like Box */
		?>
			<div class="fb-like-box"
				data-href="http://www.facebook.com/<?php echo $this->facebook_username; ?>"
				data-width="<?php echo $this->facebook_width; ?>"
				data-show-faces="<?php echo $this->facebook_show_faces; ?>"
				data-stream="<?php echo $this->facebook_stream; ?>"
				data-header="<?php echo $this->facebook_header; ?>"></div>
		<?php
	}

Ви, мабуть, помітили, що ми додали дію к wp_footer для запуску функції add_js. Тут вам потрібно додати Facebook JavaScriptщоб змусити блок лайків працювати коректно.

/**
 * Add Facebook javascripts
 */
public function add_js() {
	echo '<div id="fb-root"></div>
		<script>(function(d, s, id) {
			var js, fjs = d.getElementsByTagName(s)[0];
			if (d.getElementById(id)) return;
			js = d.createElement(s); js.id = id;
			js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId='.$this->facebook_id.'";
			fjs.parentNode.insertBefore(js, fjs);
		}(document, 'script', 'facebook-jssdk'));</script>';
}

Функція Оновити

Функція оновлення використовується для оновлення бази WordPress, коли заповнена адмін форма віджету.

Тут потрібно розмістити необхідну перевірку введених у форму даних. Вона приймає 2 параметри: масив значень, відправлених на збереження, і масив значень, які зберігаються в даний момент. Функція повертає нові значення, що зберігаються у базі.

/**
 * Sanitize widget form values as they are saved.
 *
 * @see WP_Widget::update()
 *
 * @param array $new_instance Values just sent to be saved.
 * @param array $old_instance Previously saved values from database.
 *
 * @return array Updated safe values to be saved.
 */
function update( $new_instance, $old_instance ) {
	$instance = $old_instance;

	/* Strip tags for title and name to remove HTML (important for text inputs). */
	$instance['title'] = strip_tags( $new_instance['title'] );
	$instance['app_id'] = strip_tags( $new_instance['app_id'] );
	$instance['page_name'] = strip_tags( $new_instance['page_name'] );
	$instance['width'] = strip_tags( $new_instance['width'] );

	$instance['show_faces'] = (bool)$new_instance['show_faces'];
	$instance['show_stream'] = (bool)$new_instance['show_stream'];
	$instance['show_header'] = (bool)$new_instance['show_header'];

	return $instance;
}

Функція Форма

Функція форму використовується для створення форми в консолі віджету. Вона має бути попередньо заповнена поточними значеннями з бази даних, щоб спростити внесення змін до поведінки віджету для користувачів.

/**
 * Create the form for the Widget admin
 *
 * @see WP_Widget::form()
 *
 * @param array $instance Previously saved values from database.
 */
function form( $instance ) {

	/* Set up some default widget settings. */
	$defaults = array(
		'title' => $this->widget_title,
		'app_id' => $this->facebook_id,
		'page_name' => $this->facebook_username,
		'width' => $this->facebook_width,
		'show_faces' => $this->facebook_show_faces,
		'show_stream' => $this->facebook_stream,
		'show_header' => $this->facebook_header
	);

	$instance = wp_parse_args( (array) $instance, $defaults ); ?>

	<!-- Widget Title: Text Input -->
	<p><label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e('Title:', 'framework') ?></label>
	<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" /></p>

	<!-- App id: Text Input -->
	<p><label for="<?php echo $this->get_field_id( 'app_id' ); ?>"><?php _e('App Id', 'framework') ?></label>
	<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'app_id' ); ?>" name="<?php echo $this->get_field_name( 'app_id' ); ?>" value="<?php echo $instance['app_id']; ?>" /></p>

	<!-- Page name: Text Input -->
	<p><label for="<?php echo $this->get_field_id( 'page_name' ); ?>"><?php _e('Page name (http://www.facebook.com/[page_name])', 'framework') ?></label>
	<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'page_name' ); ?>" name="<?php echo $this->get_field_name( 'page_name' ); ?>" value="<?php echo $instance['page_name']; ?>" /></p>

	<!-- Width: Text Input -->
	<p><label for="<?php echo $this->get_field_id( 'width' ); ?>"><?php _e('Width', 'framework') ?></label>
	<input type="text" class="widefat" id="<?php echo $this->get_field_id( 'width' ); ?>" name="<?php echo $this->get_field_name( 'width' ); ?>" value="<?php echo $instance['width']; ?>" /></p>

	<!-- Show Faces: Checkbox -->
	<p><label for="<?php echo $this->get_field_id( 'show_faces' ); ?>"><?php _e('Show Faces', 'framework') ?></label>
	<input type="checkbox" class="widefat" id="<?php echo $this->get_field_id( 'show_faces' ); ?>" name="<?php echo $this->get_field_name( 'show_faces' ); ?>" value="1" <?php echo ($instance['show_faces'] == "true" ? "checked='checked'" : ""); ?> /></p>

	<!-- Show Stream: Checkbox -->
	<p><label for="<?php echo $this->get_field_id( 'show_stream' ); ?>"><?php _e('Show Stream', 'framework') ?></label><input type="checkbox" class="widefat" id="<?php echo $this->get_field_id( 'show_stream' ); ?>" name="<?php echo $this->get_field_name( 'show_stream' ); ?>" value="1" <?php echo ($instance['show_stream'] == "true" ? "checked='checked'" : ""); ?> /></p>

	<!-- Show Header: Checkbox -->
	<p><label for="<?php echo $this->get_field_id( 'show_header' ); ?>"><?php _e('Show Header', 'framework') ?></label>
	<input type="checkbox" class="widefat" id="<?php echo $this->get_field_id( 'show_header' ); ?>" name="<?php echo $this->get_field_name( 'show_header' ); ?>" value="1" <?php echo ($instance['show_header'] == "true" ? "checked='checked'" : ""); ?> /></p>

	<?php
}

Вам не потрібно додавати кнопку надсилання форми, оскільки WordPress автоматично додасть її для вас.

Завантаження

Це все, що вам потрібно для створення WordPress плагіна, який створить віджет для відображення блоку лайків Facebook сторінки. Все, що вам потрібно зробити тепер, це встановити плагін, активувати його, додати віджет до сайдбару та заповнити форму даними вашої сторінки.

Ви можете завантажити плагін з WordPress.org: Поле лайків Facebook.

Джерело: WP.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/