WordPress Plugin tutorial from scratch

We have describe before about how to create wordpress plugin tutorial for beginner. So, if You are new to wordpress plugin development please visit. In this tutorial we think You have basic knowledge about wordpress plugin development. This tutorial show you how to create a facebook like or recommend button(with modification feature from plugin admin panel) and add to your wordpress site.

Step-1:
Add Your identification and also add some location constant to use in future code.

/*
Plugin Name: FB Like with Options
Plugin URI: http://tutpub.com/
Description: This plugin will show Facebook Like or Recommend button on Your wordpress site. You can configure the position, color, type, height, width, etc options from plugin admin menu.
Version: 1.0.0
Author: Shah Alom
Author URI: http://tutpub.com
*/
//DEFINING SOME CONSTANT FOR FUTURE USE
define(‘TP_FBL_DIR_PATH’, dirname(__FILE__));//STORE THE PLUGIN DIRECTORY PATH
define(‘TP_FBL_DIR_NAME’, basename(TP_FBL_DIR_PATH));//STORE THE PLUGIN DIRECTORY NAME
define(‘TP_FBL_DIR_URL’, get_option(‘siteurl’) . ‘/wp-content/plugins/’ . TP_FBL_DIR_NAME);//STORE THE PLUGIN HTTP URL

Step-2:
Now we will create admin panel to save facebook like button options. Use the below code:

