Capturing Your Market » Social Media

2 minutes to a more beautiful business Facebook page

Bethany Gilbert — Wed, 27 Apr 2011 08:00:04 +0000

Your Facebook page might be ugly. It is probably littered with random links with seemingly unrelated thumbnails. You can and should fix it. It only takes 2 minutes so keep reading to take the ugly out of your Facebook page.

Why I use custom Facebook link thumbnails

When you post a blog post link to Facebook you are usually presented with several options for the link thumbnail. These include the images from your blog post as well as your logo and other images on the page. Usually this works fine but sometimes the images are just not suited for use as a thumbnail.

For instance, I format my blog images so that two vertical images are side by side. I do this in Photoshop so the images I upload are either full horizontal images or a composite of two vertical images.

This works out great for my blog but makes for small link thumbnails when I post the link to Facebook.

A while back I published a post about how to customize your Facebook link thumbnails. The problem with this method is that you are limited to one specific thumbnail for every post on your site.

I have a new method. We are going to use WordPress’ built in featured image tool to customize our business Facebook page by taking control of our link thumbnails.

Note: This will only work if your blog theme supports featured images.

Creating your Facebook Link Thumbnail Image

You will first need to choose the image to use for your thumbnail.

As it turns out, all Facebook link thumbnails are not created equal.

Facebook has limited the thumbnail space to 90px X 90px. All vertical or horizontal images will be reduced to 90px at their longest point. Meaning that your image will use less than the space allotted for your link thumbnail.

In order to optimize your image, you will want to crop it to a square ratio before uploading. The size doesn’t really matter, as long as it is over 90px X 90px.

Be sure to use an image that will still look good at such a small size. You will also want to be sure that it is a good representation of the post.

The image won’t show up anywhere else so you don’t have to use one of the images you have already posted. I think it is fun to use a detail shot from the shoot/wedding to give a feel for the style of the photos.

When inside the post editor, choose set featured image from the featured image module in the post editor sidebar.

The uploading tool will open just as it would for uploading an image to insert in your post. Follow the prompts to upload your image.

Once the image has been uploaded, you will need to look under the sizing options and choose Use as featured image.

Click save all changes and be sure to update the post or publish if it isn’t already published.

Tell Facebook where to look

Now that your featured image is set you will need to tell Facebook that it should use it for your thumbnails.

In your WordPress menu, go to Appearance -> Editor. In the right side you will see a list of the various pages and parts of your WordPress theme. Click on the Header file to open it for editing.

Between the <head>...</head> tags copy and paste the following code.

 if(is_single()) { ?>

 
// Featured Image for FB Like
$feature_image = get_the_post_thumbnail($post->ID);
 
// Get image source
$doc = new DOMDocument();
$doc->loadHTML($feature_image);
$imageTags = $doc->getElementsByTagName('img');
 
foreach($imageTags as $tag) {
        $image_url = $tag->getAttribute('src');
    }
?>
 echo $image_url; ?>" />
 } ?>

Click Update File to save your changes.

Test your new Facebook Link Image

Now you can go to Facebook and post the link to your blog post using your newly customized link thumbnail. Bring on the pretty!

Extra Credit: Add a call to action text layer to your link image in Photoshop. Tell your users to “Click Here”. It just might get you a few more clicks.

Want more help with Facebook? Check out my guest post over at Zach Prez’s Photography Web Marketing on optimizing the new Facebook layout for your business. Check out Zach’s Photography Web Marketing Guide for more help with online marketing.

How to get more Facebook Fans (2.0)

Bethany Gilbert — Sat, 23 Apr 2011 14:27:43 +0000

Telling visitors what to do through calls to action is the single best way to get them to interact with your site. This may mean signing up for an email newsletter, contacting you for pricing/availability information or just leaving a comment on a blog post.

This same technique can be used to get more Facebook fans (likes) for your business.

Do you have a Facebook landing page?

When someone comes to your Facebook page what do they see? Are they presented with a page of random posts about new photos, a conference you recently attended, or how great Jasmine Star’s latest workshop was?

By controlling their first view of your page, you can give them a more favorable and branded view of your business.

This is accomplished through a landing page. A landing page is a page of a website (or Facebook) that is created for the sole purpose of getting a visitor to do something. In this case, we want them to click that Like button so that you can reach them later on through the content you post on your page (which will then wind up in their feed). If they visit your page and don’t click like, then you have lost them forever.

How to create your Facebook page welcome tab

