How to Configure Facebook Share (fb-sahre) Thumbnail & Texts?

Update on 18/12/2014: The latest version has been updated here.

This could be something a lots of new web developers wanted to know as Facebook is gaining substantial popularity each day.

If one can share its web content to Facebook, it could mean a big help to the marketing of the website.


The link you need to put the Facebook link (<fb-share>) to your website or blog:

<HEAD>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

<meta property="og:title" content="Your Title" />
<meta property="og:type" content="website" />
<meta property="og:image" content="Your Thumbnail Image Link" />
<meta property="og:url" content="Your URL" />
<meta name="description" content="Your Description" />

<HEAD>


<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a>

You can also configure the font for the "Share" text.


IMPORTANT Note: If you make a mistake somewhere in your code, you need to go to Facebook URL Linter to refresh the fb-share information of your page. If not, it will be stuck at your first submission as it is cached in Facebook server for future use until you run this Linter. I also heard it will be rerun 24 hours later. I did not take this chance to wait for another 12 hours to do another round of debug. Going to this lint link should be the easiest way to debug your fb-share link:

http://developers.facebook.com/tools/lint

Read More »

Web Browser Usage Statistic/Market Share/Popularity

Out of my curiosity, I just check the latest stat:

http://www.w3schools.com/browsers/browsers_stats.asp

To my surprise, IE is losing steam quite a lot and it is being neglected as days go by. Although Firefox is the most popular browser as of today, 2/4/11, the trend may skew towards Chrome in the near future. Good job! Google!

I expected Safari to go higher due to the popularity of iPad. But to my surprise, iPad doesn't bring much to Apple in terms of the popularity of Safari used in every iPad.

Yes, surprise, surprise and surprise.

Update (April 5th, 2016): Yes, Chrome is indeed now the winner and it is even far in the lead. Kudos! Chrome!

Read More »

For IE, Don't Put CSS Style inside <TABLE>

Anything CSS style setting you put inside <TABLE> will turn into something unpredictable.

Put inside <TD> instead!

For Chrome, Firefox and Safari, they are OK if you put CSS style setting you put inside <TABLE>!

Read More »

Make ASP - ADODB using MS Access MDB file to display Chinese text via UTF-8

You need this:

Response.CodePage = 65001

somewhere in your asp code. Tada!

Of course you need this in the HTML header:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Complete list of codepage can be found here:

http://msdn.microsoft.com/en-us/library/aa752010(v=vs.85).aspx

Read More »

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 »