<?php
if(is_admin()){
add_action(‘admin_menu’, ‘fblike_options’);
}
function fblike_options() {
add_menu_page(“Facebook Like”, “Facebook Like”, 8, __FILE__, “fblike_options_page”, TP_FBL_DIR_URL . “/images/tp_16x16.png”);
}
function fblike_options_page() {
if(isset($_POST)) {//CHECK IF OPTIONS VALUE SUBMIT TO UPDATE
if(isset($_POST[‘Submit’])) {//UPDATING OPTIONS VALUE      update_option(‘tp_fblike_display_page’,$_POST[‘tp_fblike_display_page’]);
update_option(‘tp_fblike_display_front’,$_POST[‘tp_fblike_display_front’]);
update_option(‘tp_fblike_display_single’,$_POST[‘tp_fblike_display_single’]);
update_option(‘tp_fb_appid’,$_POST[‘tp_fb_appid’]);
update_option(‘tp_fb_app_id’,$_POST[‘tp_fb_app_id’]);
update_option(‘tp_fb_width’,$_POST[‘tp_fb_width’]);
update_option(‘tp_fb_height’,$_POST[‘tp_fb_height’]);

update_option(‘tp_fb_showplace’,$_POST[‘placein’]);
update_option(‘tp_fb_layout_type’,$_POST[‘layout’]);
update_option(‘tp_fb_showfaces’,$_POST[‘tp_fb_showfaces’]);
update_option(‘tp_fb_action’,$_POST[‘action’]);
update_option(‘tp_fbl_font’,$_POST[‘font’]);
update_option(‘tp_fbl_choosecolor’,$_POST[‘colorscheme’]);

update_option(‘tp_fbl_lang’,$_POST[‘tp_fbl_lang’]);
}
}
?>

<div style=”font-size:13px;”>
<div id=”icon-options-general”><br/></div><h2>Settings Facebook Button Options</h2>
<form method=”post” action=”options-general.php?page=tp-facebooklike/tp-facebooklike.php”>
<table>
<tr>
<td valign=”top”>
<strong>Display Options</strong>
</td>
<td>

<p>
<input type=”checkbox” value=”1″ <?php if (get_option(‘tp_fblike_display_page’) == ‘1’) echo ‘checked=”checked”‘; ?> name=”tp_fblike_display_page” id=”tp_fblike_display_page” group=”fblike_display”/>

<label for=”tp_fblike_display_page”>Display the button on pages</label>
</p>

<p>
<input type=”checkbox” value=”1″ <?php if (get_option(‘tp_fblike_display_front’) == ‘1’) echo ‘checked=”checked”‘; ?> name=”tp_fblike_display_front” id=”tp_fblike_display_front” group=”fblike_display”/>
<label for=”tp_fblike_display_front”>Display the button on the front page (home)</label>
</p>

<p>
<input type=”checkbox” value=”1″ <?php if (get_option(‘tp_fblike_display_single’) == ‘1’) echo ‘checked=”checked”‘; ?> name=”tp_fblike_display_single” id=”tp_fblike_display_single” group=”fblike_display”/>
<label for=”tp_fblike_display_single”>Display the button on the Single post page </label>
</p>
</td>
</tr>
<tr>
<td>
<strong>Place in content</strong>
</td>
<td>
<p>
<select name=”placein”>
<option value=”after”>Bottom</option>
<option value=”before” <?php if(get_option(‘tp_fb_showplace’)==’before’) echo “selected” ?>>Top</option>
</select>
</p>
</td>
</tr>
<tr>
<td>
<strong>Language</strong>
</td>
<td>
<p>
<input type=”text” name=”tp_fbl_lang” id=”tp_fbl_lang” value=”<?php echo get_option(‘tp_fbl_lang’); ?>”>
<label for=”tp_fbl_lang”>Enter locale code. Example: en_US,fr_FR</label>
</p>
</td>
</tr>
<tr>
<td valign=”top”>
<strong>Size</strong>
</td>
<td>
<p>
<?php
if(get_option(‘tp_fb_width’)!=””) {
$width=get_option(‘tp_fb_width’);
} else {
$width=””;
}
?>
<input type=”text” value=”<?php echo $width ?>” name=”tp_fb_width” id=”tp_fb_width” group=”fblike_size”/>
<label for=”tp_fb_width”>Default width 500(px)</label>
</p>
<p>
<?php
if(get_option(‘tp_fb_height’)!=””) {
$height=get_option(‘tp_fb_height’);
} else {
$height=””;
}
?>
<input type=”text” value=”<?php echo $height ?>” name=”tp_fb_height” id=”tp_fb_height” group=”fblike_size”/>
<label for=”tp_fb_height”>Default height 28/100(px)</label>
</p>
</td>
</tr>
<tr>
<td valign=”top”><strong>Design</strong></td>
<td>
<p>
Layout Type<br/>
<select id=”layout” name=”layout”>
<option value=”standard” <?php if (get_option(‘tp_fb_layout_type’) == ‘standard’) echo “selected” ?> >
standard
</option>
<option value=”box_count” <?php if (get_option(‘tp_fb_layout_type’) == ‘box_count’) echo “selected” ?> >
box count
</option>
</select>
</p>
<p>
<input type=”checkbox” value=”1″ <?php if (get_option(‘tp_fb_showfaces’) == ‘1’) echo ‘checked=”checked”‘; ?> name=”tp_fb_showfaces” id=”tp_fb_showfaces” group=”fblike_design”/>
<label for=”tp_fb_showfaces”>Show Profile Images</label>
</p>
<p>
Verb to display<br/>
<select id=”param_action” name=”action”>
<option selected=”1″ <?php if (get_option(‘tp_fb_action’) == ‘1’) echo “selected” ?> value=”like”>like</option>
<option value=”recommend” <?php if (get_option(‘tp_fb_action’) == ‘recommend’) echo “selected” ?>>recommend</option>
</select>
</p>
<p>
Select Font<br/>
<select id=”param_font” name=”font”>
<option selected=”1″ <?php if (get_option(‘tp_fbl_font’) == ‘1’) echo “selected” ?>>Default Font</option>
<option value=”arial” <?php if (get_option(‘tp_fbl_font’) == ‘arial’) echo “selected” ?>>arial</option>
<option value=”lucida grande” <?php if (get_option(‘tp_fbl_font’) == ‘lucida grande’) echo “selected” ?>>lucida grande</option>
<option value=”segoe ui” <?php if (get_option(‘tp_fbl_font’) == ‘segoe ui’) echo “selected” ?>>segoe ui</option>
<option value=”tahoma” <?php if (get_option(‘tp_fbl_font’) == ‘tahoma’) echo “selected” ?>>tahoma</option>
<option value=”trebuchet ms” <?php if (get_option(‘tp_fbl_font’) == ‘trebuchet ms’) echo “selected” ?>>trebuchet ms</option>
<option value=”verdana” <?php if (get_option(‘tp_fbl_font’) == ‘verdana’) echo “selected” ?>>verdana</option>
</select>
</p>
<p>
Choose Color Scheme<br/>
<select id=”param_colorscheme” name=”colorscheme”>
<option value=”light” <?php if (get_option(‘tp_fbl_choosecolor’) == ‘light’ OR get_option(‘tp_fbl_font’) ==” ) echo “selected” ?>>light</option>
<option value=”dark” <?php if (get_option(‘tp_fbl_choosecolor’) == ‘dark’) echo “selected” ?>>dark</option>
</select>
</td>
</tr>
<tr>
<td valign=”top”><strong>Preview</strong></td>
<td>
<?php
$layout=get_option(‘tp_fb_layout_type’);
$showface=”false”;
if(get_option(‘tp_fb_showfaces’)==1) {
$showface=”true”;
}
$action=get_option(‘tp_fb_action’);
$font=get_option(‘tp_fbl_font’);
$colorscheme=get_option(‘tp_fbl_choosecolor’);
if(get_option(‘tp_fb_width’)!=””) {
$width=get_option(‘tp_fb_width’);
} else {
$width=500;
}
if(get_option(‘tp_fb_height’)!=””) {
$height=get_option(‘tp_fb_height’);
} else if($showface==”true” || $layout==”box_count”) {
$height=100;
} else {
$height=28;
}
$iframe='<p style=”margin:2px 0;”><iframe src=”http://www.facebook.com/plugins/like.php?locale=’.get_option(‘tp_fbl_lang’).’&href=’.urlencode(get_bloginfo(‘url’)).’&amp;layout=’.$layout.’&amp;show-faces=’.$showface.’&amp;width=’.$width.’&amp;action=’.$action.’&amp;colorscheme=’.$colorscheme.'” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:’.$width.’px; height:’.$height.’px”></iframe></p>’;
echo $iframe;
?>
</td>
</tr>
</table>
<p align=”center”>
<input type=”submit” name=”Submit” value=”<?php _e(‘Save Options’) ?>” />
</p>
</form>
</div>
<?php
}
?>

