You can hide tabs from appearing in the list on the left of your Facebook page. You might want to hide an application that you don’t use, such as Events or Photos or you may be working on a custom tab that you don’t want to be publicly available (of course, you do need to unhide it to work on it yourself.)

And, this is easy to do. The instructions are below.

Instructions

1. From your Facebook page, click on the Edit page button.
2. Click on Apps in the navigation list on the left.
   
3. In the list of apps, click on the Edit Settings link below the tab you want to hide. In the pop-up box, click on the remove link next to Added.
   

4. Click on the View Page button and check the list of tabs in the left side navigation. You will set that the app you removed it no longer listed – or you won’t see it ;-)
5. Keep in mind that this doesn’t remove the application from your page or remove any of the work that you’ve done. Instead, it just keeps that tab from being displayed.

Is this useful? Do you hide any of your tabs? If so, why do you hide them?

photo credit: asurroca

Post from: (Anti) Social Development

How to Hide a Facebook Tab from Being Displayed on Your Facebook Page

Facebook has changed the interface and some of the fields for creating new iframe applications. Here are the updated instructions.

Since last week, there has been a lot of excitement over the changes to Facebook fan pages and how this will effect custom tabs. I am not writing about all of the changes as that has been covered elsewhere – an excellent article is Everything You Need To Know About Facebook’s Epic Upgrade To Pages by John Haydon.

One piece of news is that FBML is being deprecated and after March 11, 2011 it will no longer be possible to add the Static FBML application to pages. Static FBML is what many of us have used to create custom Facebook tabs. Existing tabs will continue to work and it will be possible to edit them but new pages and tabs will not be able to use this application. I don’t know how long Static FBML will work before Facebook takes it away completely.

Instead new custom Facebook tabs will need to be created with Iframes. Current tabs don’t have to be transitioned before March 11th but you should do so at some point over the next couple of months.

How do we do this? Well, I spent some time figuring this out and here are the instructions.

Custom Facebook Tab with Iframes

1. Make a html, php or other type of web page and upload it to your web server. Instead of the code going directly into the Static FBML application the iframe application will be pulling the page you made to Facebook. This page will still need to fit within the Facebook size limit of 520px wide.
2. Go to the Facebook Developers site.
3. Create a new app by clicking on the ‘Set Up New App’ button.

   

4. Give the app a name. I recommend naming it what you want the name of the tab to be. Agree to the Terms of Service and click on the ‘Create App’ button.
   
5. Now for the fun part – the security check with the unreadable captcha. (I despise captchas but I guess that’s a topic for another day.)
6. You will now be on the About Tab for the new application.
7. 
   Give the application a description. You can also upload an icon and a logo. I recommend at least using the icon because in the list of tabs on your page, your icon will appear rather than the iframe or static fbml icon. This is all we *have* to fill in on the About Tab.
8. The next tab we fill out is SUPER important. This is Facebook Integtration.
   
9. Canvas URL – fill out the directory where the file you uploaded is located. This DOES NOT include the name of the file. The URL must have a trailing slash. In my exampleit is http://kimwoodbridge.com/facebook2/
10. Canvas Type – select, you guessed it, iframe.
11. Iframe size – select auto-resize unless you want ugly scrollbars. Removing the scrollbars completely requires additional steps, which I will be discussing next week.
12. Tab Name – this is what you want the tab to be called, such as Welcome, About, Contest, etc. The first time I tested this my tab name was ignored and the name of the Application was used, which is why I recommended naming the application what you want the tab to be called. I’m not sure why this happened or if I did something wrong the first time so if someone can clarify this, please let me know.
13. Tab URL – this is the name of the file you uploaded. In my example it is index.html
14. Click on Save Changes.
15. You will now be on the screen with information about your new application. You do not need to submit it to the directory. Actually, you probably don’t want to do this because than anyone could add you custom iframe tab to their page – I don’t know why anyone would want to do this but you just never know.
    
16. Click on the link on the right of the application information page that says ‘Application Profile Page’.
17. You now need to add the application you created to your page. This is like adding any Facebook application, such as Static FBML. Click on the link on the left under the profile image that says ‘Add to My Page’. If you are an admin for multiple pages, you will need to select the correct page to add the new iframe page application to.
    
18. Go to your page and you will see the new tab in the list under the page photo and, if you uploaded your own icon, you will see that next to the name of the new iframe page tab.
    
    Click More> Edit at the bottom of the list and you can move the tab higher up the list but it can’t go higher than Wall and Info.
    
