I was recently working on a project involving the facebook “like” button and how it creates links back to the place of origin.  For the vast majority of websites, simply implementing the code found in the facebook documentation is enough, however, I was dealing with a different sort of monster.  The site I wanted to implement the like button on was self-replicating, using a url rewrite rule to handle replication.  To prevent duplicate content, a canonical url tag was listed in the header.  I noticed upon implementation of the facebook like button that the posted links were returning to the specified canonical url in the page header instead of the url I specified in my like tag.  This caused me to want to investigate how facebook’s like button works.  Below are my findings.

Upon clicking the “like” button, whether using the <iframe> or js SDK version of the like button, an AJAX call was sent out to facebook (of course).  Facebook would search, in this order, for the first of the following:

1. facebook’s own open graph protocol meta tag
2. the canonical url meta tag
3. a specified url in the actual like button
4. the current page’s url

Once determining the URL based on the above, facebook would then crawl the correct page sniffing for (in this order):

1. facebook’s own open graph protocol meta tags
2. any other data it could glean to get what it needed (ie, a meta description, the title, etc)

It would use the gathered information to then build the post on the user’s wall correctly.  However, in certain circumstances, specifying your own og tag was not enough.

In the event a user clicks the “like” button, but does not enter the optional comment, the link posted on the user’s wall actually linked back to the canonical URL.  Interestingly, the fan page that facebook creates for your page is properly linked using the og:url you specify.  We all know, however, that most users will click on the news feed link instead of the page’s.  Below are the tests I ran to verify what was happening:

canonical	OG tag	comment	Finding	screenshot	Conclusion
YES	YES	YES	properly linked, extra info included		Best case scenario but cannot force someone to comment. OG tags will create fan pages for any page someone “likes”.
YES	YES	NO	Improperly linked on feed, but properly linked in all extra info that is included (fig 1) Note: on page refresh, it appears facebook crawled the correct web page and added a link to the root of the site: (still improperly linked (fig 2)	1. 2.	Could get around with use of a rel param that would be sent in url. Would require framework change to support.
YES	NO	YES	improperly linked everywhere		Current implementation on live. not acceptable
YES	NO	NO	Improperly linked (fig 1) Edit: on page refresh, it appears facebook crawled the canonical index page and picked up the extra info on it included in the canonical og tags: (still improperly linked, but extra info from canonical page included) (fig 2)	1. 2.	Current implementation on live. not acceptable
NO	YES	YES	Properly Linked, extra info included, more likely to appear in news feed.		cannot implement—canonical must be defined.
NO	YES	NO	Properly Linked, with extra info included		cannot implement—canonical must be defined.
NO	NO	YES	Properly linked, extra info gotten from other meta tags in header		cannot implement—canonical must be defined.
NO	NO	NO	Properly Linked		cannot implement—canonical must be defined.

All tests were run with the facebook javascript SDK Like button implementation method as comments are not
allowed with <iframe>s in the size we need.

Facebook has created a “rel” attribute that can be sent in with a like button, which is returned regardless of the url facebook chooses to show.  Theoretically, the issue of what page facebook posts could be gotten around with a sniffer in your code that looks for a url param of “fb_rel” and redirects accordingly. ]]> http://www.triadwebcrafters.com/blog/?feed=rss2&p=54 0 http://www.triadwebcrafters.com/blog/?p=50 http://www.triadwebcrafters.com/blog/?p=50#comments Fri, 26 Mar 2010 15:58:36 +0000 mistersender http://www.triadwebcrafters.com/blog/?p=50 These got e-mailed to me recently and I thought they were worth sharing. Just some pdf’s with a cheat sheet of how to use a lot of MSOffice tools… even IE (boo!)

Microsoft Office Guide Cheat Sheets

Enjoy!

Using structKeyExists() instead of isDefined()

Think about it, ALL coldfusion variables are in structures, right? So
instead of isDefined(’myvar’) where coldfusion doesn’t know what struct to start
in and therefore has to look through every scope to find the instance of myvar
and see if it exists, you are now telling coldfusion exactly where to look using
structKeyExists(’variables’, ‘myvar’). It’s the difference between someone
saying “turn to page 123 paragraph 2 on Insects” and “find the part about Insects”. Well, you can go to the index in the book and look at all of the places Insects are mentioned, or you can just go to the page because the information was given to you… much better!

Looping

Everyone has done it, the classic loop through a list. Here’s how it would
look:

<cfloop from="1" to="#listlen(mylist)#" index="i">
#i#
</cfloop>

Ok, that’s decent code, and certainly what you will find out there as the
“standard” way of doing things, but this can be more efficient:

<cfset loopThrough=listlen(mylist)>
<cfloop from="1" to="#loopThrough#" index="i">
#i#
</cfloop>

Why? Instead of having to not only loop through your list x number of times,
the first example would also be evaluating #listlen(mylist)# x times as well…
twice the effort! It’s much less taxing on the system to define variables than
to re-evaluate over and over… even if it is less characters on the page.

If it’s boolean, don’t bother with the “eq 1″ or “neq NO” etc.

If you are going to have a boolean returned by a variable, don’t bother
setting what it’s equal to, you’re just wasting space, plus your code looks
cleaner. Examples:

<cfset isEfficient = 1>
<cfif isEfficient>it's efficient!</cfif>
<cfif isEfficient = '1'>It's NOT as efficient.</cfif>

The variable above, “isEfficient” could also be set to any of these boolean
combinations and it would still work:

• yes/no
• true/false
• 1 (OR ANY numeric value that is NOT 0… yes, that means ‘-.000001′ &
  59990289 will both evaluate True) / 0

Eliminate “Else” from If statements where possible.

If you’re like me, this one seemed ridiculous, right? I know I thought I
only used “else” when necessary, but I was SO wrong. I have to admit though,
this is a method that is really used more on the presentation side than the
logic side, even though you can apply it to both. Let’s see an example.

This is a pretty classic example. Let’s say we have a bunch of table rows we
want to have with colors that fluxuate by row. First, we’ll look at the if/else
way:

<cfloop from="1" to="5" index="i">
 <cfif NOT mod(i)>
  <td style="color: red">&nbsp;</td>
 <cfelse>
  <td style="color: blue">&nbsp;</td>
 </cfif>
</cfloop>

Let’s see what we can do to Improve.

<!--add to css style-->
.line0 {color: red}
.line1 {color: blue}
<cfloop from="1" to="5" index="i">
 <td class="line#mod(i)#">&nbsp;</td>
</cfloop>

Much Better! But there is more to it than just this example. Let’s look at
a different example:

<cfset isWidgets = 1>
<cfif isWidgets>
 <p>There are widgets!</p>
<cfelse>
 <p>There aren't any widgets...</p>
</cfif>

Ok, so this might not be the most efficient thing to do in every situation,
but as this is an example to build on, here’s how we could eliminate the
“else”:

<cfset isWidgets = 1>
<cfset widgetText = "There aren't any Widgets...">
<cfif isWidgets>
 <cfset widgetText = "There are widgets!">
</cfif>
<cfoutput><p>#widgetText#</p></cfoutput>

It’s important to note that doing this:

<cfset isWidgets = 1>
<cfset widgetText = "">
<cfif isWidgets>
 <cfset widgetText = "There are widgets!">
<cfelse>
 <cfset widgetText = "There aren't any Widgets...">
</cfif>
<cfoutput><p>#widgetText#</p></cfoutput>

Is even less efficient than the first example, because you not only still
have an else statement, but more variables and more characters floating about.
Therefore, we could also glean that starting off by defining a variable with one
of the options for its value is another way to reduce code and increase
efficiency… of course, that’s not possible in many situations, but where it is, it’s a good idea.

Use cfscript

I always shied away from this tag in the past. I was a self taught cf’er and
while I certainly love the simplicity of the tag based cf language, cfscript
isn’t as scary as I thought. You pretty much just strip the “cf” off of the
tags and add some “;”. Sure, there’s a little more to it, but really, you can
figure it out!

So, Let’s say we have a very simple cfc:

<cfcomponent displayname="MyCFC">
 <cffunction name="getList" access="public" returntype="struct" output="false">
  <cfset var returnData = "">
  <cfset i = 0>
  <cfloop from="1" to="5">
   <cfset returnData = returnData & ',' & i>
   <cfset i = i + 1>
  </cfloop>
  <cfreturn returnData/>
 </cffunction>
 
 <cffunction name="getList2" access="public" returntype="struct" output="false">
  <cfset var returnData = "">
  <!---notice this function has no i = 0 set--->
  <cfloop from="1" to="5">
   <cfset returnData = returnData & ',' & i>
   <cfset i = i + 1>
  </cfloop>
  <cfreturn returnData/>
 </cffunction>
</cfcomponent>

Ok, so then let’s say we call getList, and then getList2. Here’s what we’d see:

getList= ,0,1,2,3,4
getList2= ,5,6,7,8,9

So, what happened? In our getList function, we declared i = 0. However, we did
NOT declare it as a “var” for the function, and that means that “i” is available
in ALL of your functions, instead of just that one specific function. The above
is set up to not really end up being a problem, but what you will eventually run
into is you will have two functions that may get called at once, and if they are
both manipulating the “i” variable, things will get weird. For example, in the
above example, if both functions somehow manage to get called at the same time,
you may end up with an output like this:

getList = ,0,2,3,7,8
getList2 = ,1,4,5,6,9

Where this can really come back to bite you is if you have several queries you
have not “var” scoped that are all named the same thing. Perhaps you have
several users that are pulling up user-specific data via these separate queries
in separate functions in your cfc, but you forgot to var scope your queries.
Bam… your users start seeing each other’s data occasionally. Problem?
definitely. Lesson: make sure to var scope any variables that are NOT cfc-wide.

So, why did I tell you all that when all you really wanted to know about was
instance variables? Because “i” is an instance variable. It’s just a variable
(and yes, they belong to the “variables” scope) that is available to all of your functions in a component. A lot of times, you
will see these variables thrown into the variables scope just to make keeping
them separate easier. You’ll also commonly see an “init()” function whose job it
is to set all of those instance variables the first time a component is called
just to be sure the variables are available when needed.

<cfcomponent displayname="myCFC">
 <cffunction name="init" access="public" returntype="struct" output="false" hint="this is the init() function for this component">
  <cfset variables.instance = structNew()>
  <cfset instance.myName = "Tess McTesterson">
  <cfset instance.dsn =  "myDSN">
  <cfreturn this/>
 </cffunction>
 
 <cffunction name="getName" access="public" returntype="struct" output="false">
  <cfset var returnData = "">
  <cfset returnData = variables.instance.myName>
  <cfreturn returnData/>
 </cffunction>
</cfcomponent>

So using the above example, this:

<cfset theComponent = createObject("Component","myCFC").init()>
<cfoutput>#theComponent.getName()#</cfoutput>

Would yield:

Tess McTesterson

So, instance variables don’t have their own scope, like “variables” or “form”
it’s just a way to refer to variables that are available in a cfc to all
functions.

There are a few concepts to understand when delving into the world of application and session variables, and i will do my best to avoid using techno talk so you can understand it without having to try too hard. The first, is what an application.cfm (or application.cfc) file is/does.

What an Application.cfm (or application.cfc) file is/does

An application.cfm file is a hunk of code that is executed FIRST before any page you create runs. You MUST name it “application.cfm”. It MUST be at the root of your site (well, not always, but for the basics, yes… must.)
Here is what your 1-page website should look like utilizing an application.cfm:

SITEROOT.com
–index.cfm
–application.cfm

Let’s have a look-see here and show you what this will do.

Here’s my ridiculous application.cfm file:

I'm an application.

And the index:

I'm a sweet index page.

Which will output this:

I'm an application.I'm a sweet index page.

So, we understand. Applications run first, ALWAYS. I’m sure this gets your head turning on the nice things you can now do, but this, my friend, is only the tip of the glorious application file iceberg. There are many, many things you can and should use the application file for, but I don’t want to overwhelm you, so I will just get you excited about application variables.

All right. There are some variables that coldfusion makes available to you that you can use on any page, anywhere, always. These are APPLICATION variables. any variable that you set in the application structure is available anywhere in your website, and is the SAME FOR ALL CLIENTS.

Need to have your datasource name saved? set it!

<cfset application.dsn='mydsn'>

Now you can just call your datasource name variable instead of hard coding it in. Why? you ask? because you really, really don’t want people to be able to see your DSN when an error page appears. yeah, not good. they’ll just see the variable name, though if you use the code above!

Mmk, so application variables are for any computer accessing your site, anywhere on your site.

So What is a Session Variable, then?

Unlike Application variables, which (again), once set, can be used by ANY computer, ANY where on your site, Session variables can only be used by ONE computer ANY where on your site. Here is a great example of where session variables would be perfect:

<cfset session.userid=1287>

What does the code above do? it sets up a userid that can be used anywhere on the site, but only for the one particular computer accessing your site. This is one way that you could create a secured back end area for different users without having to pass a url or form variable to every page. Maybe you would like to display a person’s name on some pages of your site, now you can! just set it on one page, and then call it when you need it from any other page. as long as the user is still on your site, their name will appear!

url: website.com?oid=124

<cfoutput>#url.oid#</cfoutput>

And you get:

124

Easy peasy, right? now for those of you that don’t know, “url.oid” is, like many coldfusion variables, a STRUCTURE. Here are some other examples of structures just so we are clear:

#url.status#
#form.runadd#
#cart.items.sku#

So, in it’s most dumbed down form, it’s just a variable name with some dots thrown in the middle to make them easier to sort, like looking through a list of lists.