is_admin()
looking for admin authorization. If admin logged in then add an action that will call fblike_options() method.

add_menu_page()
is used to add a menu at admin panel menu. When click on the menu it will call the 5th parameter that defined the function name fblike_options_page.

Now you can activate the plugin from plugin manage page, and then click on the “Facebook Like” menu that has created recently. Wish you are seeing the Facbook  like button options setting page  and preview at the bottom. Change the options to check the plugin working or not. Its working to my example code.

Step-3:
Now add a default language like en_US for English.

if(get_option(‘tp_fbl_lang’)==””) {//DEFINE ENGLISH AS DEFAULT LANGUAGE
update_option(‘tp_fbl_lang’,”en_US”);
}

Step-4:
Its time to request for a like button or recommend button to Facebook using our set options.

add_filter(‘the_content’, ‘add_post_footer’);//ADDING FILTER SO THAT FACEBOOK BUTTON ADD TO CONTENT
function add_post_footer($content) {
global $posts;
//GET RELATED OPTIONS VALUE FROM DATABASE
$layout=get_option(‘tp_fb_layout_type’);
$showface=”false”;
if(get_option(‘tp_fb_showfaces’)==1) {
$showface=”true”;
}
$action=get_option(‘tp_fb_action’);
$font=get_option(‘tp_fbl_font’);
$colorscheme=get_option(‘tp_fbl_choosecolor’);

if(get_option(‘tp_fb_width’)!=””) {
$width=get_option(‘tp_fb_width’);
} else {
$width=500;//SET DEFAULT VALUE IF NOT DEFINED BY ADMIN
}
if(get_option(‘tp_fb_height’)!=””) {
$height=get_option(‘tp_fb_height’);
} else if($showface==”true” || $layout==”box_count”) {
$height=100;//SET DEFAULT VALUE FOR BOX WITH COUNT BUTTON OR SHOW IMAGES IF NOT DEFINED BY ADMIN
} else {
$height=28;//SET DEFAULT VALUE FOR STANDARD FB BUTTON IF NOT DEFINED BY ADMIN
}
$iframe='<p style=”margin:2px 0;”><iframe src=”http://www.facebook.com/plugins/like.php?locale=’.get_option(‘tp_fbl_lang’).’&href=’.urlencode(get_permalink($post->ID)).’&amp;layout=’.$layout.’&amp;show-faces=’.$showface.’&amp;width=’.$width.’&amp;action=’.$action.’&amp;colorscheme=’.$colorscheme.'” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:’.$width.’px; height:’.$height.’px”></iframe></p>’;
//ADDING FACEBOOK BUTTON TO SINGLE POST CONTENT
if(is_single() && get_option(‘tp_fblike_display_single’) == ‘1’) {
if(get_option(‘tp_fb_showplace’)==’before’) {
$content=$iframe.$content;
} else {
$content=$content.$iframe;
}
}
//ADDING FACEBOOK BUTTON TO PAGE CONTENT
if(is_page() && get_option(‘tp_fblike_display_page’) == ‘1’) {
if(get_option(‘tp_fb_showplace’)==’before’) {
$content=$iframe.$content;
} else {
$content=$content.$iframe;
}
}
//ADDING FACEBOOK BUTTON TO HOME PAGE CONTENT
if(is_home() && get_option(‘tp_fblike_display_front’) == ‘1’) {
if(get_option(‘tp_fb_showplace’)==’before’) {
$content=$iframe.$content;
} else {
$content=$content.$iframe;
}
}
return $content;
}

add_filter(‘the_content’, ‘add_post_footer’)
this filter call the add_post_footer function with the content.

Step-5:
Its time to set options for like button, do you want to show like button or you choose recommend button to show, what will be the width and height of the like button? do you want to show the like count? Do you want to show the profile picture of visitor who liked the content? etc.
You can download the plugin by clicking here.

Wish You will like it. Inform me if you have any confusion regarding to this tutorial. Enjoy!!!

Author Info

Shah Alom

Hi, This is Mohammad Shah Alom, My passion is Programming & Web Development. I am Founder of Micro Solutions Bangladesh. My Facebook profile shahalom1983 & Twitter Profile shahalom_83

  • Great coommn sense here. Wish I’d thought of that.