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.

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:

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:

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:

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.

How To make Search for Umbraco site with Lucene.Net, Examine and XSLT

Being able to search content in a website is probably the most common and most important feature of any website. And there are a millions ways to do this,.. so why use Lucene indexing or Eximine for that matter..   If you have been looking inside the umbraco bin directury you will notice a wary nice Lucene.Net.dll file. This is one of the reasons for why i chose  Lucene indexing, because it is already there (c:
Umbraco uses Lucene indexing to search it self, if you’ve ever wondered where those files hidden, they’re in the “/data/_systemUmbracoIndexDontDelete” folder.  There you’ll find at least one .cfs file, a deletable and segments file.

In my setup i wanted to separate my indexes from the ones Umbraco generates,  so -i chose  Examine to do the heavy lifting, of generating indexes on so on.  Examine has loads of useful features, i will not recite them all but you can read about them here. So I downloaded the demo site from the FarmCode.com to take a closer look at the Examine set up, and because i was curious.. (c:

After a quick run-thought the demo-site and its macros and other code,  i copied all the related DLL.

  • Lucene.Net.dll(lates version)
  • Examine.dll
  • UmbracoExamine.dll
  • UmbracoExamine.Contrib.dll

And completed the setup, which can be found here on the FarmCode.com site.

I’ve noticed that the UmbracoExamine.Contrib.dll han an XSLT extension, so i added  it to my xsltExtensions.config

<?xml version="1.0" encoding="utf-8" ?>
<XsltExtensions>
        <ext assembly="/bin/UmbracoExamine.Contrib" type="UmbracoExamine.Contrib.XsltExtensions" alias="examine" />
</XsltExtensions>

and wrote a small XSLT macro to test it.

<xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:msxml="urn:schemas-microsoft-com:xslt"
        xmlns:examine="urn:examine"
        xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib"
        exclude-result-prefixes="msxml examine umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib ">
<xsl:output method="xml" omit-xml-declaration="yes"/>

<xsl:param name="currentPage"/>
<xsl:template match="/">
  [[<xsl:value-of select="examine:Search('something')"/>]]
</xsl:template>

But it resulted in an “Error parsing XSLT file: \xslt\SearchPosts.xslt” error.. grrr,.. Nothing i did could make it good again,.. the XSLT code was pretty simple and the xsltExtensions.confiq was carrect.  As it tuns out the “UmbracoExamine.Contrib.dll” is not released yest (c:  thanx Lee

So in stead of getting frustrated and angry i’ve decided to write my own SearchExtension Class ,..  (c: Her is the busines end

//remember to add these (c:
//using Examine;
//using UmbracoExamine.SearchCriteria;
//using UmbracoExamine;
//using Examine.SearchCriteria;

public static XPathNodeIterator Search(string searchTerm, string field)
{
      return Search(searchTerm, field, "MySearcher");
}

public static XPathNodeIterator Search(string searchTerm, string field, string searchProvider)
{
//get query string search param & error check
if (string.IsNullOrEmpty(searchTerm)) return null;
var criteria = ExamineManager.Instance.CreateSearchCriteria(IndexType.Content, Examine.SearchCriteria.BooleanOperation.Or);

ISearchCriteria filter = criteria
   .Field("bodyText", searchTerm.Fuzzy().Value)
   .Or()
   .Field("menuTitle", searchTerm.Fuzzy().Value)
   .Compile();
XDocument node = new XDocument();
XElement content = new XElement("nodes");
//get the search results from the mysearch provider
foreach (SearchResult result in ExamineManager.Instance.SearchProviderCollection[searchProvider].Search(filter).AsEnumerable().Where(res => (res.Score * 10) > 2).OrderBy(res => res.Score))
{
   XElement element2 = new XElement("node");
   XAttribute attribute = new XAttribute("id", result.Id);
   XAttribute attribute2 = new XAttribute("score", result.Score);
   element2.Add(new object[] { attribute, attribute2 });
   foreach (KeyValuePair<string, string> pair in result.Fields)
   {
      XElement element3 = new XElement("data");
      XAttribute attribute3 = new XAttribute("alias", pair.Key);
      XCData data = new XCData(pair.Value);
      element3.Add(new object[] { attribute3, data });
      element2.Add(element3);
   }
content.Add(element2);
}
node.Add(content);
return node.CreateNavigator().Select("/");
}

After you have copied your DLL to umbracos bin dir and added it to the  xsltExtensions.config like describe above,.. It’s time to write the XSLT macro,.. this is my version (c:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxml="urn:schemas-microsoft-com:xslt"
xmlns:mySearch="urn:mySearch"
xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets" xmlns:tagsLib="urn:tagsLib"
exclude-result-prefixes="msxml mySearch umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib ">
<xsl:output method="xml" omit-xml-declaration="yes"/>
<xsl:param name="currentPage"/>
<xsl:variable name="currentKeyWord" select="$currentPage/data[@alias='KeyWords']"></xsl:variable>

<xsl:template match="/">
   <xsl:variable name="searchResult" select="mySearch:Search(string($currentKeyWord),string('KeyWords'))" />
   <xsl:if test="count($searchResult/nodes/node) != 0">
      <ul>
      <xsl:for-each select="$searchResult/nodes/node">
         <xsl:sort order="descending" select="./data[@alias = 'updateDate']"/>
            <li>
            <a href="{umbraco.library:NiceUrl(@id)}">
            <xsl:value-of select="./data[@alias = 'menuTitle']"/>
            </a>
            </li>
      </xsl:for-each>
      </ul>
   </xsl:if>
</xsl:template>

Notice that I am using ./data[@alias = ‘updateDate’] to probe for the fields stored in my LuceIndex.  Thats sums it up (c:

Happy coding..

How XSLT macro can be used inside an umbraco richtext editor

I’ve been trying to make a simple XSLT macro, that can be used from the macro dropdown in Umbraco rich text editor. And this has proved somewhat more interesting that i have anticipated.

Making macroes in Umbraco is pretty simple and strait forward, just go under Development in Seactions and right click “XSLT files” folder in the tree menu. Choose create from the menu and type in the name of the XSLT, press ok and you are in business. If you haven’t unchecked Create macro, you’ll find your macro in the “Macros” folder, under the same name as your XSLT. Easy as eating pancakes right.. (c:

So her’s where the fun begins ,.. to make this usable from the reachtext editor, you must check the “Use in editor” chekerbox under “macro properties” tab. This is the easy setup part.

You can use your XSLT macro as it is in your .Net code by calling it like this

<umbraco:Item field="macroNameHere" runat="server"></umbraco:Item>

but here is the dangerous bit,.. If you are reading it in through XSLT,  from your richtext field,  like this

<xsl:value-of select="$currentPage/data[@alias = 'bodyText']" />

the Macro will never be rendered and the only thing you will get is this bit of code rendered as common text, Bummer )c:

<?UMBRACO_MACRO  macroAlias="macroNameHere" />

Now befour you will start tearing hair from your head, this is what you could do,.. (c:

<xsl:variable name="content" select="$currentPage/data[@alias='bodyText']"/>
<xsl:value-of select="umbraco.library:RenderMacroContent($content, $currentPage/@id)" disable-output-escaping="yes"/>

By using the RenderMacroContent you are forcing umbraco to render your macro which is allready represented by its tag in the reachtext field.

another apprach is to use the folowing code snipped witch will enchure to render our XSLT Macro automatically

<xsl:value-of select="umbraco.library:Item($currentPage/@id,'bodytext')" />

It’s less code compared to the other method, and as another small bonus the Item-extension makes sure that you can edit the content i canvas-mode as well. That option is normally not possible when rendering the content through XSLT  (c:

happy days,..