Category Archives: Social Media

Facebook Cover Photo Template

Posted on by

Several days ago I wrote about the new Timeline layout that Facebook is implementing across all profiles and pages. I detailed some steps, providing the dimensions of the cover photo. Since then, I’ve come across several Timeline layouts (cover/profile photo combos) that really took this to the next level. Here are a few…

As you can see, some creative souls out there are really taking advantage of this new layout.

To help this along, I’ve decided to provide a layered Photoshop template (Windows: rick-click and choose Save As…, Mac: option-click or right-click), which should help get you up and running quick. Don’t forget to come back and leave your Facebook URL in the comment box so I can take a look. I’m excited to see what you guys come up with!

This has been today’s Clarified Butter.

Add a Facebook Like button to WordPress blog posts

Posted on by

Adding a Facebook Like button to your non-Facebook content can greatly increase its ability to be more social, and be shared with a greater audience.

Here we will discuss adding a Like button to your WordPress posts. That is, a Like button for each individual post, and not for the entire blog (which is also a good idea to have in your sidebar). A Like button allows Facebook users to like specific posts on your blog, which in turn displays this as a story on their profile (and potentially on their friend’s feeds or tickers).

For the purpose of this post, we will be using the Twenty Eleven WordPress theme. This plugin will work across many other themes, but using this theme, and similar themes, will allow us to better place where the Like button appears.

The first step is generating the Like button code to be added to our theme’s template files. Like button code can usually be created with the tool provided by WordPress. The problem is that the URL to define is dynamic, and we can’t specify a static URL. Luckily, each individual WordPress post has a defined Permalink, and we just need to make a request for that URL.

Here is the code you need to use. I’ve already embedded the Permalink code. Copy this to your clipboard:

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

Now, in WordPress, login to Admin and go to Appearance > Editor. Under Templates click on the content.php file. This is the file used to display the posts on the main index page of your blog.

Paste the code just after the </h1> tag, which is the title of the post. Click Update File to save your changes. Now visit your blog’s main page to see the Like button in action.

Next, open the content-single.php file and paste the same code before the <h1> tag. This template file displays a single post’s content. I prefer the look of the Like button above the post title on single-post pages, but you can add it anywhere you prefer. Click Update File to save your changes.

Now, on your blog’s home page, click on a post’s title to see the full post in the single-post layout. You will see the Like button above the post’s title (or wherever you placed it).

There you have it, a simple implementation of the Facebook Like button on your WordPress blog. Now, write some really neat-o blog posts worth liking, and put Facebook to work for you.

This has been today’s Clarified Butter.

Create the perfect cover photo for Facebook’s new Timeline layout

Posted on by

Regardless of whether you like it or not, everybody will eventually have the new Timeline layout for their Facebook profile or page. I personally like it. I think the layout is cleaner, and provides more flexibility when it comes to customization.

A major part of the new layout is the Cover photo, which is the large image that encompasses the top 315 pixels of your profile/page (excluding the Facebook bar across the top). Choosing what to place here is much more than choosing a photo from your existing albums, or uploading a plain photo. The key is developing an image that better explains yourself or your business.

Choosing what to design can vary widely, but should be focused on what you want to emphasize or portray about yourself or business. For a Business Page, you might want to include a series of photos that relate to the products or services that you offer. Here at ProGravix, we chose to use an image that mimics the look and feel of our website, which currently emphasizes our mantra, Simplify Chaos.

To get started, fire up your favorite graphics application. We chose Photoshop CS5. Create a new document with a size of 850x315px.

What you do next is up to you. Be creative! Can’t? Well, that’s where we can help. If you need assistance in developing a cover photo, please contact us. You’ll be glad you did.

When designing, make sure not to place any important content, such as text, where the profile photo is, which is on the bottom left of the cover photo. Any content placed here in the cover photo will be covered up by the logo.

Whatever you design, make a statement with your cover photo. Just because it’s a static image doesn’t mean it should be plain. As always, keep it simple and clean!

This has been today’s Clarified Butter.

Create a custom Facebook Business Page Tab for the new Timeline layout

Posted on by

Facebook recently announced that Facebook Pages for Businesses will be receiving the same new Timeline layout that personal accounts have had for some time now. I know, I know, most of you are getting sick and tired of the constant changes over at Facebook, but I think this new layout is awesome.

Over the past couple of days, I’ve been trying to figure out how to add a custom Page Tab in this new layout. Page Tabs are those rectangular thumbs below your cover photo (which include a tab for Photos and Likes by default). Any apps you have installed would also be presented here.

I could easily create the Page (the actual page that shows the content), but getting the actual Tab to show up on my Facebook Business Page wasn’t so easy…

In this post, we’ll be discussing how to create a Page Tab to display custom content inside of Facebook. In other words, create a website page within Facebook that is associated with your Business Page. This is useful if you want to post a coupon, promotion, or other content that doesn’t fit elsewhere on your Facebook Business Page.

The Page Content
Before you do anything, you need to create the actual content to display within the Facebook page. I won’t go into specifics with this, since this is outside the scope of Facebook (and this post). In general, you need to create an HTML page, using any technology you prefer, such as HTML, CSS, PHP, JS, etc. My only suggestion is keeping the content no wider than 790px. It’s also best not to have the content very tall. If you do, those ugly iFrame scroll bars will likely appear. Once you have your content developed, it needs to be available online. If you need help developing the content, and/or adding it to Facebook, please contact us.

For the purpose of this tutorial, let’s assume your content is created and available at http://www.example.com/facebook/index.html.

The Facebook App
Don’t go running off now! Yes, we are going to create a Facebook App, but only for the purpose of creating the Page Tab. You don’t need to be a developer, or know anything beyond what you already have in your noggin. Go to https://developers.facebook.com/apps and click on Create New App.

Enter a name for your App. This isn’t really important, since you are going to be the only one that sees it. Also, namespace is not needed since we are just creating this app for a Page Tab. Click Continue, and complete the CAPTCHA security check.

On the Basic Settings page for your newly create app, no further information is needed under Basic Info, so click on the Page Tab selection at the bottom.

For Page Tab Name, enter the name you would like to appear below the button on your Facebook Page.

For Page Tab URL, enter the URL where the content exists on your server. Our example above was http://www.example.com/facebook/index.html.

For Secure Page Tab URL, enter the SSL URL where the same content exists on your server. This would be a URL that starts with https://. For example, https://www.example.com/facebook/index.html

You can leave Page Tab Edit URL blank, choose Wide (810px) for the Page Tab Width and click Save Changes.

Now, the part that was nearly impossible to figure out. I’m not sure why Facebook doesn’t provide a way to install the app to your page from within the app’s settings page. Maybe this is a glitch that will be cleared up soon. While you are still on your app’s basic settings page, make a note of your App ID and Page Tab URL (which in our example is http://www.example.com/facebook/index.html). Open a new browser window and go to:

https://www.facebook.com/dialog/pagetab?app_id=ENTER_APP_ID&next=ENTER_PAGE_TAB_URL

Make sure to replace ENTER_APP_ID and ENTER_PAGE_TAB_URL with your variables. Hit enter, and then choose the page you wish to install your new App to.

Now, go back to your Facebook Business Page. You will now see the new Page Tab button, and the name you chose below it. As of right now, it shows the default Facebook App icon. To change this, click on the triangle to the right of your page tabs, then hover over the new tab and click the pencil to pull up the options. Click Edit Settings. When the new window appears, click on Custom Tab Image and follow the steps.

Test your new Page by clicking on the Page Tab. The content you have posted to your server will now be displayed within Facebook.

This is a simple implementation of a Facebook Page Tab. Page Tabs can be enhanced to perform many advanced functions. The most popular is a like-gate, where you hide content, such as coupons or promo codes, from visitors until they Like your page. Hopefully a future blog post will cover this, but for the time being, I think getting this far using the new Timeline layout for Facebook Business Pages is a huge accomplishment.

To see an example of a working like-gate experience, head on over to our current promotion on Facebook (promotion has expired). This is using the same method we just outlined, with the added like-gate code (wherein we hide the entry form from the visitor until they like our page). While you’re there, like us so you can be entered to win a Professional Logo Design Package, valued at over $350!

This has been today’s Clarified Butter.