19. You can make this the default landing tab by going to Edit Page > Manage Permissions.

Negatives

1. You will have to make one of these for every custom tab that you want to make – if a page is going to have three custom tabs you will need to make three iframe apps for it.
2. It is my understanding that if you are not logged into Facebook, you will not be able to see a custom tab created with iframes. This is not good for google searches that were locating our custom Facebook tabs. If I am wrong about this, please let me know.
3. I have not yet figured out how to use code similar to visible to connection that is used to hide content from people who haven’t liked the page.

Benefits

1. More code flexibility – pretty much anything that will work on a html page will work on your iframe tab. For example, you can see that I added javascript to mine that shows my last twitter tweet. You can also add a video with the embed code and don’t have to use the fbml code for video. Other scripts and widgets will work too.
2. You can add your Google analytics tracking code just like you would to any web page!
3. You could make different pages in advance and quickly swap them out by simply changing the Tab URL in the application settings.
4. Other? – You tell me.

You can visit the iframe tab I made here. I made a couple of changes to the content but I do need to update the video and make other changes.

If you would like assistance creating iframe tabs or transitioning your current tabs to iframes, please contact me for rates and to get added to my schedule.

photo credit: TooFarNorth

Post from: (Anti) Social Development

How to Make a Custom Facebook Page Tab With Iframes

Since it is almost 2011, people are asking me to change the copyright date at the bottom of their WordPress blog.

You can, however, do this automatically by using a piece of code that displays the current year. Once this is added to your template, you don’t need to manually update it again.

This will display the current year.

<?php echo date(“Y”); ?>

At the bottom of this site, I have the following.

Copyright © 2008 – 2010 (Anti) Social Development All rights reserved

The following code is used.

Copyright © 2008 – <?php echo date(“Y”); ?> <?php bloginfo(‘name’); ?> All rights reserved

This is copyright, the code for the copyright symbol, the year I started the site, the current year, the name of the site, and All rights reserved.

If you add that little piece of code to your template – this is usually the footer file – you don’t have to worry about changing the date manually again.

photo credit: Horia Varlan

Post from: (Anti) Social Development

How to Update the Copyright Date on your WordPress Blog Automatically

I am frequently asked how to make a custom Facebook tab the default landing tab and realized that I haven’t written this up before. And, the location to do this has recently changed, so if I had written an article before, it would need to be revised. You do know that when writing about Facebook, it really should be done in pencil. ;-)

Set the Default Landing Tab

1. From the fan page for to Edit Page
   
2. Go to Manage Permissions
   
3. Under the Default Landing Tab dropdown box, set the tab that you would like to be the default tab.
   

Keep in mind that the default landing tab is only for new visitors to your page. Once someone likes the page and becomes a fan, they will be taken straight to the wall. This can not be changed.

Also as the Admin of the page you will be taken straight to the wall as well. If you want to test that a new visitor is going to the default tab, log out of Facebook and visit your page.

That’s all there is to it. The way it works hasn’t changed but Facebook has moved the settings around.

photo credit: TrombaMarina

Post from: (Anti) Social Development

How to Make Your Custom Facebook Page the Default Landing Tab

WP-Cycle is a WordPress image slideshow plugin that uses jQuery. It can link to any post, page or a URL outside of the site. It can be set to any size and has a number of other useful settings. I’ve used this plugin on a number of sites and really like it for it’s ease of use. It does, however, have the limitation of single use and all images added in the settings have to be used.

Installing and Using

1. Install and activate the plugin.
2. Go to Media > WP-Cycle

   

3. On the settings page you can upload images, set the transition effects, set the length of time the image appears, and set the size of the slideshow.
4. Once an image is uploaded, you can set the link for the image.
   
5. Please note that if the image is smaller than the size set for it in the settings, you will get an error message.
   
   If the image is larger than the size set for the slideshow, you won’t get the error. The plugin will scale the image down.
6. Add <?php wp_cycle(); ?> to your theme where you want the slideshow to appear.

As I mentioned earlier this plugin only allows for one slideshow and all images added will be used. The image will also be displayed in the order that they are uploaded.

Have you used this plugin or a theme that uses this plugin? Do you like it? Do you find it too limited? I like it’s because it’s easy for the end-user to use, it’s not tied to specific posts or pages and it can link to anything.

photo credit: Amsterdamize

Post from: (Anti) Social Development

WordPress Image Slideshow Plugin: WP-Cycle

My most popular article, by far, is How to Add a Custom Tab to a Facebook Fan Page. And one of the questions related to that article that I get asked the most frequently is, “how do I add content to the custom tab?”

