Wp J Facebook Likebox is slide up jquery window to represent facebook like box with customize feature. This plugin has both php and short code option. Please use [wpjflb] or wpjflb_loadpagefnc(); in your site for calling the plugin.

Let’s learn how we can create a plugin like Wp J Facebook Like Box.

Create a folder called “wpjfacebook_likebox” now in that folder place the below files and folder:

  • wpjfacebook_likebox.php
  • adminpage.php
  • readme.txt
  • screenshot-1.png
  • screenshot-2.png
  • lib
    • facebook_style.css
    • fb_close_box.png

That is the all files and folder we need to create this Plugin. Now let’s start with wpjfacebook_likebox.php file.

a) wpjfacebook_likebox.php:

wpjfacebook_likebox.php is the primary file of this plugin in where we cached all the parameters we need for this plugin. This php file also has wordpress functions and html/css code to show at front-end of the site. Now let’s learn step by step of how we can create one plugin like that.

<?php
/*
Plugin Name: WP J Facebook Like Box
Plugin URI: http://www.j-download.com
Description: Wp J Facebook Likebox is slide up jquery window to represent facebook like box with customize feature. This plugin has both php and short code option. Please use [wpjflb] or wpjflb_loadpagefnc(); in your site for calling the plugin.
Author: Md. Shaon Bahadur
Version: 1.0
Author URI: http://www.j-download.com
*/

function wpjflb_loadpagefnc() {
    $facebookpagename           =       get_option('wpjflb_fpagename');
    $facebookwidth              =       get_option('wpjflb_fwidth');
    $facebookheight             =       get_option('wpjflb_fheight');
    $facebookconnections        =       get_option('wpjflb_fconnections');
    $facebookbackgroundcolor    =       get_option('wpjflb_fbackground');
    $facebookcolorscheme        =       get_option('wpjflb_fcolorscheme');
    $facebookheader             =       get_option('wpjflb_fheader');
    $facebookstream             =       get_option('wpjflb_fstream');
    $onlyonfrontpage            =       get_option('wpjflb_fonlyfpage');

    if($onlyonfrontpage=='1'){
     if (is_front_page()){
?>
            <link rel="stylesheet" href="/<?php bloginfo('wpurl'); ?>/wp-content/plugins/wpjfacebook_likebox/lib/facebook_style.css" />
            <style>
            #facebookcontainer {
                width: <?php echo $facebookwidth; ?>px;
            }
            </style>
            <script language="JavaScript">
                $(document).ready(function(){
                    $('#facebookcontainer').slideDown( 2000 );
                });
                jQuery(function( $ ){
                    var container = $( "#facebookcontainer" );

                    $( ".fb_close_box" ).click(
                        function( event ){
                            event.preventDefault();

                            if (container.is( ":visible" )){
                                container.slideUp( 2000 );
                            }
                            else {
                                container.slideDown( 2000 );
                            }
                        }
                    );
                });
            </script>
            <div id="facebookcontainer">
                <div class="fb_close_box"></div>
                <div id="inner_facebook">
                    <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:<?php echo $facebookwidth; ?>px; height:<?php echo $facebookheight; ?>px;background: <?php echo $facebookbackgroundcolor; ?>;" src="http://www.facebook.com/plugins/likebox.php?href=http://Fwww.facebook.com/<?php echo $facebookpagename; ?>&amp;width=<?php echo $facebookwidth; ?>&amp;colorscheme=<?php echo $facebookcolorscheme; ?>&amp;connections=<?php echo $facebookconnections; ?>&amp;stream=<?php echo $facebookstream; ?>&amp;header=<?php echo $facebookheader; ?>&amp;height=<?php echo $facebookheight; ?>"></iframe>
                </div>
            </div>
<?php
     }
         }
     else {
?>

            <link rel="stylesheet" href="/<?php bloginfo('wpurl'); ?>/wp-content/plugins/wpjfacebook_likebox/lib/facebook_style.css" />
            <style>
            #facebookcontainer {
                width: <?php echo $facebookwidth; ?>px;
            }
            </style>
            <script language="JavaScript">
                $(document).ready(function(){
                    $('#facebookcontainer').slideDown( 2000 );
                });
                jQuery(function( $ ){
                    var container = $( "#facebookcontainer" );

                    $( ".fb_close_box" ).click(
                        function( event ){
                            event.preventDefault();

                            if (container.is( ":visible" )){
                                container.slideUp( 2000 );
                            }
                            else {
                                container.slideDown( 2000 );
                            }
                        }
                    );
                });
            </script>
            <div id="facebookcontainer">
                <div class="fb_close_box"></div>
                <div id="inner_facebook">
                    <iframe scrolling="no" frameborder="0" allowtransparency="true" style="border:none; overflow:hidden; width:<?php echo $facebookwidth; ?>px; height:<?php echo $facebookheight; ?>px;background: <?php echo $facebookbackgroundcolor; ?>;" src="http://www.facebook.com/plugins/likebox.php?href=http://Fwww.facebook.com/<?php echo $facebookpagename; ?>&amp;width=<?php echo $facebookwidth; ?>&amp;colorscheme=<?php echo $facebookcolorscheme; ?>&amp;connections=<?php echo $facebookconnections; ?>&amp;stream=<?php echo $facebookstream; ?>&amp;header=<?php echo $facebookheader; ?>&amp;height=<?php echo $facebookheight; ?>"></iframe>
                </div>
            </div>
