Add the Facebook Like Button to your WordPress Blog

Adding a Facebook Like button to your blog can be done manually in just a few steps. There are plugins to manage this for you, but I wanted to aggregate all of my likes onto the the main blog URL, rather than splitting them up for individual posts, as is most commonly done in the plug-ins.

Getting the Like Button Code

To put the Like button in my sidebar. I took a screenshot and measured it to find out my theme has a sidebar that’s 250 pixels wide.

First, I visited the Facebook Like Button page to get the code. I put my blog’s main URL in the box, along with a width of 250. You can set a few other options such as whether or not to include pictures and which of the 6 available fonts you’d like to use.

Clicking the “Get Code” button brings up two text boxes with code to insert the Like button on your site.

The first box is an iframe. It’s a little simpler, in that you only need to insert one bit of code instead of two. But it’s worth the extra step to get the XFMBL code in the second box. This will do a better job of scaling the box vertically to match how much content is actually in it. The iframe code can leave a big gaping hole in your sidebar if you don’t have a long list of fans.

Using the Like Box Instead

If your blog already has a Facebook Page, people who “Like” your blog can automatically be added there in the way that used to be called “fans.” So they’ll get updates from your Facebook Page, and your existing fans will show up immediately in the box.

In that case, you want the Like Box. Adding the Like Box is almost exactly like adding the like button, but it has a few more options. Just go to the Like Box page to get the code instead of the Like Button page above. In the end, this is what I decided to do, so that’s what you’ll see in my current sidebar.

Putting It In Place

Next, it’s a trip to the widgets page. This is located within your blog at wp-admin/widgets.php and can be found in the side navigation under “Appearance.” Drag the “Text” widget from the “Available Widgets” over to the spot on the Sidebar where you want it to appear. A box will pop open for the text you want included. Choose a name for the box and paste in the code from Facebook.

And Finally…

Now there’s just one step left. In order for the XFMBL code to work, you need to pull Facebook’s javascript onto your pages. You do this by adding a big chunk of code known as the Facebook JavaScript SDK. (Click that link to get the code).

The javascript command may take some time to load, so I recommend putting it in the footer of your site. That way the rest of your page will load without waiting for the Facebook SDK. To edit your blog’s footer file, go to the Editor under “Appearance.” ( /wp-admin/theme-editor.php ). From there, select the Footer (footer.php) from your theme files.

Now paste the Facebook JavaScript SDK code into your footer just before the tag, so it will be the last thing to load on every page.

Just hit the “Update” button to save the changes to the footer, and you should now see the Like button showing up on your blog’s sidebar!

Tags: Blogging, Facebook, How To, Like Button, Tips, Tutorial, WordPress

Hide Games From Your Facebook Timeline

One of Facebook’s most polarizing features is the wide variety of time-killing applications. If you’ve visited the site lately, you’ve doubtless seen a number of items in your News Feed updating you on your friends’ progress in Farmville, Mafia Wars, and many others.

Did you know it’s easy to remove these updates from your timeline, without disconnecting from your friends? Just find one of these posts and click the “Hide” link that appears on the right when you mouse over it.

Facebook will then ask you if you want to hide the person or the application. Click the name of the game.

Success! You’ll now no longer see updates on the games your friends are playing on Facebook, and you’ll see more links, photos and status updates instead.

Update: It gets even better. (Thanks to techpp.com) Not only can you keep games and other apps out of your Live Feed, you can also exclude them from your Notifications. When a notification appears in the lower right of your screen, mouse over the upper right corner of the item to see the “X” appear. Click that, and you’ll be invited to hide all notifications from that application.

Tags: Facebook, Facebook Applications, Farmville, Mafia Wars, Tips, Tutorial, Web 2.0

Lovely Charts is Now Open

I’ve been a fan of LovelyCharts.com for some time now. I got in on the private beta and found it to be really useful and even a little fun.

If you ever use flowcharts, org charts, wireframes, or similar diagrams to communicate your ideas, LovelyCharts makes it much less tedious to put those documents together. If, like me, you’ve ever used Illustrator, Fireworks, or (God help me) Quark to draw a diagram or flowchart, this is for you.

Of course there are powerful and perhaps even more flexible charting applications out there. But if you don’t use them often enough to justify their cost or learning curve, then this web-based tool is the answer.

A free account should do almost everything you need to create an occasional flowchart or diagram. You can save the result as an image file to use however you like. Premium accounts add extra features like version history and collaborative tools.

Tags: diagrams, flowcharts, lovelycharts, omnigraffle, Productivity, project management, Tips, Tools, webbased charts

Competitive Search Bookmarklet

Here’s a 5 minute tutorial on saving advanced search criteria in Google into a javascript bookmark. So you can select any text on any web page and run a search on that text using your advanced criteria.

I use it to track what my competitors are saying about any topic I run into.

Competitive Search Bookmarklet Tutorial from Brent Billock on Vimeo.

Here’s the code you need. Watch the video to see how to use it.

javascript:q%20=%20″”%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(“You%20didn’t%20select%20any%20text.%20%20Enter%20a%20search%20phrase:”,%20″”);%20if%20(q!=null)%20location=”LOCATION GOES HERE”%20+%20escape(q).replace(/%20/g,%20″+”);%20void%200

Special thanks to squarefree.com, whose google search bookmarklet I adapted for this tutorial.

Tags: Competitive Intelligence, Google, Marketing, Research, Tips, Tutorial