The short answer is in order to add content to a custom tab created with FBML, you have to use HTML. If you don’t know any HTML, there isn’t much you can do with the tab.

HTML isn’t something that I teach so I often refer people to the HTML guide at w3schools. Of course, learning HTML just to make a custom tab for Facebook may be more than people want to do.

The simplest thing to do is make an image that links back to your website. Make sure that it isn’t more that 520px wide because of Facebook’s size limitations. And you have to host the image on your web server or an image hosting service – it can’t be uploaded to Facebook. Then you only need two bits of HTML; the code for an image and the code for a link.

image code: <img src=”http://yourdomain.com/image.jpg” />

link code: <a href=”http://yourdomain.com”>image</a>

Put it together:

<a href=”http://yourdomain.com”><img src=”http://yourdomain.com/image.jpg” /></a>

If you want to keep the link from putting an ugly border around your image, add border=”0″ to the image code.

<a href=”http://yourdomain.com”>
<img src=”http://yourdomain.com/image.jpg” border=”0″ />
</a>

This is the easiest way to add content to your Facebook tab without knowing HTML. You can make a fancier layout with additional code but this should be enough to get most people started. And if you really want to learn HTML, the guide I linked to a the beginning of the article should help. Another useful technique is to view the source code of any web page you are viewing. (that’s how I first learned waaaaay back ;-) In Firefox you can do this by going to View > Source.

If you would like to hire me to assist with your custom Facebook tab, please use my contact form.

Post from: (Anti) Social Development

How to Add Content to Your Custom Facebook Tab

Almost a year ago I wrote about how a simple gallery could be added to a post or page using the WordPress Gallery Shortcode. At the time I found out about it because include and exclude were going to be added to later releases. It is now part of the shortcode.

Last week I used the gallery shortcode for the Halloweeen themes post but I didn’t want to use all of the images in the gallery – the photo of the cupcakes is in the gallery associated with that post but I wanted to exclude it because it isn’t an image of a theme.

Using include or exclude looks like the following

[gallery exclude=”21,32,43″]

You can not use include and exclude in the same shortcode – it has to be one of the other. The numbers being exclude are the attachment ID’s for each image that you don’t want to display. When I looked in the gallery, however, for that post I didn’t see any attachment ID’s.

It turns out that you have to get the attachment ID from the media library.

1. Go to Media > Library
2. Click on the title of the image that you want to exclude.
3. The attachment ID will be in the URL in your browser’s address bar. For example, the image include in this post has the URL
   http://www.kimwoodbridge.com/wp-admin/media.php?attachment_id=9633&action=edit The attachment id is 9633.

I typically add images through upload/insert when writing a post and not through the media library. It would be helpful if the attachment id was included in both locations. At any rate, this feature makes the simple image gallery included with WordPress a lot more useful.

photo credit: Schristia

Post from: (Anti) Social Development

How to Include and Exclude Images with the WordPress Gallery Shortcode

It isn’t exactly easy to integrate a website’s contact with Facebook but many people want to collect customer or visitor data via a contact form.

Fortunately, Response-o-matic has created an online tool that makes form creation and integration a snap. Here I will show you how to do this.

About

Response-o-matic has free and paid versions. The free version will allow you to create one form and doesn’t include too many extras. The free version also contains an ad. You may want to use the paid version if you have an issue with that. All accounts, however, have the form data stored on their server and is stored on their servers for 6 months. You will receive an email with each form submission but if you want to export the data to a csv file to import into a spreadsheet or database, you will have to upgrade to one of the paid versions.

What To Do

1. Create an account
2. You will be sent a confirmation email. Click on the link in the email to confirm the account.
3. You will immediately be taken to the form builder page.
   
4. Start creating the fields you want to include in your form. The form starts you with name and email, which you can keep, delete or move to a new location in the form.
5. Creating new fields is done on a question/answer model. For example, to create a new field click on the Ask a Question button and then select a question type. By question types they mean a text field, check boxes, radio buttons, etc.
   
   In this example, I will create a drop down box for favorite types of videogames.

6. Set whether the field is required and save. Continue until you have created all of the fields that you want. You can always edit the form later, if you want to add or remove a field.
7. Click the Save and Continue to Step 2 button.
8. In Step 2 you can set the Form Options. You can have a page that the user returns to after filling out the form. This can be back to the facebook wall, your website, or a thank you page that you have made on your server. A thank you page would probably be best but in this example I’m going to direct the users to my website.
9. You can also set whether you want to receive an email when there is a new form submission.
   