<?php
     }

}
add_shortcode('wpjflb', 'wpjflb_loadpagefnc');

function add_wpjflb_script()
{
    wp_register_script( 'wpjfacebook', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
    wp_enqueue_script( 'wpjfacebook' );
}
add_action('get_header', 'add_wpjflb_script');

//*************** Admin function ***************


function wpjflb_admin() {
    include('adminpage.php');
}

function wpjflb_admin_actions() {
    add_options_page('Wp J Facebook Likebox Options', 'Wp J Facebook Likebox', 'manage_options', 'wp_j_facebook_likebox', 'wpjflb_admin');
}

add_action('admin_menu', 'wpjflb_admin_actions');

?>

Here at first you will see a function with the name of function wpjflb_loadpagefnc(). This is the function which is called during page rendering and this shows our like book.

At first we cached the parameter we need for this plugin. See below parameters.

    $facebookpagename           =       get_option('wpjflb_fpagename');
    $facebookwidth              =       get_option('wpjflb_fwidth');
    $facebookheight             =       get_option('wpjflb_fheight');
    $facebookconnections        =       get_option('wpjflb_fconnections');
    $facebookbackgroundcolor    =       get_option('wpjflb_fbackground');
    $facebookcolorscheme        =       get_option('wpjflb_fcolorscheme');
    $facebookheader             =       get_option('wpjflb_fheader');
    $facebookstream             =       get_option('wpjflb_fstream');
    $onlyonfrontpage            =       get_option('wpjflb_fonlyfpage');

Now from the above parameter one is if($onlyonfrontpage=='1'), which is to show the like box only at home page. This has been done with wordpress function called if (is_front_page()).

Then we called style and script like below in the file:

            <link rel="stylesheet" href="/<?php bloginfo('wpurl'); ?>/wp-content/plugins/wpjfacebook_likebox/lib/facebook_style.css" />
            <style>
            #facebookcontainer {
                width: <?php echo $facebookwidth; ?>px;
            }
            </style>
            <script language="JavaScript">
                $(document).ready(function(){
                    $('#facebookcontainer').slideDown( 2000 );
                });
                jQuery(function( $ ){
                    var container = $( "#facebookcontainer" );

                    $( ".fb_close_box" ).click(
                        function( event ){
                            event.preventDefault();

                            if (container.is( ":visible" )){
                                container.slideUp( 2000 );
                            }
                            else {
                                container.slideDown( 2000 );
                            }
                        }
                    );
                });
            </script>

Then we have taken several div to show the html. Here facebook like box code has been called in iframe. You will see certain div, style and Script parameters are passed based on dynamic value.

Then we created a short code for this plugin like below code:

add_shortcode('wpjflb', 'wpjflb_loadpagefnc');

Then we used a function with the name of function add_wpjflb_script() to include jquery in the page. So that slide up and down works.

