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 »

IE7 & Img Onload Weird Combo (Doesn't Work and also Work)

<img src="xxx.xxx" onload="javascript:xxx();">

It won't work in IE7 with Doctype set to transitional. But it works fine with or without Doctype set to transitional in IE8.

It also doesn't work with iPad's Safari but works fine with PC/Mac Safari.

The exclusive IE7 sniffer I like best:

if (navigator.userAgent.indexOf('MSIE 7') != -1) {
// Your action here!!!
}

Read More »

Drop "Right" Menu Simple Solution Using UL(Un-numbered List) + CSS

The previous drop down menu was not able to be converted to "drop-right" menu. This is used instead:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<style>
#menu {width: 100px; background: #eee;}
#menu ul {list-style: none; margin: 0; padding: 0;}
#menu li {position: relative;}
#menu ul ul {position: absolute; top: 0; left: 100%; width: 100%;}
#menu ul ul {display: none;}
#menu ul li:hover ul {display: block;}
.butlook {display: block; border-width: 1px; border-style: solid; border-color: #ddd; margin: 0; padding: 3px 3px; font-size: 12px; font-family: tahoma;}
</style>

<body>


<div id="menu">

 <ul>
  <li class="butlook">Menu 1
  <ul>
   <li class="butlook">Menu 1 Item 1
   <li class="butlook">Menu 1 Item 2
  </ul>
  </li>
 </ul>
 <ul>
  <li class="butlook">Menu 2
  <ul>
   <li class="butlook">Menu 2 Item A
   <li class="butlook">Menu 2 Item B
  </ul>
  </li>
 </ul>

</div>

</body>

Such method is important as it is widely used nowadays. It's heavily used in facebook if one hasn't noticed it yet. Although it is not exactly the same, but it is all about using the CSS with the <UL>. What's next? Flip left/right image like iphone trick? I have codes with me but I haven't compiled it up yet. Stay tuned?

Read More »

Drop Down Menu Simple Solution Using UL(Un-numbered List) + CSS

Here are the sample codes in HTML and CSS (important code shown in red):

<style type="text/css">

#main_menu ul {padding: 0; position: absolute;}

#main_menu li {float: left; position: relative; }

#main_menu a {text-decoration: none;}



.main_item {list-style: none; border: 1px solid black; background-color: #DDEEFF; text-decoration: none;}

.item {list-style: none; border: 1px solid black; background-color: #FFEEDD; width: 100%; text-decoration: none; text-align: center;}



#main_menu li:hover ul, li.over ul {display: block;}

.sub_menu {display: none; left: 0; position: absolute;}



</style>



<body>



<ul id="main_menu">



<li class="main_item">

<a href="">  Main Item 1  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item A</a></li>

 <li class="item"><a href="">Test Item B</a></li>

 <li class="item"><a href="">Test Item C</a></li>

 <li class="item"><a href="">Test Item D</a></li>

</ul>

</li>



<li class="main_item">

<a href="">  Main Item 2  </a>

<ul class="sub_menu">

 <li class="item"><a href="">Test Item E</a></li>

 <li class="item"><a href="">Test Item F</a></li>

 <li class="item"><a href="">Test Item G</a></li>

 <li class="item"><a href="">Test Item H</a></li>

</ul>

</li>



</ul>





</body>

I was always amazed by how people use <UL> with CSS to create drop down menu as I always use layers with visibility in CSS to create menu. After knowing this trick using <UL> with CSS, it's a lot simpler than the method I used formerly.

In fact, <UL> can easily forced to line up items next to each other by using this simple CSS:

float: left;

without this CSS, items will line up vertically downward like traditional bullets (<UL> or <OL>).

After that, how do we control the event without using onmouseover event checker? We use this li:hover ul and li.over ul in CSS.

Basically, very simple. It's just a matter of manipulating the display parameter in CSS. When display: block, it is similar to asking the browser to SHOW; whereas, display: none is to ask the browser to HIDE. It's similar to Javascript's hidden and visible function.

Anyway, another sample is required to make this demo easier to under: making a "drop-right" modified from these codes. Stay tuned! (Update: Cannot be done, need to work around as in the coming example)




Note: Firefox needs this to hide the bullets: list-style: none;
Note2: In order for IE to work properly using these codes, you need to declare the doctype as:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Read More »

ASP Sniffer Out IE Sample Codes

user_agent = request.servervariables("HTTP_USER_AGENT")

if InStr(user_agent,"MSIE") > 0 then
position = "absolute"
else
position = "fixed"
end if


These codes above is good to sniff out IE with the rest of the browser in ASP.

Read More »

DIV mask layer not fully covered on top when there is a scroll bar

It's common to create a "mask" layer on top of the page in order to display photos, pop-up messages, etc.

I used to used the "absolute" positioning to do the job under I lately discovered the so called "masked" will move if there is a scroll bar (when shrinking the window's size).

This problem can be easily solved by just setting the DIV to "fixed" position.

Another problem solved! But wait a minute. This solution doesn't work in IE! Let me see if there is a workaround for this...


After trying setting the DOCTYPE to something else such as



It does work on all browsers but all the positions are not in place as desired. Better use a sniffer to sort IE out of using the "fixed" position.

Read More »