10. Click the Save and Continue to Step 3 button.
11. On the next page you will have the block of code for your form that you can add to a custom tab on Facebook or to your website.
12. You can see a quick example on the demo tab of my Facebook fan page.
13. Of course, you will want to style the form to match the design on your custom fan page tab.
14. Logging into your Response-o-matic account will show you the form submissions.

Do you think this is useful? I like the idea and it is easy to use but there do seem to be limits to the free version. For example, I would prefer to not have ads and I would like to export the user data. And if someone has a need for managing a lot of user data they are probably already using something like Aweber or Constant Contact, which already provides html code for forms that can be used on a custom Facebook fan page. If you wanted to add a quick and easy contact form, and didn’t mind dealing with the data manually and the ads this solution would just fine.

If you would like to hire me to assist in creating a contact form and styling it, please contact me.

photo credit: NASA Goddard Photo and Video

Post from: (Anti) Social Development

How to Create a Simple Contact Form for a Facebook Fan Page

I work with the Thesis theme for WordPress quite a bit but I don’t think I’ve written about it before. It took me a bit to figure out how to add a post to static front page so I decided I would document what I learned.

My client wanted a static front page and then for the blog to be on a different page. No problem there – that’s managed by a WordPress setting under Settings > Reading. But she also wanted the most recent blog post on this same static page.

When working with other themes I would create a custom page template and assign that to the page that is the static front page. The custom template would be very similar to the page template but also contain a custom query to pull the most recent post and other custom elements.

This, however, is different in Thesis and I haven’t quite figured out how to do it. With Thesis, it’s easier to write a function and use an action hook. Often, you can find a function that already does what you need and don’t need to write one of your own. I could not locate an appropriate example but it’s also possible I wasn’t searching correctly – I was a little tired while working on this. I think I was also being a little lazy because I knew the code already. Anyway …

The Function and Hook

1. Add the following to the custom functions file under Thesis > Custom File Editor in the WordPress Admin.
   

   function custom_homepage() {
   if (is_page(‘about’))

   { ?>

   <?php query_posts(‘showposts=1′); ?>
   <?php while (have_posts()) : the_post(); ?>

   <div class=”post_box”>
   <h1><a href=”<?php the_permalink(); ?>”>
   <?php the_title(); ?>
   </a> </h1><br />
   <div class=”format_text”><?php the_excerpt(); ?></div>

   </div>

   <?php endwhile; ?>

   <?php wp_reset_query(); ?>

   <?php }
   }
   add_action(‘thesis_hook_after_content’, ‘custom_homepage’);

2. Change if (is_page(‘about’)) to the name of the page you set as your static front page. In this example the front page is called ‘about’.
3. query_posts is pulling 1 post to this page. You can set this to a different number. You can also set it to only pull posts from a particular category by adding category_name. Here is an example of a query that pulls posts from the wordpress category and shows the last five posts.
   

   query_posts(‘category_name=wordpress&showposts=5′)

4. This example has the post title, which is linked, and the excerpt. Changing
   

   php the_excerpt();

   to

   php the_content();

   will give you the full post.

5. div class=”format_text” is the class used by Thesis to style the content of the posts, which is why it is included in the function. If you wanted to style the post differently, you would add a new class to the custom style sheet under Thesis > Custom File Editor.
6. wp_reset_query clears the query so you don’t get odd results on the rest of your page. It’s hard to explain what might happen but if you saw it, you would know there was a problem. For example, you might have the post you are pulling, a duplicate of it and none of the content that is supposed to be on the static page.
7. add_action(‘thesis_hook_after_content’, ‘custom_homepage’); – this adds the hook that will display your function in the appropriate location. thesis_hook_after_content is saying to place the function after the static content on the front page. You could also use thesis_hook_before_content, if you wanted it to come before the static content. A list of Thesis hooks is available on their website.

If you use Thesis, I hope you found this useful and I hope you were excited as I was about my first Thesis post;-)

Note: the link to Thesis themes at the top of the article is an affiliate link.

photo credit: denn

Post from: (Anti) Social Development

How to Include a Post on a WordPress Static Front Page with the Thesis Theme

The first burning question here is what the heck is a taxonomy.

Simply, it’s a way to group things together. You are probably familiar with this with your music collection – it can be grouped by genre, artist, release year, etc. You may also remember taxonomies in Biology class when you learned about Linneaus and his classification of plants, animals and minerals.

In WordPress, a taxonomy is a way to group together types of posts.

You are already using three taxonomies that are built into WordPress – categories, tags and link category. Custom taxonomies have been available since 2.3 but haven’t really been practically used since versions 2.9

In the following example, I will be creating custom taxonomies for a video game collection.

The Function

First you need to add a function to your functions.php file to make custom taxonomies available. As always, back up your functions file before making any changes to it. You will also be defining your taxonomies so this would be a good time to make a list of what the taxonomies for your topic would be. For video games, I have condition, developer, genre, release date, operating system and date played. I’m not using title because the title is used in the title field of the blog post. Other possibilities could be publisher, rating, etc.

add_action( ‘init’, ‘create_pc_db_taxonomies’, 0 );
function create_pc_db_taxonomies() {

register_taxonomy( ‘condition’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Condition’, ‘series’), ‘query_var’ => ‘condition’, ‘rewrite’ => array( ‘slug’ => ‘condition’ ) ) );

register_taxonomy( ‘developer’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Developer’, ‘series’), ‘query_var’ => ‘developer’, ‘rewrite’ => array( ‘slug’ => ‘developer’ ) ) );

register_taxonomy( ‘genre’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Genres’, ‘series’), ‘query_var’ => ‘genre’, ‘rewrite’ => array( ‘slug’ => ‘genres’ ) ) );

register_taxonomy( ‘release’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Release Date’, ‘series’), ‘query_var’ => ‘release’, ‘rewrite’ => array( ‘slug’ => ‘release’ ) ) );

register_taxonomy( ‘os’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Operating System’, ‘series’), ‘query_var’ => ‘os’, ‘rewrite’ => array( ‘slug’ => ‘os’ ) ) );

register_taxonomy( ‘dateplayed’, ‘post’, array( ‘hierarchical’ => false, ‘label’ => __(‘Date Played’, ‘series’), ‘query_var’ => ‘dateplayed’, ‘rewrite’ => array( ‘slug’ => ‘dateplayed’ ) ) );

}

You can register as many taxonomies as you want to use for your subject. You can see that the taxonomy is placed in four different places when it is registered; the actual taxonomy, the label for it, the variable used in queries, and what the slug (what shows up in a url).

Edit Post Screen

After the function and register taxonomies are added, you will have new fields on your Edit Post screen that looks just like the section for Post Tags and are listed below that section.

You will fill in the fields just like you do for tags. In my example, I’ve listed the physical condition of the game as very good and the developer as Psygnosis.

How to Display

So, now we are like great – I have this new data but they don’t show up anywhere. What am I supposed to do with this? You will need to add the following code to the template file where you want the taxonomies to be displayed. In my example, each game is a post so I want the taxonomies to be displayed on the single post page, which is single.php. Again, backup of the file before editing it. Add the following for each taxonomy that you want on the single post page and make sure this code is within the loop. I’ve set mine up to display next to the thumbnail of the video game box, which is above the rest of the content about the game.

<?php echo get_the_term_list( $post->ID, ‘condition’, ‘Condition: ‘, ‘, ‘, ” ); ?>

<?php echo get_the_term_list( $post->ID, ‘developer’, ‘Developer: ‘, ‘, ‘, ” ); ?>

<?php echo get_the_term_list( $post->ID, ‘genre’, ‘Genre: ‘, ‘, ‘, ” ); ?>

<?php echo get_the_term_list( $post->ID, ‘release’, ‘Release Date: ‘, ‘, ‘, ” ); ?>

<?php echo get_the_term_list( $post->ID, ‘os’, ‘Operating System: ‘, ‘, ‘, ” ); ?>

<?php echo get_the_term_list( $post->ID, ‘dateplayed’, ‘Date Played: ‘, ‘, ‘, ” ); ?>

get_the_term_list has 5 parameters and the first two are required. They are ID, taxomony, before, separator, after. There is more information about this in the codex.

Displayed next to the thumbnail the taxonomies look like the following.

The End

If you notice from the screenshot, the taxonomies are links. If you click on them, you will be taken to an archives page that contains all of the posts that fall within that taxonomy. For example, clicking on the genre, adventure, will take you to a list of all adventure games. Custom archives can be made so they don’t look like the default archives, but that will be a post for another day.

So, that’s how custom taxonomies are added to a WordPress theme. Can you think of any subjects, other than videogames, that you would use this sort of post classification system for?

photo credit: denn

Post from: (Anti) Social Development

How to Add Custom Taxonomies to Your WordPress Theme