Previously, I showed you how to create a landing page using Facebook’s programming language – FBML. On March 11, 2011 Facebook removed FBML from the options for pages. If you already have a landing page created using FBML it will continue to work. New landing pages, however, cannot use FMBL.

As a replacement, Facebook is finally allowing iFrame tabs for pages. Personally, I am stoked. iFrames allow you to basically “import” a webpage from anywhere. You can do essentially anything with iFrames that you could do on your own site. For code-nuts such as myself, this is an awesome thing. For everyone else, it can seem a little intimidating.

Not to worry! There’s an app for that. (Ugg, I couldn’t resist).

The Static Html: Iframe Tabs Facebook App

Soon after Facebook rolled out these changes, a new app emerged on the scene. The Static Html: Iframe Tabs App makes it incredibly easy to add a welcome page to your Facebook business page.

To begin, go to your search bar in Facebook and search for iframe tab – look for the star thumbnail. Go to the page and look in the bottom of the left hand column. Choose Add to My Page and choose the appropriate Facebook page from your list of pages.

Now, go to your page and look in your menu. (Under the profile picture). Click on the Welcome tab with the star icon. You will be taken to the editor.

The top box is where you will enter the information for your non-fans landing page. This means that anyone who comes to your page that hasn’t already clicked “like” will see this page. You should focus your efforts on getting them to do so. Do not dilute the power of this page by linking to your site or trying to get them to take any other action.

The bottom box is the page people will see after they have liked your page. This is a great place to provide them with other options for getting to know your business. Links to your website, photo slideshows, etc can be posted here.

For a simple solution, create an image in Photoshop (or other editor) to use for each page. Upload it to your server or photobucket (use the “html” linking option) and display it on the page. Use this code for a server-uploaded image:

If you are a little more comfortable with html, you can add links and anything else you can come up with to your landing pages.

When you are finished click Save and View Tab to check out your new landing pages.

That’s it! The iframe app definitely makes it easier to add Facebook landing pages to your business pages which can result in more Facebook fans.

Extra Credit: To get more bang for your buck create an incentive for them to click your like button. Tell them that they will get a free wedding planning booklet or a discount for portraits. Give them the booklet download or discount instructions on the second page.

Please post a link to your Facebook page so we can see your landing pages.

Are your Facebook links sexy?

Bethany Gilbert — Wed, 10 Mar 2010 21:49:08 +0000

This technique creates a single Facebook thumbnail for every link on your site. Check out the updated technique that allows custom Facebook thumbnails for individual posts

On the CYM Facebook page you may have noticed that our links are just a little sexier than they used to be. By creating a fun little image and telling Facebook where to look, we can control which thumbnail is used with all of our links. This, hopefully, will increase your click-through rate and help your links get a little more attention.

Sound techie? It is, a little. Just follow these 4 simple steps to take control of your thumbnails!

Customizing your Facebook link thumbnails

Our Facebook Link Thumbnail

Create the Image Create an image no more than 200 pixels wide. I have found that tall (portrait) images work better as FB thumbnails than wide (horizontal) images. Facebook has a width limit so they will shrink a horizontal image down to the point where it is not really useful.
I suggest creating an image that is related to the linked page but also draws the attention of the viewer. Your link has to stand out from all of the other links and updates in the reader’s Facebook feed.
Upload the Image Now, simply upload the image to your FTP server or to an image hosting site such as www.photobucket.com.
Add the Code The code will need to be inserted in the code for your webpage in between the … tags. In WordPress, go to Appearance/Editor/Header. Look for your meta title and description tags. They will look like this:
```
<meta name="title" content="Your Blog Title" />
<meta name="description" content="Your Blog Description" />
```
Before the closing head tag () copy and paste the following code, customized with your domain and image location (or the image’s html link from photobucket). Be sure not to delete those ” ” marks before and after the link.
```
<link rel="image_src" href="http://www.mydomain.com/thisismyimage.jpg" />
```
After you have made these changes, save your html file and re-upload it to your server.

(If you work with Bludomain or another website service you may be able to email them this image and the html code and ask them to put it in the page for you)
Test it out! Yay! You did it! … Maybe. Go to Facebook and post a link to the page you just edited to see if you were successful. If not, come back here and post a comment and we will help you through it.

As long as Facebook is correctly pulling the right thumbnail images from your blog posts you may not want to implement this on your blog. It is good to have session-specific thumbnails as far as that goes. A great application here would be your main website. If your site is HTML you can even set a different thumbnail for each page of your site!

What other ways have your found to increase your Facebook link clickthrough rate?

How to Get More Facebook Fans

Bethany Gilbert — Tue, 02 Feb 2010 21:27:06 +0000

