How To Create a Facebook Page For Your Blog

If you like to create a platform for all your blog readers to know each other and discuss about your blog,  Facebook Page is a good start. You can create a Facebook page for your blog. That will not only help your existing readers to network with each other, but also to easily share your blog posts on Facebook and increase readership. After creating the Facebook Page, you can create a 'Like box' and add it to your blog so that people who visit your blog can find the link to your facebook page and can 'Like' your page without leaving your blog.

I just created a Facebook page for this blog. You can find the page here.

Now I will share how to do it.

First you need to create a Facebook page for your blog. Do the following:

1. Login to your Facebook account. Scroll down to the end of the page. Click on the "Create a Page" link
   
   OR
   Click here to go start creating facebook page.
2. Facebook will ask you to choose a category for your page. As of now, it has  6 categories at the top level. Choose "Brand or Product". I chose this because, this is the only category that had 'website' sub-category!
3. Choose 'website' as sub category.
4. Enter the name of the page. Keep it same as the title of your blog so that people can recognize it easily! (I used "My Life My Way")
   
   
   
   
5. Now your page is ready! And you can see it has URL of it's own.
6. Click on Edit info link to fill in details about your blog.
7. Write a brief description in "Description" field.
8. important: Paste the link to your blog in the "Website:" field. (http://sandeepaonlife.blogspot.com/)

After this, you can follow the steps on your page to..

1.  Add a profile image
2. Invite your friends
3. Tell your fans
4. Post status updates
5. Promote this Page on your website
6. Set up your mobile phone

Now that we have a facebook page, let's see how to add a 'Like box' to your blog.

1. Click on the "Add Like Box" button.
2. In the page that shows up, customize the Like Box for your blog
1. Change the URL to point to your newly created facebook page
2. Change the width of the widget if you want
3. Pick a color scheme (to match your blog's theme)
4. My Like Box looked something like this.



My Like Box Looked like this

5. As you customize your like box, verify the changes in the preview.
6. Once you are happy with your customization, click on "Get Code" button.
3. Get the code for the widget (copy it to clip board)
   

   
   

   
   

   

4. Add it to your blog(Steps for Blogger blogs.)
1. Login to your blogger account
2. Goto "Design" tab of your blog 
3. Click on the "Add a Gadget" link
4. Choose HTML/JavaScript
   

5. Paste the code you copied in step 3 above
6. And save the widget!
7. Congratulations! Now you have Like Box for your Facebook page integrated to your blog.
   (You can see the Like Box on the right side of this blog. You can see it working! )

If you run into any problem/errors during this, share it in comments. I would be happy to assist.

How to display Ads on your blog using Google AdSense

You might have heard about people making money by displaying ads on their blogs using services like Google AdSense.

If you have a Blogger blog, setting up AdSense is fairly simple. Just follow these steps.

Step 1:

          Sign up for Google AdSense. The approval may take anywhere between few hours to many days. 

Step 2: Once you have an activated AdSense account,

• Login to Blogger.
• Goto Monetize tab of your blog by clicking on Montize from your blogger dashboard.

• 

  Monetize link in Dashboard

  In 'Adsense overview' tab, configure how and where you want the ads to appear.

Configure ads

• Choose/login to your adsense account that you created in step 1.
• And you are done! Now you track the ad statistics from this tab! Congrats :)

Track your earnings!

P.S: I just did this to my blog.

Syntax Highlighting for Blogs

Code snippets inside blog posts can be very difficult to read if they are written using normal font.

Consider the following piece of code.

int i, sum=0;
for(i=0; i<n; i++)
{
sum = sum + i;
}
Code without any special formatting.


HTML <pre>...</pre> and <code>...</code> can be used to preserve the white spaces and long lines.
Here's the same code put inside a <pre><code> block..

int i, sum=0;
for(i=0; i<n; i++)
{
    sum = sum + i;
}

Structure of the code preserved using <pre> & <code>

This version looks much better than the first one. The monospaced text makes it easier to read.

However, this is not enough. These generic <pre>&<code> do not highlight the keywords in the code snippet. This is where Syntax Highlighting comes into picture.

Syntax highlighting is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms. This feature eases writing in a structured language such as a programming language or a markup languageas both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it's made only for human readers/editors. (Read more on Wiki..)

Let us apply Syntax Highlighting to the above code.

int i, sum=0;
for(i=0; i<n; i++)
{
    sum = sum + i;
}

Now, this looks much better! This is achieved using a third party Syntax Highlighter plugin.
There are many plugins and other tools available on the internet for Syntax Highlighting.

I am using SyntaxHighlighter for this blog. I chose this because it's easy to use and supports many languages. Will talk about plugin integration with blogger in my next post.


Cheers,
Sandeepa Nadahalli