Did you know there are some structures available for you to use on EVERY page? YES! EVERY page! And they are super-helpful. Don’t believe me? try running this on any coldfusion page:

<cfdump var="#application#">
<cfdump var="#session#">
<cfdump var="#cgi#">

So, see all that craziness that gets dumped out? those are structures! how do you call one of the things you see… like this:

<cfoutput>#cgi.http_server#</cfoutput>

and there’s your http server’s name. excellent! Hopefully this will arm you with the ability to call just about anything you can dump.

Background shows through because this picture doesn't render at the bottom in IE

Yet another thing IE does that we wish it didn’t do. This is simply an image that is SUPPOSED to show up at the bottom of my div, and would therefore hide my background. Does it? Not in IE. What’s the problem, you say? After a little googling, I tried changing my code from this attractive and easy to read version:

   <img src="images/banner_bottom.jpg" />
</div>

To this ugly version that will give me headaches later…

<img src="images/banner_bottom.jpg" /></div>

yes. IE decided that empty space was a page break. Good work IE.

the page…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
 
<body>
 
<div id="outer_body">
	<div id="inner_body">
               <div id="header_text">
			<h1>Here's a Title!</h1>
			a tag line here...
		</div>
	</div>
</div>
 
</body>
</html>

stylesheet…

@charset "utf-8";
/* CSS Document */
 
body{background-color:#e2d6a9;
	font:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}
 
#outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110;
top:0px; position:relative;
	width:100%;
	height:200px;
	margin:0px;
	padding:0px;
 
}
 
#inner_body {
	margin:0px auto;
	position:relative;
	top:0px;
	padding:0px;
	width:200px;
	height:225px;
	background:#0F0
}
 
#header_text{
	margin-top:40px;
	width:190px;
}

Firefox has failed, it's not easy to align divs at the very top...

This does NOT work by itself, though. Here’s the trick. You have to put something in every div you want to align at the very top of the page that has a margin and a padding of 0px, or you’re out of luck. I settled on an image named “spacer.gif”, which I then made have a width and height of 0px. Let’s see the difference…

<!--the index page-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="teststyle.css"/>
</head>
 
<body>
 
<div id="outer_body">
	<div id="inner_body">
		<img src="images/logo_bnr.jpg" width="0" height="0" id="spacer" />
                <div id="header_text">
			<h1>Here's a Title!</h1>
			a tag line here...
		</div>
	</div>
</div>
 
</body>
</html>

stylesheet…

@charset "utf-8";
/* CSS Document */
 
body{background-color:#e2d6a9;
	font:Arial, Helvetica, sans-serif;
	margin:0px;
	padding:0px;
	position: absolute; 
	top: 0; 
	left: 0; 
	right: 0; 
	bottom: 0;
}
 
spacer {
margin: 0; padding: 0; width:0px; height:0px; float:left;
}
 
#outer_body{background:url(images/outer_bg.jpg) repeat-x #0c2110;
top:0px; position:relative;
	width:100%;
	height:200px;
	margin:0px;
	padding:0px;
 
}
 
#inner_body {
	margin:0px auto;
	position:relative;
	top:0px;
	padding:0px;
	width:200px;
	height:225px;
	background:#0F0
}
 
#header_text{
	margin-top:40px;
	width:190px;
}

With the invisible spacer, added, now everything aligns to the top!

For this example, I set up a cfc called “ajax” (clever, eh?). Here is the function inside it…

 
<cffunction name="getstates" access="remote" returntype="array" hint="lookup states for dropdown">
	<cfargument name="country" type="string" required="true" default="">
 
		<!--- Define variables --->
		<cfset var data="">
		<cfset var i=0>
		<cfset var result=ArrayNew(2)>
 
		<!--- Do search --->
		<cfquery datasource="#variables.dsn#" name="data">
		SELECT state,postal_code
		from tblstates
		where country=<cfqueryparam value="#ucase(arguments.country)#" cfsqltype="cf_sql_varchar">
		order by state
		</cfquery>
 
		<!--- Build result array --->
		<!--- Convert results to array --->
        <cfloop index="i" from="1" to="#data.RecordCount#">
            <cfset result[i][1]=data.postal_code[i]>
            <cfset result[i][2]=data.state[i]>
        </cfloop>
 
		<!--- And return it --->
		<cfreturn result>
	</cffunction>

Mmk, Now let’s look at the actual code on my form page:

<!---here's a query for filling my select box...--->
<cfquery name="rscountry" datasource="#application.db#">
SELECT *
FROM tblcountries
ORDER BY country ASC
</cfquery>
 
