Resources » Articles/Knowledge Sharing » Computer & Technology

Customize your Facebook like-box [FAN PAGE]


Posted Date: 20-Sep-2010  Last Updated:   Category: Computer & Technology    
Author: Member Level: Gold    Points: 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

    Awards & Gifts
    Active Members
    TodayLast 7 Daysmore...

    Online Members

    stylus
    komal
    More...
    ISC Technologies, Kochi - India. Copyright © All Rights Reserved.