Download Facebook Template Design For Custom Tabs

UPDATE:[a href="http://www.mybloggertricks.com/2011/07/download-facebook-template-design-for.html"] Facebook Template Custom Tab2[/a] now available. 

Releasing yet another design template for Facebook Static IFRAME Custom Tabs. This new design includes one additional feature i.e. the Navigation menu. You can now add your most important links to the menu and if you wish you can even convert it into a drop down menu by reading our previous tutorials on [a href="http://www.mybloggertricks.com/2011/07/create-drop-down-menu-in-blogger.html" target="_blank"]drop down menus[/a]. The coding is kept simple so that you may easily customize the colors and fonts styles and sizes. You will need to edit the template in the Editor mode and paste this new design template code inside the source page of your [a href="http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html" target="_blank"]woobox's HTML Editor[/a]. I will be here to help you out with any help if needed. The template is compatible with all major browsers.

[a name='more'][/a]

[a href="https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744?sk=app_182013565195418" rel="nofollow" target="_blank"]Live Demo[/a]

To use this template first you need to create a custom Facebook IFRAME tab by reading the tutorial below:

• 
  [a href="http://www.mybloggertricks.com/2011/07/create-custom-facebook-tab-with-custom.html" target="_blank"]Create Facebook TABS[/a]
  
  

Download Facebook Template

Kindly submit your Email ID below to receive tons of such design goodies for free straight in your inbox:

Check you inbox and activate your feeds. Once you have activated the feeds then kindly post the same ID in the comments box below with which you subscribed. We share resources with subscribers only to keep things clean.

Installation

Find all installation guide and help in this post:

• 
  [a href="http://www.mybloggertricks.com/2011/07/releasing-facebook-template-for-custom.html" target="_blank"]Installing IFRAME Templates[/a]
  
  

Customization

To edit the navigation menu Find this code,

<li><a href="#" ><span>Link 1</span></a></li>
  <li><a href="#" ><span>Link 2</span></a></li>
  <li><a href="#" ><span>Link 3</span></a></li>
  <li><a href="#" ><span>Link 4</span></a></li> 
 

Replace the hash(#) sign with your Page Links /URL and replace Link1, Link2, Link3 etc. with your Page Titles. If you wish to add or delete a tab then simply add or delete this line,

<li><a href="#" ><span>Link</span></a></li>

Terms of Use

All MBT resources are copyrighted content and can not be redistributed without our permission.

Source: http://www.mybloggertricks.com/2011/07/download-facebook-template-design-for.html

Create & Design Custom Tabs on Facebook - Series Tutorial

Advantages of Woobox's Custom Facebook Page Tab App

Yes there will be no ads attached! No service links, banners, icons, no nothing.

 

I am sure with all these features anyone would enjoy creating a landing page for their website on Facebook. You can even create a complete website on Facebook with navigation and the only thing you would need is a free template design to help you to give a start to your imagination. Make sure you don't miss any part of the tutorial and subscribe now in oder to be informed via Email whenever a new tutorial part is published.

[a href="http://feedburner.google.com/fb/a/mailverify?uri=tntbystc" rel="nofollow" target="_blank"]Click here to receive Updates Via Email[/a]

Any Suggestion?

We would highly appreciate If you want to share any idea or suggest on any thing before we start the series guide. If you have any question in mind that is troubling you then feel free to start the warm tea discussion in the comments [a href="#comments" rel="nofollow"]below[/a]

Source: http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html

Create Custom Facebook Tab With Custom Icon (1)

To read part 2 then click this link "[a href="http://www.blogger.com/"]Design Welcome Page For your Facebook Fan Page[/a]"

---

This is part one of our tutorial series on "How to create a [a href="http://www.mybloggertricks.com/2011/07/create-design-custom-tabs-on-facebook.html" target="_blank"]Welcome WebPage[/a] on Facebook". To add branded look to your Fan Pages you need a custom tab so that you could then design the tab to blend your website theme. A tab is basically a link that will appear under the wall and info tabs. On clicking the tab your visitors or fans will be able to see the content inside that tab page.

[a name='more'][/a]



[a href="https://www.facebook.com/pages/My-Blogger-Tricks/147104632016744" rel="nofollow" target="_blank"]Live Demo[/a]

Follow these easy steps,

1. Set Up New Facebook Tab App

Kindly Visit [a href="http://www.facebook.com/developers/apps.php" rel="nofollow" target="_blank"]Facebook Apps Page[/a] and then click the + Set Up New App button.

Set the App Name with either your website name or blog name. You can give any name you want and you can change it later too.

Click the the Create App button and enter some security code to proceed further.

2. Configure your Tab App Settings

In the About section, click the "Change you icon" link to upload a 16px by 16px Icon for your tab. My advise is that you upload your website logo like I have done,

Before you save your changes, click the Facebook Integration tab. On the Facebook Integration settings page fill up the blanks using the information below. Make sure you note down your Application ID as shown in the screenshot below,

Canvas Page - It is optional. Just write your blog name here.

In each process below, replace YOURAPPLICATIONID with your Application ID

Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/

Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/

Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab

Secure Tab URL - Enter https://YOURAPPLICATIONID.iframehost.com/tab

IFrame Size - Choose Auto-resize

Click the Save Changes button. Congratulations you just created a tab successfully! Now just few more steps.

3. Add your Custom Tab App to your Fan/Like Page

Copy your API key and App Secret code and keep them safe in a notepad as we will be needing them later. Now click the Application Profile Page link.

Next click the Add to My Page link to install the page tab

Finally select the page you would like to install the tab on.

4. Visit Your Facebook Custom Tab Page

You will now find the custom tab appearing under the wall and info tabs. Click your Tab. When you visit the tab page for the first time, you will be asked to enter your API Key and APP Secret. Simply fill up the blanks with the App number codes you saved  in a notepad.

5. You are now Ready To Design your Welcome Page!

After completing a normal formality, you will now see [a href="http://woobox.com/" target="_blank"]Woobox's[/a] beautiful WYSIWYG Editor just like your Blogger Editor, where you can create amazing designs using your imagination. This is the end of tutorial part -1. On my next tutorial I will be sharing how can you design the Welcome landing page with CSS, HTML and JavaScript. Make sure you don't miss any part by subscribing to our [a href="http://feedburner.google.com/fb/a/mailverify?uri=tntbystc" rel="nofollow" target="_blank"]free email updates[/a]. The fun is yet to begin! Peace out. :d

PS: Keep all settings default.

Source: http://www.mybloggertricks.com/2011/07/create-custom-facebook-tab-with-custom.html

How To Arrange Tabs Order In New Facebook Layout?

 

Note that you can not move the tabs up the default Wall and Info tabs. The tab arrangement can be done on for all facebook tabs or your custom tabs except the two mentioned. I hope this little info may prove helpful to most of you. You can read the tutorial series on how to create an IFRAME tab on facebook below,

• [a href="http://www.mybloggertricks.com/2011/07/create-custom-facebook-tab-with-custom.html" target="_blank"]Create Custom Facebook Tab[/a]

Source: http://www.mybloggertricks.com/2011/07/how-to-arrange-tabs-order-in-new.html