function add_wpjflb_script()
{
    wp_register_script( 'wpjfacebook', 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js');
    wp_enqueue_script( 'wpjfacebook' );
}
add_action('get_header', 'add_wpjflb_script');

Then we called function wpjflb_admin() function for the admin page, so that admin can setup width, page name, height etc parametes from wordpress admin panel.

function wpjflb_admin() {
    include('adminpage.php');
}

Here we called a php file adminpage.php, later we will go through with that file. We will see what is in that file and what is the functionality of that page.

Lastly we called function wpjflb_admin_actions() to take the actions place.

function wpjflb_admin_actions() {
    add_options_page('Wp J Facebook Likebox Options', 'Wp J Facebook Likebox', 'manage_options', 'wp_j_facebook_likebox', 'wpjflb_admin');
}

add_action('admin_menu', 'wpjflb_admin_actions');

Now let’s see what is inside of adminpage.php page.

b) adminpage.php

Now let’s open adminpage.php file, which is the primary file of this plugin for admin panel.

<?php
    if($_POST['wpjflb_hidden'] == 'Y') {
        //Form data sent
        $fpagename = $_POST['wpjflb_fpagename'];
        update_option('wpjflb_fpagename', $fpagename);

        $fwidth = $_POST['wpjflb_fwidth'];
        update_option('wpjflb_fwidth', $fwidth);

        $fheight = $_POST['wpjflb_fheight'];
        update_option('wpjflb_fheight', $fheight);

        $fconnections = $_POST['wpjflb_fconnections'];
        update_option('wpjflb_fconnections', $fconnections);

        $fbackground = $_POST['wpjflb_fbackground'];
        update_option('wpjflb_fbackground', $fbackground);

        $fcolorscheme = $_POST['wpjflb_fcolorscheme'];
        update_option('wpjflb_fcolorscheme', $fcolorscheme);

        $fheader = $_POST['wpjflb_fheader'];
        update_option('wpjflb_fheader', $fheader);

        $fstream = $_POST['wpjflb_fstream'];
        update_option('wpjflb_fstream', $fstream);

        $fonlyfpage = $_POST['wpjflb_fonlyfpage'];
        update_option('wpjflb_fonlyfpage', $fonlyfpage);

        ?>
        <div class="updated"><p style="text-align: center; font-weight: bold; color: #008000;"><strong><?php _e('Data Has Been Saved For Wp J Facebook Likebox Settings.' ); ?></strong></p></div>
        <?php
    } else {
        //Normal page display
        $fpagename = get_option('wpjflb_fpagename');
        $fwidth = get_option('wpjflb_fwidth');
        $fheight = get_option('wpjflb_fheight');
        $fconnections = get_option('wpjflb_fconnections');
        $fbackground = get_option('wpjflb_fbackground');
        $fcolorscheme = get_option('wpjflb_fcolorscheme');
        $fheader = get_option('wpjflb_fheader');
        $fstream = get_option('wpjflb_fstream');
        $fonlyfpage = get_option('wpjflb_fonlyfpage');
    }


?>
<div class="wrap">
<form name="wpjflb_form" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    <input type="hidden" name="wpjflb_hidden" value="Y">
<table border="0" cellpadding="0" cellspacing="0" width="90%" align="center" style="margin-right: auto ! important; margin-left: auto ! important; margin-top: 20px; margin-bottom: 20px;">
    <tr>
        <td width="100%" valign="top" style="text-align: center; background: #333333; color: #FFFFFF; line-height: 25px;">
            <?php    echo "<b>" . __( 'Wp J Facebook Likebox Settings', 'wpjflb_admin' ) . "</b>"; ?>
        </td>
    </tr>
    <tr>
        <td width="100%" valign="top" style="border: 1px solid #CCCCCC; padding: 10px; box-shadow: 2px 2px 8px 1px #CCCCCC; border-radius: 0px 0px 5px 5px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Facebook Page Name:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fpagename" value="<?php echo $fpagename; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: JoomlaDownload" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Width:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fwidth" value="<?php echo $fwidth; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 400" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Height:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fheight" value="<?php echo $fheight; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 400" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Connections:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fconnections" value="<?php echo $fconnections; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 50" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Background:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fbackground" value="<?php echo $fbackground; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: #000000" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Colorscheme:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fcolorscheme" id="wpjflb_fcolorscheme">
                            <option <?php if($fcolorscheme=='light'){ echo 'selected="selected"'; } ?> value="light">Light</option>
                            <option <?php if($fcolorscheme=='dark'){ echo 'selected="selected"'; } ?> value="dark">Dark</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: Dark" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Header:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fheader" id="wpjflb_fheader">
                            <option <?php if($fheader=='false'){ echo 'selected="selected"'; } ?> value="false">No</option>
                            <option <?php if($fheader=='true'){ echo 'selected="selected"'; } ?> value="true">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: No" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Stream:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fstream" id="wpjflb_fstream">
                            <option <?php if($fstream=='false'){ echo 'selected="selected"'; } ?> value="false">No</option>
                            <option <?php if($fstream=='true'){ echo 'selected="selected"'; } ?> value="true">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: No" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Show Only On Front Page:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fonlyfpage" id="wpjflb_fonlyfpage">
                            <option <?php if($fonlyfpage=='0'){ echo 'selected="selected"'; } ?> value="0">No</option>
                            <option <?php if($fonlyfpage=='1'){ echo 'selected="selected"'; } ?> value="1">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: Yes" ); ?></td>
                </tr>
            </table>

            <p class="submit" style="margin: auto;text-align: center;">
                <input class="button-primary" type="submit" name="Submit" value="<?php _e('Save Data', 'wpjflb_admin' ) ?>" />
            </p>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td width="100%" colspan="3" valign="middle" height="20" align="right" style="background: #DDDDDD;padding: 5px;">
                        <b>Short Code : [wpjflb]</b><br /> <b>Php Function: wpjflb_loadpagefnc();</b>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</form>