<!---here's my form--->
<cfform method="post" name="form1" action="join.cfm?dealeruname=#this_dealer_username#">
     <cfselect name="country" id="country" required="yes" message="Please select your country of residence." query="rscountry" value="country" display="country" selected="United States"></cfselect>
 
     <cfselect name="stateprov" bindonload="true" bind="cfc:ajax.getstates({country})" /> 
</cfform>

That’s it, folks. easy.

But what about when I don’t have a State listing for say… Uganda. Well, we have to have some way of getting the state/province if we don’t have a populated dropdown. Now there’s more to do. There are probably more elegant solutions out there, but this is what I did, and it seems to work pretty well.

Now we’re going to need to use some javascript and a bit more ajax. Let’s do it!

First, let’s get our form prepped:

 
<!---here's my sexier form--->
<cfform method="post" name="form1" action="join.cfm?dealeruname=#this_dealer_username#">
     <!---Notice, I've added an onchange event to this field.--->
     <cfselect name="country" id="country" required="yes" message="Please select your country of residence." query="rscountry" value="country" display="country" selected="United States" 
onChange="showwhich()"></cfselect>
 
   <!---wrap each field in a uniquely identified div--->
    <div id="dd_state">
	<cfselect name="stateprov" bindonload="true" bind="cfc:ajax.getstates({country})" /> 
   </div>
   <!---add a new text input, and hide it with the div--->
   <div id="type_state" style="display:none">
	<cfinput name="stateprovt" type="text" />   
   </div>
</cfform>

OK, we have our text field. It’s hidden. We’ve got all the other stuff in place, we just need to write the stuff that makes it work!

First, we need to make a new cffunction in our ajax cfc. The function will return a boolean value for whether or not the country has states/provinces within it. You could probably set this up to work with your first function, but I went with a smaller query to reduce some load.

<cffunction name="arestates" access="remote" returntype="boolean" hint="are there states?">
	<cfargument name="country" type="string" required="true" default="UNITED STATES">
 
		<!--- Define variable --->
		<cfset var data="">
 
		<!--- Do search --->
		<cfquery datasource="#variables.dsn#" name="data">
		SELECT state
		from tblstates
		where country=<cfqueryparam value="#ucase(arguments.country)#" cfsqltype="cf_sql_varchar">
		LIMIT 1
		</cfquery>
 
		<cfif data.recordcount>
			<cfreturn true>
		<cfelse>
			<cfreturn false>
		</cfif>
	</cffunction>

Ok, not too bad. Now, let’s bind our page to the ajax cfc so we can use this function. Stick this baby at the top of everything on the page:

   <cfajaxproxy cfc="ajax" jsclassname="respond">

Now we need to write the javascript to make the magic happen.

  function showwhich(){
	  var r= new respond();
	  sforc=document.form1.country.value;
	  toshow= r.arestates(sforc);
	  if (toshow == true) 
	  	{
	  	//unhide dropdown, hide text box.
		document.getElementById("dd_state").style.display='inline',
		document.getElementById("type_state").style.display='none',
		document.form1.stateprovt.value=""
		}
	  else {
		//hide dropdown, unhide text box.
		document.getElementById("type_state").style.display='inline',
		document.getElementById("dd_state").style.display='none',
		document.form1.stateprovt.value=""
	  }
 
}

You’ll notice I’ve added a line to clear the value of the text field on each change. This is just idiot-proofing so you don’t have someone come in and enter text, then decide they really did live in the US after all. I have further idiot proofed by adding this code before my form processes:

<cfif isdefined("form.stateprov") and TRIM(form.stateprov) neq ''>
	<cfset use_state=form.stateprov>
<cfelseif isdefined("form.stateprovt") and TRIM(form.stateprovt) neq ''>
	<cfset use_state=form.stateprovt>
<cfelse>
 	<cfset runadd="no">
	<cfset message=message &"<br />The State/Province you entered is invalid.">
</cfif>

Again, I’m sure there are “prettier” ways to accomplish this, but this worked for me!

I was running this simple rename command on an xml response handler page… very, very simple, right?

<cffile action = "rename" source = "c:\inetpub\mysite\images\tn_0000.png" destination = "c:\inetpub\mysite\images\renamed.png">

But here was the error I was getting:

Attribute validation error for tag CFFILE. The value of the attribute source, which is currently c:inetpubmysiteimages tn_0000.png, is invalid.

Whaaat? where did all my backslashes go?? Well, I don’t know… I guess the bermuda triangle of Coldfusion. Either way, after some trial and error, I found the solution:

<cffile action = "rename" source = "c:/inetpub/mysite/images/tn_0000.png" destination = "c:/inetpub/mysite/images/renamed.png">

just change them all to forward slashes… it worked!