Facebook pop up Light Box for WordPress

If you are interested to promote your facebook page then this plugin can help you out. This plugin will pop up a facebook like box displaying a like button and the number of people liking your page.

This post will help you to install Facebook Pop-up LikeBox for your WordPress Blog ! For this purpose you need to install a plugin  named as Facebook Page Promoter Lightbox. And its not that easy to get it to work. It is quite confusing for beginners so that’s why i am writing this post.

Installing the WordPress Plugin

  • Click here to get Facebook Page Promoter Lightbox.
    Note: I haven’t developed this plugin, I am just instructing on how to install it.
  • And go to WordPress Dashboard > Plugins > Add new > Upload
  • Upload the downloaded file.
  • And install it.

  • After installing it you can access it in, Arevico Settings > Facebook LightBox as shown below.

Now the complication begins. Here you have to insert the Facebook Page Numeric ID. Inserting the username of the facebook page wont work. You have to strictly insert Numeric ID only. Now most people would just give up and find another plugin because they don’t know how to get the numeric ID of the page.

Getting Numeric ID of Page

  • Go to Goto https://graph.facebook.com/YourPageNameHere
  • Then you will get some details about your page, It might look like this:

  • Just copy your Page ID as shown in the image above and paste it in the Facebook Numeric ID box.
  • And save changes. That’s it you are done.

Show every X days

The facebook light box appears on every page load. And if you don’t want it to be like that. Then just change the value of “show every x days“.

  • If you want it to appear every 10 days, Just add 10 over there and save.
  • If you wan’t it to appear only once and never again, Just add large value like 99999.

If you have any doubts or questions, feel free to comment below.

Creating Tables in HTML

In this post lets see how to create a table in the html document. At the beginning it might seem complicated, but trust me its not. Before starting with the code, you need to understand the basics of standard table.

A table can be divided into two basic parts. One is the row and other is the column.

  • Rows are arranged one below the other
  • Columns are arranged side by side

You can see a table in the image above. I just used excel document for explaining the basics of table. Now in this table, the blue part is the column. Column goes from top to bottom. While the red part is the row. Row goes from left to right.

So again to remember the difference between rows and column:

  • Column goes from top to bottom
  • Row goes from left to right

Table Tags

Now to add a table to the html document you need the these tags:

  • Opening table tag – <table>
  • Closing table tag </table>
But just adding the table tags wont help you. You need to add rows and data to your table. Note that we are not adding columns. The table will be formed just by adding rows and table data. Each box which stores data is called as Cell. Note: Table data is denoted by <td> while Table row is denoted by <tr>
  • Opening row tag – <tr>
  • Closing row tag – </tr>
  • Opening data tag – <td>
  • Closing data tag – </td>

Convention of adding tags

  • First comes the table
  • Then comes row. (Row is within table tags)
  • And then comes data. (Data is within Row tags)

Creating first table with one Row and two Cells

Lets go ahead and create a very simple table which has only 1 row and two cells (two data boxes). For this purpose we will use the code given below:


<table>

<tr>
<td> Hello </td>
<td> World </td>
</tr>

</table>

It would simply result into nothing more than “Hello World” text on your web page as shown below:

Now you might wonder what just happened? We added a table but we are not getting one! Actually our text is within the table. But we are not able to see the table because we didn’t specify the table border.

Table Border

If you don’t specify the table border then the borders of your table will be simply invisible. And if you want your table borders to show up you need to specify the border attribute to your table tag.

To add a border attribute, you need to modify the opening table tag. Just change it to:

 <table border="1"> 

In the code above we specified the border value as 1. Its basically the thickness of the table border.

Recreating first table with table border

Now lets modify our first table and add table border to it.


<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
</tr>

</table>

This time we get a table with one row and two cells along with the table border.

Adding multiple rows

Now lets modify the previous code and add more rows to our table. I think instead of my explanation, the example itself will help you to understand in a better way.


<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
</tr>

<tr>
<td> Omkar </td>
<td> Bhagat </td>
</tr>

<tr>
<td> Bye </td>
<td> World </td>
</tr>

</table>

Adding multiple cells/columns

To add multiple data cells, you just need to add more of table data blocks inside table row blocks. Lets create a table having following properties:

  1. 1st  row, 3 cells
  2. 2nd row, 5 cells
  3. 3rd row, 2 cells

<table border="1">

<tr>
<td> Hello </td>
<td> World </td>
<td> Again </td>
</tr>

<tr>
<td> Omkar </td>
<td> Bhagat </td>
<td> loves </td>
<td> code </td>
<td> fap </td>
</tr>

<tr>
<td> Bye </td>
<td> World </td>
</tr>

</table>

So we finally made a table which has 3 rows and each row has different number of cells. I know this looks ugly at the moment. But trust me it will turn into a beautiful table when we learn CSS (Cascading style sheet).

HTML is just the outline, but CSS adds all the styles and design to your web page. I will begin CSS tutorials when i finish up with basic HTML Tutorials and you are definitely going to love it. So keep following Codefap.com .. Thanks!

 

Text formatting in HTML – Bold, Italic, Underline

In this post you will learn the basics of text formatting in html document. Text formatting basically means all the operations which you can perform on the text. For example, make the text bold, italic, underline, etc.

In the previous tutorials we learned how create a hyperlink out of simple text.
We created the hyperlink of our desired text by placing the text within the opening a tag ( <a> )and closing a tag ( </a> ). In the similar way to perform any other operation on the text, we can place the text between the respective tag.

If you didn’t understand any of the above, just forget it.
You will understand with examples given below.

1. Now suppose if you want to bold the text, then you need b tag as shown below:

 <strong> 1st text goes here </strong> 

2. If you want to italic the text, then you need i tag as shown below:

 <em> 2nd text goes here </em> 

3. If you want to underline the text, then you need u tag as shown below:

 <span style="text-decoration: underline;"> 3rd text goes here </span> 

Now lets place all these in one single html document:


<strong> 1st text goes here </strong>
<em> 2nd text goes here </em>
<span style="text-decoration: underline;"> 3rd text goes here </span>

It would result into something like this :

HTML Tutorial 5 – Text formatting basics and Line Break