Using Facebook Comments Box with Umbraco

From today visitors can comment on articles on my page http://laikaslair.dk using Facebook Comments Box . It is a fast and easy way to extend user experience on your website.

There is one catch thou, in order to post comments, you must log in using your Facebook account. If you don’t have one you have to create one (c:

So why using it,.. ? well i have adopted this platform mainly for these three main reasons:

  • It prevents abuse like link stuffing, and spam.
  • Facebook accounts are made mainly by real people (c;  and it prevents people from hiding behind anonymity and making personal attacks on others.
  • Visitors have the option for sharing their comments with others, so my articles can be read by a larger audience.

Well i hope you are convinced (c: her’s how it is done..

Firstly you have to go to https://developers.facebook.com/docs/reference/plugins/comments/ and get a Comments Box code snipped. Follow the instructions and place it in your code. I my case I’ve placed it in a Masterpage or in Umbrao term a template.

To make the Comments Box page specific you have to get your current page URL. Umbraco provides you with tools to do just that. So you don’t have to wright any serverside code at all, just use the umbraco:Item .

<umbraco:Item field="pageID" runat="server" Xslt="umbraco.library:NiceUrl({0})" insertTextBefore="<div class='fb-comments' data-href='" insertTextAfter="' data-width='590'></div>" />

Now copy and paste your javasctipt

<script> (function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=xxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>

and you are done ,..  (c:

happy coding.

Detect Javascript

Oh-boy, there are still some paranoid people out here who disable javascript. I can relate to their problem, with all that advertisement, surveys and popups, but still com on,..
Well, i happend to like javascript, it helps me to improve usibaity and surveilens of users activity on my site. So i decided to make a landingpage for the unfortinate javascript-hating users. For that purpose i needed a way to discover if the visitors Javascript was disabeled.. But her’s the thing,.. how do you do it clint-side without javascript (c:
Well it is simple, just use the ‘<noscript>’ tag, as far as i know it is supportet by all of the current browsers. Place your markup inside one of those puppies,.. and you can do pretty much everything you want, like displaying a message

<noscript>
	<div>
		<h2>Turn it on</h2>
		<p>I know you have turned it off, yes i am talking about javascript,
                   turn it on plz.., becouse i want you to (O,~).</p>
	</div>
</noscript>

or a redirect, yes it is possible without javascript (c:

<noscript>
	<meta http-equiv="REFRESH" content="0; url=http://mysite.net/turniton.aspx">
</noscript>

So no beef there, don’t hate, spread love ..

Fieldset allways round corners

If you have you ever used fieldset in your web projects you will know that it looks different in every browser. BUMMER and if you try to style it it looses its round corners and highlights. Thats is so annoying. So i’ve decided to do something about it. Fielset now we wil all know your secrets. (c:
As far as I know, it’s impossible to solve this dilemma with CSS2 alone, so after some consideration I’ve decided to try with webkit and some other tricks as the last resort. And SUCCESS.. round corners in all browsers, I love it.
her’s what i’ve done.

To my CSS i’ve added following

FIELDSET
{
   padding:10px;
   border-color:Fuchsia;
   -moz-border-radius: 4px;
   border-radius: 4px; 
   -webkit-border-radius: 4px;
}

LEGEND
{
    text-transform:uppercase;
}

Round Fuchsia Corners, so pretty ,.. (c:

Releace of my own Umbraco based webpage.

For little bit more then the past month time I’ve been working on designing and developing my own webpage. For this task I’ve chosen Umbraco CMS engine, beacouse of it’s similarities with Sitecore, but allso because it is free to use. I’ve was pleasantly surprised on the helpfulness of the Umbraco community, and i like to contribute my knowledge to further Umbraco development by posting articles about it on my blog.

To differ my self from all the other mass-produced templated webpages outhere, I’ve designed and implemented my own look and feed for my webpage.
my webpage design
The main idea behind this webpage is to make a content driven webpage not a blog. I’ve written an article about how this webpage came to being and i am going to write further articles in the future on how i did it. More about the nuts and bolts of it all. (c: So sign up for an RSS feed, so you can keep up.

here are some highlights of the implementation.

  • youtube integration
  • Custom developed tag based article system
  • Lucene index search results
  • Tag and Related articles lists.
  • Umbraco based contact form(creates nodes in umbraco, so i can see a feed of all new items when logged in)

If you have any comment’s pleas tell me i wood like to hear your opinion.

XSLT bug, xslt removes html tags by it self

And this is a fact,.. I often use  HTML  when i make my renderings for Sitecore.  If yore not care-full,.. you can end up with a site which is not W3C compliant or even worse if it messes up your design,..

So her’s the problem,. if you type something like this in your XSLT
<div class=”separator”></div>

XSLT will only render the start tag, like so
<div class=”separator” >
Bummer,..

the only solution for this is to place some kind of content inside your empty tag
like a white space,.. But be careful to put &nbsp; inside your XSLT it will result in error. Use &#160 ; in stead (c:

happy coding

EDIT:
Another solution for this was proposed by Richard Willis, thanx body
change your <xsl:output method=”xml“>  to <xsl:output method=”html“>
that will instruct the render to format your output like HTML, like we want to..

mshtml – changing innerHtml of an element

This has turend out to be a wery pesky problem,.. i just wanted to add to javascript tags that i was reading from another web-page.. But as it tuns out you cant just do it,.. So if you do something like this ,.. it woud not work ,.. innerhtml will not be updated.

HTMLScriptElementClass script = (HTMLScriptElementClass)html.createElement("script"); 
script.innerHTML  = "/**/";

So i decided on another approach (c: If i could not access it, i would make my own,..

//get the html element 
HTMLScriptElementClass script = (HTMLScriptElementClass)html.createElement("script");
script.setAttribute("type", (object)"text/javascript", 0);
script.setAttribute("id", (object)id, 0);
((HTMLBodyClass)html.body).appendChild(script);
// make your own element which holds the changed element
object oScript = html.GetType().GetMethod("getElementById").Invoke(html, new object[] { (object)id });
oScript.GetType().GetProperty("text").SetValue(oScript, "/**/", null);

// remove the old element  to the DOM
html.removeChild((HTMLScriptElementClass)html.getElementById(id));

// insert your own element in to the DOM 
html.Document.Body.AppendChild (element);

well that’s how I did it ,.. and if you are wondering how to read DOM from other pages using .Net take a look at this ,.. (c:
http://cambridgecode.blogspot.com/2009/11/simple-html-parsing-code-using-mshtml.html
Cheers and out.

CSS – full screen overlay layer

Often when you display a gallery of pictures, you want to dim the website in to the background. I have tryed implementing several solutions based on placing a html element on top of all the others by setting position to absolute, and height and width to 100%. That worked ok as long as the page was no bigger than the screen. But when i scrolled the page i noted that my absolute layer was attached to the top of the page,.. so it scrolled with the page,.. so that was clearly not the way to go,..
So here’s what i came up with to solve this,..

.dim
{
			height:100%;
			width:100%;
			position:fixed;
			left:0;
			top:0;
			z-index:1 !important;
			background-color:black;
}

and it worked as a charm,.. position fixed did the trick,. woohoo,..
to make this overlay more fancy you can add opacity to it by setting a
semitransparent png pixel to the background(works in most browsers)
or do it the old fashioned way

filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75;      /* khtml, old safari */
-moz-opacity: 0.75;       /* mozilla, netscape */
opacity: 0.75;           /* fx, safari, opera */