--> Create Custom Facebook Tab With Custom Icon (1) | Experience Lab - Online business creation and development guide for bloggers and startups

Create Custom Facebook Tab With Custom Icon (1)

To read part 2 then click this link " Design Welcome Page For your Facebook Fan Page " This is part one of our tutorial series on ...


To read part 2 then click this link "Design Welcome Page For your Facebook Fan Page"




Custom-Facebook-tabThis is part one of our tutorial series on "How to create a Welcome WebPage 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.






Live Demo




Follow these easy steps,



1. Set Up New Facebook Tab App



Kindly Visit Facebook Apps Page and then click the + Set Up New App button.


set up new app


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.


app name


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,


change-FB-icon


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


FACEBOOK-INTEGRATION


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.


Add-Tab-to-Like-Page


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


add-to-my-page


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


adding-iframe-tab-to-facebo



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.


facebook-api-key






















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



After completing a normal formality, you will now see Woobox's 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 free email updates. The fun is yet to begin! Peace out. :d


WYSIWYG Editor

PS: Keep all settings default.

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Create Custom Facebook Tab With Custom Icon (1)
Create Custom Facebook Tab With Custom Icon (1)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXpUfVHR-4gkQHCEto8AmtKkz6-Ez5OfSV2IbtcuVeiRBsynd70VnY_LYW84YmbM9wIqP6aF5ro77jSCODdQJpoLRP7o-tGUx6lO0zpS58ZvpM43gO221XHJzRVdIjdtrdsJ0Zeq6faU/?imgmax=800
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXpUfVHR-4gkQHCEto8AmtKkz6-Ez5OfSV2IbtcuVeiRBsynd70VnY_LYW84YmbM9wIqP6aF5ro77jSCODdQJpoLRP7o-tGUx6lO0zpS58ZvpM43gO221XHJzRVdIjdtrdsJ0Zeq6faU/s72-c/?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2011/07/create-custom-facebook-tab-with-custom.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2011/07/create-custom-facebook-tab-with-custom.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy