{"id":14603,"date":"2024-05-10T16:29:41","date_gmt":"2024-05-10T19:29:41","guid":{"rendered":"https:\/\/4tuneagencia.digital\/blog\/how-to-create-custom-facebook-pages-digital-inspiration-digital-inspiration\/"},"modified":"2024-05-10T16:29:41","modified_gmt":"2024-05-10T19:29:41","slug":"how-to-create-custom-facebook-pages-digital-inspiration-digital-inspiration","status":"publish","type":"post","link":"https:\/\/4tuneagencia.digital\/blog\/how-to-create-custom-facebook-pages-digital-inspiration-digital-inspiration\/","title":{"rendered":"How to Create Custom Facebook Pages – Digital Inspiration – Digital Inspiration"},"content":{"rendered":"

Facebook has made some significant changes to the layout of Facebook Pages in recent months. The custom landing tabs are gone and all Facebook Pages are now rendered using the new Timeline view. Page owners can add cover photos and they can also highlight important stories by pinning them to the top.
Facebook Pages, by default, include apps for Events, Photos, Videos and Notes. However, if you would like to include custom information on your Facebook Page \u2013 maybe a Google Map of your business or YouTube videos or maybe a calendar of events – you need to create an app for that. Let me share a few good examples.
The official Facebook Page for Nokia<\/a> has a Welcome Tab that highlights some of their recent phones. The Nike<\/a> page has a Locations Tab that highlights the location of Nokia stores in the country. Apple\u2019s App Store<\/a> page has a Featured Tab where they have put a list of their top-selling apps and games. The Al Jazeera<\/a> Page on Facebook has a \u201cWatch Live\u201d Tab where you can watch news right inside Facebook.
Have you ever wondered how do big brands create such interesting Facebook pages? They may have big marketing budgets but do you really need to hire skilled designers or programmers to build such fan pages? Well the answer is obviously no. You can create beautiful custom apps for your Facebook Page without writing a single line of code and all you need are few minutes.
<\/a>
Facebook Apps for Pages, in simple English, are like regular web pages that are embedded inside Facebook using the IFRAME tag. Thus, any object that can be embedded<\/a> in a HTML web page – like audio MP3s, Google Maps, YouTube videos, presentations, Google Calender, jQuery Carousels, photo slideshows, etc. – can be easily added to your Facebook Pages.
Before we get into the actual process of creating custom tabs (or apps) for Facebook Pages, we need a find a place to host the HTML, CSS, Images, JavaScript and other files associated with our web pages. I prefer using Google Sites to host pages because they are free, you get a WYSIWYG editor to create pages and Google Sites can be integrated with Google Analytics so you more easily track visits to your Facebook pages.
The other big reason is that Google Sites can serve pages over secure (https) and regular (http) connections. This is an extremely important point because a majority of Facebook users may have turned on \u201csecure browsing\u201d in their security settings. If your Facebook app serves content from a regular (http) URL, all these users will see is a warning message and you definitely don\u2019t want this to happen. Google Sites is thus a recommended option.
Enough theory, let\u2019s get our hands dirty and create a custom app for our Facebook Page. If you get stuck, follow this video tutorial<\/a>.
Step 1:<\/strong> Open Google Sites<\/a> and create a new site. Choose \u201cBlank Slate\u201d for the theme and, under Site Settings, \u00a0 set the width as 100% so your content occupies the entire width of the Facebook Canvas. Also disable the Header and Sidebar since we don\u2019t want this stuff to appear on our Facebook Page.
Step 2:<\/strong> Compose a new page in Google Sites and add some content to this page using the built-in WYSIWYG editor. If you are an experienced coder \/ designer, switch to the HTML view and add HTML code directly to your page. You may insert images, maps, videos, spreadsheets, gadgets, tables and everything else just like a regular HTML page.
Step 3:<\/strong> Open the Facebook Developers page at developers.facebook.com<\/a> and, if this is your first Facebook App, click \u201cGo to App\u201d to add the Developer app to your Facebook Profile. Next click on the button that says \u201cCreate a new App\u201d and give your app a name (you can skip the other fields).
\"page
Step 4:<\/strong> Expand the \u201cPage Tab\u201d option under Basic Settings and set the URLs for \u201cPage Tab\u201d and \u201cSecure Page Tab\u201d the same as your URL of your Google Site\u2019s page. The Page Tab URL should point to the http version of the Google Sites page while the Secure Page Tab URL should use the https version.
Step 5:<\/strong> You should also upload a 111×74 pixels thumbnail image with your Page Tab as it will show up in the header of your Facebook Page. Use bigger fonts inside the image for better readability. Save the changes and your Facebook App is now ready.
Step 6:<\/strong> Now we need to add this custom Page Tab to our Facebook Page. That\u2019s easy. Copy the App ID of your Facebook App that you just created and replace XZY in the following URL with that App ID. Open the modified URL in your browser and you should see an option to add the app to your Facebook Pages.
https:\/\/www.facebook.com\/dialog\/pagetab?next=http:\/\/facebook.com&app_id=XYZ<\/a>
That\u2019s it. You can add more apps \/tabs to your Facebook Page using the same technique and it is also possible to alter the order of these tabs in the header.
If you ever need to update the content of a Facebook tab, just update the corresponding Google Sites page and your Facebook tab will update automatically because internally, you are just serving the same Google Sites Page to your Facebook Fans.
Here\u2019s a video tutorial that will walk you through all the steps in greater detail. \u2193<\/a><\/p>\n

\n