In early 2011 Facebook removed FBML as an option for all pages. FBML has been replaced by IFRAME pages. See this post for how to create custom iFrame Facebook welcome tabs.

Research shows that there are two ways to increase response to any online marketing endeavor. Creating a solid landing page, or a special page related to your offer or promotion that contains clear calls to action, can entice visitors to respond favorably.

Did you know that you can apply this same technique to increase your Facebook fans?

By controlling what new visitors (non-fans) see when they visit your fan page for the first time, you can persuade them to “Become A Fan” instead of simply viewing your page and moving on. This will then, of course, allow you to reach them with updates, special offers and so on.

A Facebook application called Static FBML allows us to add HTML webpages to our fan pages. Then, by simply changing a few settings, you can direct new visitors (non-fans) to your sparkly new landing page, and entice them to become a fan of your business.

So, lets get started!

Step 1. Customize your Landing Page

This is the fun part! Use Photoshop, Illustrator or another graphics program to create your landing page image. This is simply a PNG or JPG image that will serve as your landing page. Remember to include a clear Call to Action near the top of your image to entice visitors to click your “LIKE” button. The power of your landing page depends almost entirely on this Call to Action so don’t leave it out!

Be sure to tell your visitor why they should like your business. Do you offer fan-only discounts? Do fans get updates on new blog posts, your latest work or your latest pricing changes? All of this is potentially important to a non-fan and would entice them to go ahead and click that little “LIKE” button at the top of their screen.

Your final image should be no wider than 520 pixels (the limit used to be 760 pixels, then 540 pixels but was changed by FB again August 2010) and should be saved in a web-format such as PNG or JPG. Use the “Save for Web” option in either Adobe program to create the smallest file size possible without losing too much quality.

Upload your final image to your website server and make a note of its location. Ex. http://yourdomain.com/image.png

Notes:

1. You may realize that we will not be adding any external links to this landing page. The primary purpose of this page is to get the visitor to “LIKE” your page. Adding links to the page could potentially send them away before they click your “LIKE” button.

2. Photobucket is an optional hosting tool but the quality of your landing page image will be decreased.

3. You can create a completely HTML page without the use of images but we are going the “photographer-friendly” route for this tutorial.

Step 2. Add the Static FBML Application

If you do not already have a Fan Page for your business this is your obvious first step. Facebook provides a great tutorial.

In order to create a custom landing page inside of your Facebook page, you must first install a Facebook Application called Static FBML. This application will allow you to add HTML to your page.

First, go directly to the Static FBML Facebook Page or enter “Static FBML” into the Facebook search box. From there – click the “Add to My Page” link found directly under the Static FBML logo in the left column. There is no need to “LIKE” the application, adding it to your page is all that is necessary. Once you click the link, a new window will open containing a list of all of your pages. Simply click the “Add to Page” link next to the desired page.

Step 3. Bring Them Together

Now, go to your fan page on Facebook and click the “Edit Page” link directly under your profile image.

Find the FBML application and click “Edit”.

Change the Box Title to something relevant for your landing page title. This will show up in your Fan Page tabs so keep it short and sweet. “Welcome” is a common option.

Now, put on your geek hat and enter the following html code into the main box:

Replace “yourdomain.com” with the correct website address and “image.png” with your image filename.

Click “Save Changes”

Step 4. Point Them In The Right Direction

Now that your landing page is set up all we have left to do is to add the tab to your fan page and to tell Facebook to send all “non-fans” to your new page.

From the FBML application, click the “(edit)” link found to the right of your fan page title near the top of the page. (You can also return to your Fan page and click “Edit Page” under the profile image.)

Scroll back down to the FBML application. Make note that it’s title will have changed to reflect the “Box Title” you entered in the previous step. Click “Application Settings”.

Under the “Profile” tab click “remove” next to “Box:” and click “add” next to “Tab:”. You will basically be reversing the default settings. Click “Okay”.

(This step may become obsolete in the future as Facebook is discussing removing the “Box” feature from their system)

Scroll back up to the top of the page and find “Wall Settings”. Click “Edit”.

Under “Default Landing Tab for Everyone Else” select your newly created tab. (Hint: The name will be the same as the “Box Title” you entered earlier.)

Return to your page and click on your newly created tab. That’s it! You should see your facebook fan numbers start to increase.

Now that you know how to add new tabs to your fan page you can really get creative with the information that you include on your page. How about a new tab for pricing, contact information, or an image gallery? With a little bit of HTML knowledge the options are endless!

After you create your new landing page post the link here so we can check out your work!