Skip to content

            Subscribe (RSS | E-Mail)

How to Use the New Facebook Like Button

Facebook recently (within the past few weeks) released a new feature that allows for “Liking” practically anything on the web. This is pretty damn powerful, and apparently in less than a week of its availability, 50,000 websites thought so too.

Have you seen these new Facebook Like buttons at the bottom of some blog posts? Here’s what they look like:

Initially, I glossed over them assuming they were the same thing as the “Become a Fan” buttons (which are now, confusingly, also “Like” buttons). However, these individual Like buttons are specifically for liking the blog post itself.

When you click on the Like button at the bottom of a blog post, an entry gets added to your Facebook timeline stating that you liked the post (assuming you’re logged into Facebook). For example, here you can see that I “Liked” one of my blog posts, The Pursuit of Knowledge:

6 Reasons why all bloggers need to add this button to their posts

If the potential of this Like button isn’t already obvious, let me give you 6 reasons why you should be adding it to your own blog posts right now:

  1. Facebook has over 425 million users; chances are that many of your readers use the network. If you’re already using a Retweet button for Twitter, there’s no reason you shouldn’t be using the Facebook Like button.
  2. The Like button is familiar to Facebook users. They already know what it does and they’ve probably used it several times on Facebook. This familiarity brings comfort and increases the chances they will use it.
  3. Liking a post is a seamless operation for readers already logged into Facebook; one click and it’s done!
  4. By liking a post, the reader tells all his or her Facebook friends about your blog post, greatly amplifying your blog’s exposure.
  5. If other Facebook friends have already Liked the post, their names will be displayed next to the button. This creates a sense of trust and community and increases the chances your reader will also Like the post (creating even more exposure).
  6. You can configure the Like button to show not only the names of the friends, but also their profile pictures! This further amplifies the comfort level of your reader and encourages them to share your blog post.

One other thing to note as a blogger is that the Like button isn’t tied to your Facebook account or Fan page. When a reader likes your blog post, the message that shows up on the readers Facebook timeline links directly back to your blog. This is great because the potential for exposure is huge — a reader doesn’t need to be your Fan or friend on Facebook to share your content!

How to integrate the Facebook Like button on a WordPress blog

For WordPress blogs, I prefer adding the Like button using a WordPress plugin like this one. However if you just want to add the Like button to your theme manually, you can drop this snippet of code in your theme’s single.php file, just after the line that includes the the_content(); function:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px;"></iframe>

For more information, including extra parameters for modifying the behavior of the button, check out the Facebook Developers Documentation page.


Posted in WordPress.

Tagged with , .


Restricting WordPress Tags by Category

Have you ever needed to display category tags? If you want to only display the tags associated with a specific category, unfortunately the built-in WordPress functions will not suffice. Why such basic functionality has to this day not been added to WordPress is beyond me.

Thankfully, after much frustration and research, I have found a working solution using a plugin called Sensitive Tag Cloud. You can visit the plugin home page, or download the plugin from the official WordPress Plugin page.

Once you have installed and activated the plugin, access the configuration page (Appearance -> SensitiveTagCloud) and ensure that the “Restricted to current category” option is enabled.

