How to get your unique Facebook URL?

Won't be able to find easily on facebook.

You need to go here directly after logging to your facebook account:

http://www.facebook.com/username/


Very obscure and discouraged way to create a unique facebook URL of your account. Don't know the reason why but it could be to avoid abuse.



Warning: Remember, you can change your username only once!

Read More »

Configure your FB Likebox using CSS

Update on 31st of January 2013

This method is no longer supported. (Although the CSS names and values are still valid) Please refer to this latest method to link to the external CSS file instead:

http://webtrick101.blogspot.com/2013/01/facebook-external-css-no-longer.html



Requirement: You need to have a facebook fan page and are able to get its profile_id as explained earlier.


Use this:

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<fb:fan profile_id="NNNNNNNNNNNNNN" width="292" height="580" connections="10" header="true" stream="true" css="http://url..../filename.css?1"></fb:fan>





You can adjust the width, height, connections, header, stream, any way you want it but do make sure your css file is located somewhere in the net and can be accessible online. DO NOT point the css to a local file. It won't work. The ?1 is just a variable to tell the browser not to get from the cache. You may need to change it to ?2 or ?3 .... each time you want your browser to reload the css file or it won't be read as it will be taken from the cache of your browser. Any number will do as long as it's not been used before. If you don't want the browser to reload the css content, just leave out the ?1 URL GET/POST data string.




Here's an example of the css to configure your facebook like box or fan box or whatever box to be called in the future.

.full_widget {
  filter:alpha(opacity=90);
  opacity: 0.9;
  -moz-opacity:0.9;
}
.fan_box .profileimage, .fan_box .name_block{
  display: none;
}
.fan_box .connect_action{
  padding: 0;
}
span.total{
  color: #FF6600;
  font-weight: bold;
}

Basically .full_widget is the entire fan box body. I set it to 90% transparent as I wanted it to show 10% of the background.

.profileimage is your avatar. If you don't want it to show up, set it to none like above.

You can refer to an example css settings here. Note: I do not own these css codes.


Update on 31st of January 2013

This method is no longer supported. Please refer to this latest method instead:

http://webtrick101.blogspot.com/2013/01/facebook-external-css-no-longer.html

Read More »

How to build Facebook Like Box

This is the method as of today as Facebook changes its features very often:

0) Make sure you have a FB fan page

1) Go to Account -> Use Facebook as Page (Used to be called Manage Fan Page)


2) A window will pop up in the middle asking you to choose the page which you want to go to manage


3) Click Edit Page on the top right on your Fan Page


Note: Pay attention to the ID on your address bar (URL), something like
http://www.facebook.com/pages/..../NNNNNNNNNNNNNNNNNNN

Where NNNNNNNNNNNNNNNNNNN is the ID.


4) Click on Marketing and then "Add a Like Box to Your Website"



5) Replace the Facebook Page URL with:

http://www.facebook.com/plugins/likebox.php?id=xxxxxxxxxxx
where id = [the id of your fan page which you can view on the address bar when you are in step 3.



Then click on Get Code.

6) You can get both iframe and XFBML codes. Usually you only need iframe codes for your website. XFBML is for facebook page.

Walla!

Read More »