Tạo widget box like facebook trong WordPress

Facebook vẫn là mạng xã hội lớn nhất hiện này, có gần như là một phần trong mỗi kiếp sống IT, có người xa người yêu cả tuần không nhớ nhưng nếu không online facebook một ngày là bùn mênh mang. Điều đó cho thấy sự quan trọng của nó trong vấn đề quảng bá WEB.

Lượng truy cập trên facebook là một lượng cực lớn điều đó không ai bàn cải được, và gần như đủ các thành phần trong xã hội. Bây giờ đừng nói ở trên thành phố thị xã, đứa em ở quê, ông chú vẫn gọi lên tạo cho tài khoản facebook để tám. Nếu biết khai thác chia sẻ lượng truy cập từ mạng xã hội này là một điều thành công cho webmasters.

Widget box like facebook trong WordPress

Hiện này gần như một website nào cũng cần có box chia sẻ của facebook, các nhà sản xuất themes cũng phải nắm bắt được điều này. Theme không hỗ trợ face là không muốn sử dụng rồi :D. Cũng chính vì thế hôm nay mình muốn chia sẻ cách tạo một widget box like facebook đơn giản trong WordPress.

Thật ra mà nói các bạn có thể copy code vào HTML là có thể chạy được không cần phải tạo widget nhưng đối với khách hàng của bạn, hay người sử dụng không phải là webmaster họ không làm được điều đó, bạn phải tạo chức năng widget box like facebook cho họ. Đây cũng là một cách học thiết kế theme wordpress, bạn có thể tự tạo widget box like facebook wordpress phục vụ cho chính bạn.

Cách bước tạo widget box like facebook trong WordPress

Đến bài hướng dẫn các tạo widget trong wordpress hôm nay mình sẽ không đề cập nhiều đến phần cấu trúc của một widget trong wordpress. Tuy nhiên cũng nói lại sơ qua cho các bạn chưa xem mấy bài trước của mình thì có thể tiện mà đọc lại.

Bạn phải vào trong functions.php của theme đang sử dụng đang ký một cấu trúc widget với WordPress (hàm bcdonline_widgets_init) mà bcdonline.net hay đề cập mỗi khi viết bài về widget WordPress. Tiếp theo bạn tìm đến một vị trí nào muốn hiển thị widget đăng ký một dynamic_sidebar khi bạn kéo widget vào đây thì nó sẽ hiển thị ở đúng vị trí của bạn set.

like facebook wordpress

Hai thành phần này là tổng quát của widget trong WordPress. Nếu đã tạo rồi thì bạn không cần tạo nữa mà chỉ thiết kế widget với các chức năng thôi. Các bước thiết kế widget box like facebook trong WordPress được bắt đầu như sau:

Đăng ký hàm Facebook Widget Box trong WordPress

bạn vào functions.php của theme viết hàm đăng ký facebook_widget, và add hành động cho nó luôn như ở các bài hướng dẫn Tạo Widget đăng ký Email Google Feedburner cho WordPress trước mình đã làm.

add_action( 'widgets_init', 'Facebook_widget_box' );
function Facebook_widget_box() {
	register_widget( 'facebook_widget' );
}

Tiếp đến khai báo class facebook_widget giống như mình đăng ký ở trên class này là extends của WP_Widget. Trong class có các 4 hàm: facebook_widget, widget, update và form qui định về kích thước, hình dạng, tiêu đề, các texbox, button và phương thức save dữ liệu.

<!--
class facebook_widget extends WP_Widget {

	function facebook_widget() {
		$widget_ops = array( 'classname' => 'facebook-widget' );
		$control_ops = array( 'width' => 250, 'height' => 350, 'id_base' => 'facebook-widget' );
		$this->WP_Widget( 'facebook-widget','BCDONLINE.NET - Faceboox', $widget_ops, $control_ops );
	}
	
	function widget( $args, $instance ) {
		extract( $args );

		$title = apply_filters('widget_title', $instance['title'] );
		$page_url = $instance['page_url'];

		echo $before_widget;
		if ( $title )
			echo $before_title;
			echo $title ; ?>
		<?php echo $after_title; ?>
			<div class="facebook-box">
				<iframe src="http://www.facebook.com/plugins/likebox.php?href=<?php echo $page_url ?>&amp;width=260&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="background:#FFF; border:none; overflow:hidden; width:260px; height:258px;" allowTransparency="true"></iframe>	
			</div>
	<?php 
		echo $after_widget;
	}

	function update( $new_instance, $old_instance ) {
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['page_url'] = strip_tags( $new_instance['page_url'] );
		return $instance;
	}

	function form( $instance ) {
		$defaults = array( 'title' =>__( 'Find us on Facebook' , 'tie') );
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>

		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>">Title : </label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" type="text" />
		</p>
		<p>
			<label for="<?php echo $this->get_field_id( 'page_url' ); ?>">Page Url : </label>
			<input id="<?php echo $this->get_field_id( 'page_url' ); ?>" name="<?php echo $this->get_field_name( 'page_url' ); ?>" value="<?php echo $instance['page_url']; ?>" class="widefat" type="text" />
		</p>


	<?php
	}
}
-->

Sau đó bạn save lại, vào trong phần admin -> quản lý widgets, kéo widget widget box like facebook vừa mới tạo ra vào sidebar, bạn sẽ thấy các thông tin cần nhập vào đúng như trên mình khai báo.


Widget box like facebook

Ở đây mình sẽ không nói nhiều về chức năng của 4 hàm trên vì ở các bài trước đã nói rồi 😀 công việc tiếp theo của mình bây giờ là tiến hành định dạng CSS cho giao diện widget box like facebook hiển thị bên ngoài trang chủ của chúng ta.

Do phần này là load iframe nên bạn khó khăn cho việc style CSS một chút nhưng không sao facebook đã làm hết 1 phần cho mình rồi, giờ với bạn chỉ có kích thước, màu nền …. mà có thể thay đổi ở hàm facebook_widget có thuộc tính width, height. Hình dưới đây là phần demo của mình.

DEMO box like facebook trong WordPress

DEMO box like facebook trong WordPress

Đối với bạn nào không thích code hay chưa làm quen với việc thiết kế widget trong WordPress, bạn có thể download các plugin về và sử dụng, các plugin này cũng dễ dàng cài đặt và quản lý cũng khá đơn giản, sau đây là một danh sách các widget box like facebook mà bạn có thể sử dụng được

Kết luận: Vậy coi như xong, thật dễ dàng đúng không nào, giờ đã có một widget box like facebook chuyên nghiệp 😀 các bạn hãy tự custom lại để có một widget đẹp theo phong cách của mình. Chúc mọi người thành công!

VN:F [1.9.22_1171]
Rating: 8.2/10 (5 votes cast)
Tạo widget box like facebook trong WordPress, 8.2 out of 10 based on 5 ratings
Share This