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.

MVC – how to debug what your form is Posting

MVC is the new battleground for .net based Content Management Systems. Umbraco use it, Sitecore use it. So debugging is essential for finding head and tail in sometime illogical code behaviours.

I like to use Firebug Console to quickly check what my forms are POSTing back to my. Controller.

You can start by finding your Form with jQuery syntax and a bit of javascript wizardry

if there is only one form on your page, type following in the console window.

$('form').serialize()

if there more then one use the array of elements returned by jQuery to find your form.

$($('form')[1]).serialize()

The form is highlighted by the Firebug, so you know when you have found it.
Happy coding  (c:

To use @model or not, in umbraco Razor makroes

Making navigation makroes is allays fun. And using the latest tools like MVC makes is even more exiting. I’ve been using XSLT for this kind of tasks like forever and you can almost say since the beginning of my web developer days.  I’ve tried experimenting with facing out XSLT by using repeaters and user- controls, but i allays ended up using Xpath to getting the things done, a  hard habit to break  (c:
In my recent projects I’ve started exploring the new and exiting Razor universe.  With it’s own challengers ,. like this one..

I wanted to get all the  unhidden first level nodes,

var home = @Model.AncestorOrSelf(2); 
var subItems = home.Children();
@foreach (DynamicNode item in subItems)
{
  //i've made a helper method to get values from nodes
string naviHideValue = umbracoExtensions.GetValueFromNode(item ,"naviHide");
if( naviHideValue )
{
//Do stuff here
  } 
}

That is very cumbersome and you have to traverse the nodes to filter them out.  I wanted to filter out the unwanted nodes before the for loop but that was not possible,  you just cant use lambda expression  on dynamic nodes, and i didn’t want to cast all my dynamic nodes,.. they are after all dynamic  (c: So dont be suprised if you get one of these “Error 237 Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type ” bad boys.

The solution came in a form of “uComponents.Core.uQueryExtensions”. the uComponents package is a must, i really approve those guise so many useful datatypes.. Well back to the subject  uComponents  is a topic of its own, that i promise  i’ll blog about in the future.

@using uComponents.Core
@using uComponents.Core.uQueryExtensions

@inherits DynamicNodeContext
@{

var homePage = uQuery.GetCurrentNode().GetAncestorOrSelfNodes().FirstOrDefault(node => node.Level() == 1);

var subItems = homePage.GetChildNodes().Where(node => node.GetPropertyAsBoolean("naviHide")); 
  @foreach (var item in subItems)
  {
    //do your thing
  }
}

so @model gets you the current node but i lack my Linq, and i did start writing extension methods before i found about the “uComponents.Core.uQueryExtensions” methods anyway. So until i learn otherwise i will use uQueryExtensions and linq for my filtering.

happy programming (c:

Typo3 first glance

Typo3 is one of mere popular CMS that are out there, although it’s made with PHP (c;, I decided to give it the benefit of a doubt.

I’ve done some PHP programming in the past, but be prepared to learn some Typoscript when you start. I’ve done some research on what’s up and down in this matter.

Her’s my list of Typo3 goodies.

Must read
http://typo3tutorials.com/index.php?id=22 (only the best walk through a Typo3 website build)
http://news.typo3.org/uploads/media/doc_tut_quickstart.pdf  (getting started with typo3 4.5, will take you through the paces of the (as today) newest Typo3 version)

http://www.sk-typo3.de/Typoscript-Reference.223+M5e851e84480.0.html?&tx_rlmpofficedocuments_pi1%5BshowPage%5D=5&tx_rlmpofficedocuments_pi1%5Bview%5D=single

Documentation:
http://en.wikipedia.org/wiki/TYPO3 (typoscript)
http://wiki.typo3.org/
http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/4.5.1/view/ 

BLOGS
http://typo3blogger.de/category/tutorial/page/2/  blogs to read
http://www.fabrizio-branca.de

Videoers
http://typo3.org/documentation/videos/wmv-format/
http://www.wuala.com/wowawebdesign/TYPO3-Kurs?page=1  (in german)

Templatemaking

http://youtu.be/jiTvqtZYWGs () 

http://www.mail-archive.com/typo3-english@lists.netfielders.de/info.html

ready to use templates
http://www.webworking-blog.de/typo3/typo3-templates/

One downside is that lots of information about Typo3 is in German, so use of Google translate is highly recommended (c:

Now lets se what Typo3 is made of.

 

Sharepoint 2010 – How to create a test environment for free

Sharepoint is one of the main pillars in Microsofts web/intranet strategies.   So I decided to poke around and take a look at the SharePoint 2010 Server.  I’ve had run ins with sharepoint 2007 before, but now i wanted to setup some kind “sandpit” environment on my home laptop. Now i don’t have the means to buy sharepoint or any other related software, i just wanted to play. (c:

And that is possible. The cool thing is that  Microsoft provides trail version of most of its software with astounding 180 day trail period. More then enough time you need to get acquainted with the thing.  There’s is a catch thou, to download trail software you have to be registered Microsoft- technet  user.  Of course if you are paranoid you would’t register you self, because Microsoft are evil he he,..  But no more fulling around ,.. lets get to busies ,..

Go to the http://technet.microsoft.com/ and login. If you are not a user create one here, no biggie.  When that’s done  you have to prepare the necessary software (iso files to be prefered)

• Get sharepoint 2010 from here http://technet.microsoft.com/en-us/evalcenter/ee388573.aspx
• Get windows 2008 server here  http://technet.microsoft.com/en-us/evalcenter/dd459137.aspx
• Get VM Virtual BOX here  https://www.virtualbox.org/
• If you have the Office pack, you can use it but it is not required (2010 is best all thou 2007  can be used with limited compatibility with SP2010 ).

Now but you will probably say VM Virtual BOX wtf.. mickrosoft has made a complete 2010 Information Worker Demonstration and Evaluation Virtual Machine (SP1) with all that you need Sahrepoint 2010, Office and windows  Server 2008 just download and use ,..  yea been there done that. But i was a bit disappointed.

Her’s a quote from the bottom of that page “The Virtual Machines contained in this package are 180 day evaluations. Additionally they will require activation, or re-arming, after a 10 day period after which they will shut down after 2 hours of continuous operation.” Not quite what i was looking for..

So start by installing  VM Virtual BOX, If you haven’t played with Virtual box before  just follow this tutorials

1. http://youtu.be/XgE4BHtLfcY
2. http://youtu.be/V4Rc-wKvIwE

By now you have installed a trial version of windows 2008 server on your VM Virtual BOX, time to proceed to installing the required software

1. (not mandatory if you just want to play) Installing Active Directory by running DCPROMO command in the start> run feature.
2. (not mandatory) Install office pack.
3. Install Sharepoint Prerequisites (this will install SQL Server and IIS)
4. Install Sharepoint Server (her’s a good tutorial )

And there you have it, a free playground at your fingertips. You could install further software to enhance your playground, like visual studio (c:

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 ..

Add Styles to Umbraco TinyMSE editor.

As it is when you install a clean Ubraco site, some setup is required to add the functionality you wanted. Lets say you want to add different style to umbracos WYSIWYG editor. Making users able choosing font-styles just like in word. Her is what you have to do to enable that.

Firstly, know your css.

h1, h2
{
    color:BLue; 
    font-size:24px; 
    font-family: sans-serif; 
    margin-top:0;
    margin-bottom:0;
} 

h3, p4
{
    color:Green; 
    font-size:18px; 
    font-family: sans-serif; 
    margin-top:0;
    margin-bottom:0;
} 

p
{
    color:Gray;
}

Go to “Setting” section and look under “Stylesheets”
here add a new style-sheet by right-clicking on the “stylesheets” folder
I’ve named mine style-sheet “adminStyle”

Then add your styles by by right-clicking on “adminStyle”. Remember to give your styles logical names
so users will recognize them, when editing content.

When a style is created click on it and copy everything within the brackets in to the style. You can only add one style at a time, so don’t copy all your CSS in there at ones ,. .(c:

To finish up you need to enable your newly created “adminStyle” style-sheet in the richtext editor data type.
you can find it in umbraco under developer > data types folder. After cklicking on it look for your style-sheet name under “Related stylesheets”

Check it and save and you are done, Then take a look at the result in your Content and enjoy, the bliss of success. (c:

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:

Wondering why there are no labels on richtext editor in umbraco ?

I must admit that it is wired that if you use richtext editor out of the box in Umbraco 4.5x you would be suprized to find that labels are missing on all rich-text editor fields. It tok me a while to realize that th problem was in the setup of the rich-text editor datatype,.. it was quite Dough moment when i realized it,.. (c: To setup,.. just go to the developer section and find and click on the datatype folder. Then scroll down and click on the “Richtext editor” datatype to change the settings. Look for “Show label” checkbox and check it ,.. thats it,.. and of course don’t forget to save (c:

How to push a button from serverside using ScriptManager and UpdatePanel control.

I was playing around with an idea that it could be fun to press client-side logoff button from the server-side. Like if you dont push the logoff button i will push it for you,.. noition..(c: To achive that i devised a way to “inject” javascript in to an UpdatePanel using ScriptManager.. so cool,.. it is kind of nougty i guess..
her’s how it’s done:
aspx

<asp:ScriptManager ID="scmAJAX" EnablePartialRendering="true" runat="server"/>
<asp:UpdatePanel ID="upnl_Mask" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:label ID="lbl_Mask" runat="server"></asp:label>
</ContentTemplate>
</asp:UpdatePanel>

aspx.cs

string jscript = @"$(window).ready(function (){ $("".btnLogoff INPUT"")[0].click();});";
ScriptManager.RegisterClientScriptBlock(lbl_Mask, lbl_Mask.GetType(), "youLoggedOffDoode", @"javascript:" + jscript, true);

lbl_Mask.StatusText = "You are termibated"; // sara Coner sead that
upnl_Mask.Update();

i am using JQuery in my javascript,. but i bet you could do something like this “document.getElementById(‘logoff_btn’).click()” to click the button,.. but then you have to get your asp:button ClienID,.. like this “document.getElementById(‘” + logoff_btn.ClientID + “‘).click()” .. the DOM ready event is a Whole other story..