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.

Advertisements

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:

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

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

Get YouTube video JSON Data using JQuery and Ajax

Earlier I’ve written an article on how t get Youtube data using JSON and it was a blast, but i had a litlle cosmetic drawback. You had to put script tags in your markup.   It works but it’s not pretty (c: . One of the easiest ways to load JSON data onto our website is to use the $.ajax(), which is a very useful JQuery method.  Her’s my way of doing it.

      $.ajax({
            type: "GET",
            url: "http://gdata.youtube.com/feeds/users/[USERNAME]/uploads?alt=json-in-script&format=5",//generateJSonPlayListCallBackUrl(),
            cache: false,
            dataType:'jsonp',
            success: function(data){
                showMyVideos(data);
          }
        });

I’ve taken the showMyVideos() from Google’s Json documentation article it’ will display a list of video titles from a given Youtube  users Chanel.  To use this code snippet just replace [USERNAME] with a Youtube user name, and put inside a JS file (c: Take notice of dataType:’jsonp’, thats the important bit. This allows us to retrieve youtube data back to our domain (c:

well thats it for to day,.. stay frosty people,..

Workaround for chekcbox list validation

If you have tried to add a validator like a RequiredFieldValidator to a checkbox list asp control, you will de surprised to discover that that is not possible, and will result in error if you try. To counter this you can do two things extend checkbox list control ore make a custom validator. I chose the second solution, to keep the code to a minimum. Her’s a quick setup. I am taking advantage of OnServerValidate attribute of the CustomValidator control.

<asp:CustomValidator id="CustomCheckboxlistValidator1" runat="server"
OnServerValidate="CheckboxlistValidate"
ControlToValidate="MjauCheckboxlist "
ErrorMessage="One or more checkboxes must be chosen">
</asp:CustomValidator>

CheckboxlistValidate is the name of a javascript function that will hold the validation logic.

<script language="javascript">
function CheckboxlistValidate (oSrc, args) {
var checkboxList= document.getElementById("<%=MjauCheckboxlist.ClientID%>");
var InputElements = checkboxList.getElementsByTagName("input");
for (var i = 0; i < InputElements.length; i++) {
var input = InputElements[i];
if (input.checked) {
args.IsValid = true;
return null;
}
args.IsValid = false;
}
}
</script>

The JavaScript code is pretty simple. checkboxList variable holds the Html element with all checkboxes. From that you can derive all Imput elements and check them if they have been chosen. args.IsValid is used to set validation status. That’s it. One thing to remember thou the javascritp function must have to parameters,… oSrc – objectSource and arg – arguments. That’s about it (c:

Happy coding

Get YouTube video Data via JSON

I will start with one big thanks to peaple from goole and their documentation of Youtube API (c: thay rock ,..
Well, I wanted to get the title of a youtube video by using javascript, and this proved to be very dificult until i found this article
It apears that Youtube Data API alows you to get all the data you need, title, thumbnail You name it, well read the article (c:

ony how i only wanted the title and this is how i did it ..
first add you function.

<script type="text/javascript">
 function FeedCallback( data )
 {
 //get title from YouTube Data API via JSON
   document.getElementById('Title').innerHTML = data.entry[ "title" ].$t;
 }
 </script>

Now this is the busines end of it all

 <script type="text/javascript" src =
 "http://gdata.youtube.com/feeds/api/videos/<yourVideoID>?v=2&amp;alt=json-in-script&amp;callback=FeedCallback"
 </script>

This bit is described her under how it works, here are the bolts and bits of this url

<yourVideoID> is your video ID (c:
v=2 instructs the server to use version 2 of the Youtube API to handle this request
alt=json-in-script instructs the server to send the data in JSON format wrapped inside a call to the callback function; this method is used to avoid crossdomain restrictions imposed by modern browsers.
callback=FeedCallback is the name of the callback function that will handle the JSON data.

that is sweet (c:

P.S here’s some more http://code.google.com/intl/da-DK/apis/youtube/2.0/developers_guide_json.html