Now to display the tags for a specific category when you’re browsing that category, edit the archives.php file for your theme and find the section related to browsing by category:

          <?php /* If this is a category archive */ if (is_category()) { ?>
                <h1 class="pagetitle">Category: <?php single_cat_title(); ?></h1>

Now, right below that second line, insert the following function to call SensitiveTagCloud:

<?php
  if( function_exists("stc_widget") )
    stc_widget();
?>

You can also wrap the function in a div if you want to style it. Here’s how my archive.php file looks now (minus the unrelated sections of code):

          <?php /* If this is a category archive */ if (is_category()) { ?>
                <h1 class="pagetitle">Browsing: <?php single_cat_title(); ?></h1>
<div style="background:#EAF3F3 none repeat scroll 0 0; border: 1px solid #D0D8D8; padding: 20px;">
<?php
  if( function_exists("stc_widget") )
    stc_widget();
?>
</div>

And with those changes, here’s how my Category pages now look:

This allows for browsing the tags associated with a specific category, while eliminating irrelevant tags. I write on a variety of topics, so there are a lot of tags that are unrelated or that would be out of context. For example, the “Blogging” tag in the Personal Development category would likely mean something different than the same tag in the Technology category (the latter having more to do with technical things like this article on WordPress).


Posted in WordPress.

Tagged with , .


For the Love of the Command Line

One of the reasons I fell in love with the command line is that it makes getting stuff done fast and straightforward. It’s a world of pure information and constant activity and one that requires only the keyboard; your hands don’t move back and forth between the keyboard and a mouse hunting for graphical elements on the screen and wasting valuable time.

The command line has so many advantages over the GUI. There are no annoying dialog boxes, no GUI quirks, and no frozen windows. If you want to automate something, you write a script. All POSIX-compliant systems have nearly identical tools and their options and configurations are likely to be the same. When you’re unsure about something, you simply pull up the man page or read the through the documentation to help you along.

The world of the command line is a world for tinkerers, for curious people, and for those with a desire to do more.


Posted in Miscellaneous.

Tagged with .


Dabbling in Logo Design

I’m a minimalist at heart. For the longest time I refused to use anything but plain text for the header of my personal blog. However, after realizing the importance branding and differentiating myself, I decided to come up with some type of logo.

All of this started with the idea of making eye’s out of the two a’s in my name. I opened Photoshop, created a new document, added some text and began dabbling.

I thought it would be interesting to show the progression of the logo as I dabbled with the design. You’ll notice how I go full circle from minimalistic, to busy and crowded, and then back to minimalistic.

Raam Dev Logo - First Revision

Here's the one that started it all. It started with the idea of making eye's out of the two a's in my name. At this point I wasn't even treating the logo idea seriously.

Raam Dev Logo - Second Revision

This is where I started to take the idea a little more seriously and began mixing in my tag line.

Raam Dev Logo - Third Revision

I played with the Photoshop custom shapes tool and found some grass.

Raam Dev Logo - Fourth Revision

I took the custom shapes a little too far; looks too busy.

Raam Dev Logo - Fourth Revision

Realizing that the green grass looks a lot like hair, I moved the face away from the letters.

Raam Dev Logo - Sixth Revision

Not liking how the tag line was spread all over the place, I brought it together at the bottom.

Raam Dev Logo - Seventh Revision

My perfectionist self couldn't be happy with the hand-drawn smile. So, using the same font as I used for my name, I created a parentheses and turned it on its side for the smile. I also changed the eyes using a hard-rounded brush instead of a soft-rounded brush.

Raam Dev Logo - Eighth and Final Revision

For the final revision, I tweaked the tag line and replaced the commas with dot separators.

Design is definitely not one of my strong points, but I’m happy with the way the final logo came out. In fact, it’s probably the best and most creative logo I’ve ever come up with. :)


Posted in Graphic Design.

Tagged with , , .


Moving WordPress to a New URL and New Permalink Structure

When I decided to change the permalink structure and move my WordPress blog from blog.raamdev.com to raamdev.com, I knew it was going to be a delicate process. I have over a thousand posts, more than three hundred of which have been indexed by Google. A huge portion of my traffic comes from Google, so my biggest concern was that the old URLs redirect to the new location.

Step 1: Disable plugins

It’s a good idea to disable your plugins before making these changes. At the very least, if you have a caching plugin installed (such as WP Super Cache), delete the cache and then disable that plugin.

Step 2: Change the blog URL

First, I had to change the WordPress blog URL from blog.raamdev.com to raamdev.com/blog/. This is simply a matter of updating the “WordPress address” and “Blog address” options from within the WordPress Administration panel (Settings -> General).

Second, I wanted the final URL to be raamdev.com/, instead of raamdev.com/blog/. To do this, I first changed the “Blog address” to raamdev.com/. Now to get WordPress working on the webroot (raamdev.com/), I had to move /blog/index.php to the webroot (/index.php) and then edit index.php and change this line,

require('./wp-blog-header.php');

to this,

require('./blog/wp-blog-header.php');

Now, when index.php is loaded, it knows to look for all the WordPress files in /blog/ and since WordPress has been configured to use raamdev.com/ as the “Blog address”, it will automatically handle everything else.

Step 3: Redirect old URLs to the new URL

The blog. sub-domain maps to a directory in the webroot called /blog/. If someone visits a link to a page that includes the sub-domain, the web server needs to tell the browser the new location. To do this, I needed to recreate the /blog/ directory and add the following to an .htaccess file:

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{HTTP_HOST} ^blog\.raamdev\.com$ [NC]
RewriteRule ^(.*)$ http://raamdev.com/blog/$1 [R=301,L]

Now, if someone tries to visit http://blog.raamdev.com/2010/01/28/some-blog-post, the web server will do a 301 redirect to http://raamdev.com/blog/2010/01/28/some-blog-post.

What’s a 301 redirect? Well, when you move a web page from one location to another, you can specify the type of redirection. A 301 redirect means the web page has been moved permanently. This is useful for keeping indexes updated. For example, if someone searches Google and finds an old link, Google will detect the 301 redirect and update its index with the new URL, thereby keeping your URL’s pagerank.

Step 4: Change Permalink structure

To change the permalink structure, I used the awesome Permalink Migration plugin by Dean Lee. With this plugin, I just specify the old permalink structure (in my case, this was /%year%/%monthnum%/%postname%/) and then change the permalink structure in WordPress (Settings -> Permalinks) to the new format (I’m using /%postname%/).

Now whenever someone visits a URL using the old permalink structure, Dean’s plugin sends a 301 redirect to the new URL.

Summary

With the .htaccess rewrite rule and Dean’s Permalink Migration plugin, we now have a double 301 redirect to make sure the old URLs redirect to the new ones:

  1. Someone searches Google and finds this link to my site: http://blog.raamdev.com/2010/01/28/some-blog-post
  2. The .htaccess rule rewrites the URL and redirects: http://raamdev.com/blog/2010/01/28/some-blog-post
  3. Dean’s Permalink Migration plugin redirects to the new permalink structure: http://raamdev.com/blog/some-blog-post

Posted in WordPress.

Tagged with , .