Resources » Articles/Knowledge Sharing » Computer & Technology

Customize your Facebook like-box [FAN PAGE]


Updated: Category: Computer & Technology
Author: Member Level: GoldPoints: 10


Facebook like-box is very important to connect your website visitors with your fan page. So I decided to write complete tutorial about
- CUSTOMIZATION OF FACEBOOK LIKE BOX - Lets customize Facebook like box to match your Webpage.




UPDATE :
ANOTHER EXAMPLE AVAILABLE - HERE

DESCRIPTION :


Facebook like box provides a better way to connect your site with Facebook users.And it allows user to connect with your Facebook Fan-page
The only thing is adding a fan-box to your page is very simple but it is not easy to customize.

THE STORY :


I am working for one project and my client want a Facebook like box for his website.And the regular template of Facebook like box is not matched with website template,
So I am searching Internet to get some help But No [ :( ]
huh.
There is no way to customize your facbook-widget, but using X-FBML we can change the style-sheet.

DOWNLOAD : Amit's-Custom-like-box.zip

What you need ?



  1. Facebook API key – How to get ? Explained in STEP 1

  2. Facebook Fanpage ID – How to get ? Explained in STEP 2

  3. Little bit knowledge of HTML and CSS.


Thats it, Now you are ready to create your Like-box.


Lets Develop Custom Facebook like-box


STEP 1 : Get An API key

1. Go to this page : http://developers.facebook.com/setup/
2. Fill the form.
NOTE : You should End URL with ' / '

3. Complete the security check.

4. After that go to this page : http://www.facebook.com/developers/apps.php
NOTE : some time page may not load, No problem at just go to above page and your Application is created.

5. Note down the API Key.

STEP 2 : Get Fan-page ID

Fan page Id is number given to your Fan page

1. Go to your Facebook Fan page.

2. Look in the address bar for numbers
E.g. See I was highlighted the Page ID

3. Note down the Fan-page Id

STEP 3 : FINAL STEP

1. COPY PASTE THIS CODE IN NOTEPAD.

<div id="fb-root"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">FB.init("YOUR-API-KEY-HERE");</script>
<fb:fan profile_id="FACEBOOK-FAN-PAGE-ID-HERE" connections="18" width="403" height="360" css="http://custome-like-box.zymichost.com/style.css?1"></fb:fan>


2. Replace YOUR-API-KEY-HERE with yours.
3. Replace FACEBOOK-FAN-PAGE-ID-HERE with yours.



What is ?3 at the end of css link?



The ?3 at the end is a very important and needs to change every time you change your STYLE-SHEET [ css file ],

Eg. Initially put it ?1 , after you changed the style-sheet then change it to ?2 and so on. Other-wise Old style-sheet is used from Facebook cache.

Attached : Amit's-Custom-like-box.zip


ANOTHER EXAMPLE AVAILABLE - HERE

UPCOMING TUTORIALS : - LIKE BOX TO SHOW YOUR FRIENDS


Did you like this resource? Share it with your friends and show your love!




Responses to "Customize your Facebook like-box [FAN PAGE]"

No responses found. Be the first to respond...

Feedbacks      

Post Comment:




  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:   Sign In to fill automatically.
    Email: (Will not be published, but required to validate comment)



    Type the numbers and letters shown on the left.


    Submit Article     Return to Article Index
    Complete the action items below to enter to win an iPad Mini from India Study Channel! in India Study Channel - Locker on LockerDome
    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    Online Members

    Naveen
    More...
     
    ISC Technologies, Kochi - India. © All Rights Reserved.