Facebook page builder for Joomla : Tutorial / Documentation

Create your own Facebook page for your Joomla based website. It’s brand recognition of the company and improves the visibility of the Facebook profile and allows easy interaction with the targeted customers.

The tremendous rise in Facebook users has inspired many business owners to promote their business through this powerful social medium. However a Facebook profile without corporate logo and attractive design or a simple page may not serve the purpose completely. Understanding this lag, our developers have come up with an amazing Joomla extension called “Facebook Page builder” which is absolutely user friendly. This Joomla Facebook page component incorporates an interactive feature and enables the users to design and publish an attractive and professional Facebook Business Page by themselves as per their need.

Step 1. Download and install the plugin
——————————————————————————————————————————–

If you haven’t downloaded Facebook page builder then follow the link to download it http://www.apptha.com/category/extension/Joomla/Facebook-Page-Builder

You can install the Facebook Page builder simple from the Joomla backend.
Download Plugin
IMG 1.1 : Extensions -> Extensions Manager -> Choose file -> Upload & Install

After the successful installation, when you open the component it will ask for Facebook app id and secret key.  This is mandatory.  Please log on to Facebook developer account using the URL http://www.facebook.com/developer to generate the App id and secret key.  If you already have the App id and secret key for your domain then you can use the same instead of creating a new one.

Facebook Page Builder

IMG 1.2 : Component -> Facebook page builder

Step 2. Creating Facebook app id for your domain
——————————————————————————————————————————–

Creating Facebook Fan pageIMG 2.1 : Creating app for the website domain

Provide the Display name and Namespace and click continue.  On this page you have to enter your website address in two places.  For site url and canvas url as you see below. Click and save the changes.

Facebook App FanPage
IMG 2.2 : Provide the Site url and Canvas url

That’s it, when you click Save changes you will see the app id and secret key at the top of the page as shown in the reference screenshot.  You can simply copy it and past it on the configuration page of Facebook page builder component on Joomla backend.

When you click save and close after providing the secret key and app id you will be asked to log in to Facebook.  Click “Login with Facebook” button and click “Continue” button on the next page to get authenticated to create pages / tabs for your Facebook fan page.

Step 3. Creating tabs / pages for your Facebook Fan Page
——————————————————————————————————————————–

Manage Template



IMG 3.1 : Pick the template to design your page

You are allowed to use only the first template with the trial download.  If you need to use the other templates that you see on the same page, then you are supposed to buy the license key.  You can buy the license key from http://www.apptha.com/category/extension/Joomla/Facebook-Page-Builder

After purchase, you need to generate the license key from the My account area.  If you want to continue with the free version then continue editing the default template.

Steps to Edit the Template

Select the template and click “New page title” button to create your first tab / page for your Facebook fan page.  Now again, you are supposed to enter the Facebook app id and secret key for this particular tab / menu.

Facebook Fan Page

IMG 3.2 : Create a app id and secret key

Steps to Create Facebook API and Secret Key for creating new page:

Go to https://developers.facebook.com/apps , provide the app display name and Namespace.  Also accept Facebook platform policies before you hit on Continue button.

Facebook API

IMG 3.3 : Providing the website url and cavas url along with the app id

This time canvas url and site url is bit different. Followed by your website url you also need to add /index.php?option=com_fbpagebuilder&view=fblogins&page= your app id. eg. http://www.yourdomain.com//index.php?option=com_fbpagebuilder&view=fblogins&page=111111111111111

Here, the 111111111111111 refers your app id.

Facebook App Detail

IMG 3.4 : This screen appears when you click on Create new page title button

Now go back to Joomla backend and provide the app id and secret key on the configuration page, in the corresponding field while creating a new page title after selecting the template.  After providing the app id, secret key and sort order click “save and continue button” at the top right to proceed with the customization of the template for your Facebook Fan Page.

Pick your template, select the page title and click Customize button to edit the content, video and images.  In order to modify you just need to click on the respective blocks and can modify in a simple way.  After doing the changes click “Publish” button to add the tab / page to you Facebook fan page.

Facebook Fan Page

IMG 3. 5 : Publishing to your Facebook Fan Page

Multiple Fan Page:

If you have multiple Fan pages associated to your account then you need to select the Fan page from the drop down.

If you want to have a different niche template then you need to purchase our product, generate the license key from My Account area.  After creating the license key you can provide the license key on the configuration tab from the Joomla admin.  To purchase the license key please follow the link http://www.apptha.com/category/extension/Joomla/Facebook-Page-Builder

Apptha Facebook Page
IMG 3.6 : Output

Advantages of purchasing commercial version

  • Powered by text on Facebook Fan Page will be removed
  • Access to new premium templates
  • Will be able to create multiple tabs / menus for your Facebook fan page
  • One year free updates

Buy nowFeatures | Demo

Related posts

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code lang=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" extra="">