Creating A Landing Page For Your Podcast’s Facebook Page (Facebook For Podcaster Part 3)

In last week’s post we addressed creating a landing page on your podcast’s Facebook Page and as promised here is a little tutorial to help you create said Facebook Landing Page if you so choose.

Landing Page Content and Size Guidelines

Before we address anything within Facebook itself you have to get your ingredients ready for the recipe 🙂 Getting your content ready before doing anything else in Facebook is very helpful and effective. If you prepare, you won’t have to be running around looking for stuff and get stuck in the middle of your project.
You are going to need to have access to an HTML editor, an image editor, and somewhere to post your media online (including images), whether it be YouTube for videos, Flickr for photos or libsyn.
When I mention an HTML editor it could be as easily as editing/writing everything in your blog and then copying the HTML. I personally use a free Mac App called Notational Velocity Alt. I write in Markdown within the app and when I preview my text, it gives me the HTML.
Sizes:

  • The entire landing page layout is limited to 520px wide and 800px high.
  • The most effective landing page layout would be 520px wide and 560px/600px high, that way when folks land on the page they don’t scroll down anywhere (everything is above the fold) and all the content is right there, although Facebook does have the capability of scrolling down the page.

Layout:

  • Having the text/image right at the top of the page in a banner style with arrows pointing up for a call to action makes it clear you want folks to “Like” the page.
  • Having your media (audio or video) or any other fun branding image would be best right below the text.

Of course these are simple guidelines, you can end up doing what you want 🙂 The banner used in the example is 520px by 240px The image is 520px by 320px

Content for your landing page.

Get your Landing Page text content all figured out. Here are some ideas:

  • About your podcast (one or two sentences). You can refer to this blog post for the best About Page.
  • Expectations for your page (direct access to your podcast, community events, special info regarding your niche, a place to build community via feedback, pictures, videos)
This can be done in a very simple way. Less is more! The most important thing is to get folks to LIKE your page 😉 Go ahead and create your page layout, include whatever you have come up with, get all the HTML and simply paste the code onto the simple text editor of your choice. Following you will se an example of what I chose to do with my first attempt at a landing page.
Landing Page Example
 
wpid412-media_1310434605815.png
This is an example of what I came up with the first time around for my own podcast page. The quick and dirty landing page is simply two images one on top of each other.
1. Is a simple text image that I edited in Pixelmator and then uploaded to my WP website. I got the HTML code for the image.
2. Was an existing image that I had. I found a Facebook Like graphic and laid it on top via Pixelmator. I uploaded the image to my WP website. I got the HTML code for the image. Once I got the HTML code for both of those images, I simply pasted it to my text editor and kept it handy for when I needed it.

Content Landing Page Ideas For Existing Fans

This is absolutely optional, BUT great tool for podcasters. Next week I’ll be giving you a detailed tutorial incorporating the Wizzard Player to play your latest episode for your existing fans.
Below are some ideas to mull over. You can use this Fan Landing Page as a call to action to:

  • Have your listeners leave an iTunes review
  • Subscribe to your newsletter
  • Announce special news or meetups for your community
  • Offer inside information that only your fans can get
  • Run a special FB promotion or work with advertisers/sponsors

As you can see so much is possible and you can change this as often as you like! As in the landing page for your non-fans, get your text or whatever other media you want to showcase all set up before you get into Facebook.

 

Landing Page For Existing Fans Example (totally optional and not necessary at all!)

wpid413-media_1310435323648.png
As you can see from the image above, I used the Fans Landing page as an opportunity to share news about my pregnancy as well as begin the process of marketing an online teacher training that I’m going to be a part of.
1. The top part is all text. I edited the whole thing in an HTML editor, nothing fancy. Facebook automatically fits your text to fit within their boundaries.
2. I used the Wizzard Player to share a personal video that has not been released anywhere else and is accesible only for those that “Like” my page. Get all this material together, all your HTML code and paste it in a text file so you have it handy!
Are you ready to put all your work onto your Facebook Page????

 

Get the Static HTML App for your Page

wpid404-media_1310340606196.png
You can do a search for Static HTML: iframe tabs. The app has a little star as it’s icon. Go to the App When you do that you will get to the screen above. If you happen to be an admin for various Facebook pages you can see them all via the little drop down menu. If you only have one page you will only see that one. Choose you page

 

wpid405-media_1310340658992.png
Once you choose the Page you want to add the Static HTML app to, you will get a confirmation screen. Click Add Static HTML: iframe tabs

 

On your Page…

wpid406-media_1310340676440.png
Once you have added the app, when you go to Edit your page you will see on the sidebar another little tab. It has a little star icon and it says welcome. Click on that

 

Editing the Content

wpid407-media_1310341074179.png
You will now go to a screen that looks just like the one above. Right at the top you see an empty rectangle. Go to your text file that has all the HTML for your original Landing Page.
Copy the text and paste it into the rectangle. Click: Save and view tab ***If you do want to add a landing page for your fans, right below the rectange you see another rectangle whose title says: [Optional] Fans-only content. You can copy the HTML from the text file that you have with your non-fan info onto that rectangle. REMEMBER ANOTHER TUTORIAL COMING NEXT WEEK SHOWING YOU HOW TO PLAY YOUR LATEST PODCAST EPISODE FOR YOUR CURRENT FANS!

 

Viewing your stuff

wpid408-media_1310341093386.png
You will go to this screen after you Save and view tab. Here you can do exactly what the screen says.

  • Back to editor (if you want to continue working, maybe on your fan landing page)
  • View your tab as a non-fan (THIS IS WHAT YOU JUST WORKED ON!)
  • View your tab as a fan.

When you do click to view your tab, you’ll be able to see all that you have already done! Of course you can always go back and edit, simply by going back to that Welcome tab. REPEAT THE SAME STEPS FOR YOUR FAN LANDING PAGE

 

Have Your Landing Page Show Up As Your Landing Page!!!!

wpid409-media_1310341196370.png
This is a very important step. You have to do this, if not no-one will actually ‘land’ on your landing page! Right underneath your Page’s name from the editing tab you will see an Edit Info Click on it.

 

wpid410-media_1310341211783.png
Once you click on it go to the sidebar and click on Manage Permissions

 

wpid411-media_1310341230305.png
Once you are in Manage Permissions go to Default Landing Tab. Click to open the drop down menu and choose Welcome. That’s it!
Now your non-fans will get your fancy new landing page whenever they happen upon your Facebook Page.
I hope you found this helpful! If you do happen to get all creative with this, and get your landing page all done, why don’t you come on back here and share a link to your Facebook Page?
We’d love to check it out, and I’m sure a ton of other podcasters would as well!Elsie Escobar


Want more info about Facebook for Podcasters? Check out these posts

Search

Categories

Archives

Free Podcasting Quick-Start

Join one of our free webinars and start podcasting!

Ready to start podcasting?

Check out the Libsyn plans and features.