</div>

At first we checked a hidden filed value with if($_POST['wpjflb_hidden'] == 'Y'). If the value is Y then we updated Options of our parameters. Otherwise we just cached the parameters into several variables.

    if($_POST['wpjflb_hidden'] == 'Y') {
        //Form data sent
        $fpagename = $_POST['wpjflb_fpagename'];
        update_option('wpjflb_fpagename', $fpagename);

        $fwidth = $_POST['wpjflb_fwidth'];
        update_option('wpjflb_fwidth', $fwidth);

        $fheight = $_POST['wpjflb_fheight'];
        update_option('wpjflb_fheight', $fheight);

        $fconnections = $_POST['wpjflb_fconnections'];
        update_option('wpjflb_fconnections', $fconnections);

        $fbackground = $_POST['wpjflb_fbackground'];
        update_option('wpjflb_fbackground', $fbackground);

        $fcolorscheme = $_POST['wpjflb_fcolorscheme'];
        update_option('wpjflb_fcolorscheme', $fcolorscheme);

        $fheader = $_POST['wpjflb_fheader'];
        update_option('wpjflb_fheader', $fheader);

        $fstream = $_POST['wpjflb_fstream'];
        update_option('wpjflb_fstream', $fstream);

        $fonlyfpage = $_POST['wpjflb_fonlyfpage'];
        update_option('wpjflb_fonlyfpage', $fonlyfpage);

        ?>
        <div class="updated"><p style="text-align: center; font-weight: bold; color: #008000;"><strong><?php _e('Data Has Been Saved For Wp J Facebook Likebox Settings.' ); ?></strong></p></div>
        <?php
    } else {
        //Normal page display
        $fpagename = get_option('wpjflb_fpagename');
        $fwidth = get_option('wpjflb_fwidth');
        $fheight = get_option('wpjflb_fheight');
        $fconnections = get_option('wpjflb_fconnections');
        $fbackground = get_option('wpjflb_fbackground');
        $fcolorscheme = get_option('wpjflb_fcolorscheme');
        $fheader = get_option('wpjflb_fheader');
        $fstream = get_option('wpjflb_fstream');
        $fonlyfpage = get_option('wpjflb_fonlyfpage');
    }

Then we called some html/css code with those paramets. Please see below code and you will understand what it does.

<div class="wrap">
<form name="wpjflb_form" method="post" action="<?php echo str_replace( '%7E', '~', $_SERVER['REQUEST_URI']); ?>">
    <input type="hidden" name="wpjflb_hidden" value="Y">
<table border="0" cellpadding="0" cellspacing="0" width="90%" align="center" style="margin-right: auto ! important; margin-left: auto ! important; margin-top: 20px; margin-bottom: 20px;">
    <tr>
        <td width="100%" valign="top" style="text-align: center; background: #333333; color: #FFFFFF; line-height: 25px;">
            <?php    echo "<b>" . __( 'Wp J Facebook Likebox Settings', 'wpjflb_admin' ) . "</b>"; ?>
        </td>
    </tr>
    <tr>
        <td width="100%" valign="top" style="border: 1px solid #CCCCCC; padding: 10px; box-shadow: 2px 2px 8px 1px #CCCCCC; border-radius: 0px 0px 5px 5px;">
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Facebook Page Name:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fpagename" value="<?php echo $fpagename; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: JoomlaDownload" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Width:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fwidth" value="<?php echo $fwidth; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 400" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Height:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fheight" value="<?php echo $fheight; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 400" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Connections:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fconnections" value="<?php echo $fconnections; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: 50" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Background:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle"><input type="text" name="wpjflb_fbackground" value="<?php echo $fbackground; ?>" size="20"></td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: #000000" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Colorscheme:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fcolorscheme" id="wpjflb_fcolorscheme">
                            <option <?php if($fcolorscheme=='light'){ echo 'selected="selected"'; } ?> value="light">Light</option>
                            <option <?php if($fcolorscheme=='dark'){ echo 'selected="selected"'; } ?> value="dark">Dark</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: Dark" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Header:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fheader" id="wpjflb_fheader">
                            <option <?php if($fheader=='false'){ echo 'selected="selected"'; } ?> value="false">No</option>
                            <option <?php if($fheader=='true'){ echo 'selected="selected"'; } ?> value="true">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: No" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Stream:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fstream" id="wpjflb_fstream">
                            <option <?php if($fstream=='false'){ echo 'selected="selected"'; } ?> value="false">No</option>
                            <option <?php if($fstream=='true'){ echo 'selected="selected"'; } ?> value="true">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: No" ); ?></td>
                </tr>
                <tr>
                    <td height="35" width="20%" valign="middle"><?php _e("<b>Show Only On Front Page:</b>" ); ?></td>
                    <td height="35" width="60%" valign="middle">
                        <select name="wpjflb_fonlyfpage" id="wpjflb_fonlyfpage">
                            <option <?php if($fonlyfpage=='0'){ echo 'selected="selected"'; } ?> value="0">No</option>
                            <option <?php if($fonlyfpage=='1'){ echo 'selected="selected"'; } ?> value="1">Yes</option>
                        </select>
                    </td>
                    <td height="35" width="20%" valign="middle" style="color: #008000; font-weight: bold;"><?php _e(" ex: Yes" ); ?></td>
                </tr>
            </table>

            <p class="submit" style="margin: auto;text-align: center;">
                <input class="button-primary" type="submit" name="Submit" value="<?php _e('Save Data', 'wpjflb_admin' ) ?>" />
            </p>
            <table border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
                <tr>
                    <td width="100%" colspan="3" valign="middle" height="20" align="right" style="background: #DDDDDD;padding: 5px;">
                        <b>Short Code : [wpjflb]</b><br /> <b>Php Function: wpjflb_loadpagefnc();</b>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</form>
</div>

These are the pretty much about adminpage.php file function. Then we have used one external css to make the look and feel good.

c) facebook_style.css

This is just a css file. See Css code below

    #facebookcontainer {
        bottom: 0px ;
        display: none ;
        left: 5px ;
        position: fixed ;
        float: right;
        box-shadow: 2px 4px 9px 4px #CCCCCC;
        z-index: 9999;
    }

    #facebookcontainer #inner_facebook {
        background-color: #F0F0F0 ;
        border-bottom-width: 0px ;
        border-radius:5px 5px 0px 0px;
    }
    #facebookcontainer .fb_close_box {
        background: url("fb_close_box.png") no-repeat scroll left top transparent;
        cursor: pointer;
        float: right;
        height: 20px;
        margin-right: -10px;
        margin-top: -20px;
        position: relative;
        width: 20px;
        z-index: 100;
    }

Here at the css we called an image with the name fb_close_box.png in lib folder.

This are pretty much about this plugin. Beside that we have used readme.txt, This is a text file where we mentioned how this plugin works and other stuff. Then we used two screen shot with the name of screenshot-1.png and screenshot-2.png

That is all you need to do make this plugin works. Hope this will help you to learn basic wordpress plugin creation. Now zip the folder and install it from wordpress admin panel.

Download Source Code Wp J Facebook Like Box

Add comment


Security code
Refresh