Blog posts by Hao Peng2011-12-01T18:20:30.0000000Zhttps://world.optimizely.com/blogs/Hao-Peng/Optimizely WorldFacebook Event Attendance Visitor Group Criterion – Part II<p>If you have read Part 1 of this article and understood everything there, thanks, bravo and well done! You’ve gone this far so why not continue and finish your reading here. </p> <h2>Facebook App and Development</h2> <h3>General Principal:</h3> <p>A Facebook App is the central concept in order to integrate your site with Facebook. Your website does not know anything about Facebook user profiles, but your App does. The relationship between the site and the Facebook App is established when you create an App. In your website, your code will call Facebook APIs to delegate requests (e.g. getting user events information) to the mapped App. The App will get the information and serialise it to the response using JSON. Your website code will then be able to use capture this response as most commonly JsonArray or JsonObject objects. </p> <p>To elaborate, for instance, when your website code sends a request to the Facebook App to request all the Facebook groups a user has joined, the screenshot below shows what is expected in the response. </p> <p><a href="/link/101933cb3d3e4354874fb36619da5405.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="/link/2b7497341149475882a9aab6137e29ad.png" width="472" height="506" /></a> </p> <p>This is a serialised JSON string representing a JsonObject object that your website can use. In this case the JsonObject has two key-value pairs. The key for the second pair is “paging”, and its value is to retrieve next 5000 groups the user. More importantly, the key for the first pair is “data”, and its value is an IList object, which can be casted to IDictionary<string, object>. Each entry of this dictionary object represents a Facebook group the user belongs to. </p> <p>Sounds complicated? Here is the code to get all the Facebook events a user joined. </p> <p align="left">FacebookClient fb = new FacebookClient(accessToken); <br />JsonObject events = (JsonObject)fb.Get("/me/events"); <br />IList<object> data = (IList<object>)events["data"]; <br />IDictionary<string, object> dicEvents = data.Cast<IDictionary<string, object>>(); </p> <p align="left">So not complicated, is it? </p> <h3>Create a Facebook App</h3> <p>In order to make the above code work, you will need the access token where your App can use to access the user’s profile. In order to get the access token, let’s first take a look at how you create and configure your App. For those who want to cry out “just come to the point”, no, we need to save the best till last. </p> <h4>Step 1: Go to this URL</h4> <p><a href="https://developers.facebook.com/apps">https://developers.facebook.com/apps</a> </p> <h4>Step 2: Create an App</h4> <p>Give it a display name and name space. The name space will be used to form the URL to access this App which means it should be unique. </p> <p>Once the App is created, an App ID and App Secret will be generated. Together, they identify and validate a Facebook App. When you use Facebook .NET APIs (e.g. FacebookClient class in the above example), these two values must be set in the web.config of your site. </p> <h4>Step 3: Configure the basic settings of the App</h4> <p><a href="/link/5e309d7c357a45fbba642323ea8101f1.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="/link/60174535e3f84b9fb73522231d6a387b.png" width="528" height="495" /></a></p> <p>App Domain and Site URL: You need to make sure these use your website domain name as this establishes the link between the Facebook App and your website. My habit is to do all development on my local machine first, so in this case I use alloy.local as the App domain. </p> <p>We need to make sure “App on Facebook” is checked. The value of the Canvas URL is a CMS page you want to promote, and that page should contain some personalised blocks only visible to the “event attendees” visitor group you set up. What it means is that when you access the App page (<a href="http://apps.facebook.com/alloylocal">http://apps.facebook.com/alloylocal</a>), the Canvas URL will be loaded into an IFRAME. </p> <h4>Step 4: Configure Auth Dialog</h4> <p><a href="/link/2f9a4e7ddbc747be9d9384f6e1e691bc.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="/link/602e50482acc4e30aa576af135d3c596.png" width="535" height="312" /></a></p> <p>These settings such as an explanation for permissions will be displayed to the user when your Facebook App is seeking user’s approval to access their profile. </p> <h4>Step 5: Advanced settings</h4> <p>Two settings in this section can be considered. First one is that you can mark your App to run in a Sandbox mode so that only yourself as an App developer will be able to use it. This is useful when you are still at the stage of developing and/or testing your App and do not want the general public to access the App. Second setting is the Canvas Width and Height. You can either set a fix width, which means the width of the IFRAME will be fixed, or set to fluid which means the width of the IFRAME will be dynamic depending on the width of its source. In the screenshot of Part I of this article, you can see I set the canvas width to fluid, and as the width of the AlloyTech site is quite wide, so the IFRAME ended up taking the most part of the entire screen. </p> <h4>Step 6: Create test users</h4> <p>Earlier this year Facebook introduced a user interface to create test users. Very useful as you do not want to go through the tedious process creating a bunch of real Facebook users (just think about how many new email addresses you have to register!) </p> <p>The Roles section of your Facebook App is where to configure test users. It would be good to create at least a couple, one of which will be giving permission to this Facebook App to access its user profile, and the other one won’t. See the screenshot: </p> <p><a href="/link/641d71b404b349319a1981611937ab39.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="/link/075506315de54095b6bb9e233a79ad8d.png" width="556" height="326" /></a></p> <p align="center">Add test users </p> <p>From this screen, you can switch to the test user, or you can to select “modify” of the above screen to load the following screen to do it there. This modify screen also gives you options to make test users friends, add test user to other Apps and remove the test users. It also gives you a link to display the access token if this test user has authorised the App when you created it, which again, needs more discussions in the next few minutes. </p> <p><a href="/link/159c1962f2904cffb182af3446b8405f.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="image" border="0" alt="image" src="/link/158ea9d35431453094d4e3ab4e72a6d0.png" width="507" height="157" /></a></p> <p align="center">Modify Test Users </p> <h3> </h3> <h3>User Access Token</h3> <p>Although Facebook is renowned not treating people’s privacy seriously, there is still one thing it must do – that is, get user’s permission when a third party App tries to access its profile. For this reason, an extra step must be carried out by web developers, that is, load the auth dialog and get the access token. Then the access token can be used in Facebook .NET API to get user’s profile. </p> <p>Let’s see how it’s done in code </p> <p>string[] extendedPermissions = new[] { "offline_access", "user_events" }; </p> <p>var oauth = new FacebookOAuthClient { AppId = "288150991224591", RedirectUri = new Uri("http://alloy.local/") }; </p> <p>var parameters = new Dictionary<string, object> <br />{ <br />{ "response_type", "token" } <br />}; <br />if (extendedPermissions != null && extendedPermissions.Length > 0) <br />{ <br />var scope = new StringBuilder(); <br />scope.Append(string.Join(",", extendedPermissions)); <br />parameters["scope"] = scope.ToString(); <br />} <br />Response.Redirect(oauth.GetLoginUrl(parameters).ToString());</p> <p>  </p> <p>In this Facebook Event Criteria, we have two types of Facebook users. One is the user created by the marketing department to carry out Facebook marketing activity, which we will have to authorise the App to retrieve a list of its events, and fill in the drop down list (see Part I of this article). The other is the general public, and each individual site visitor needs to authorise the App to access their Facebook event information in order to tell whether they belong to the visitor group. For testing purpose, we also need to authorise the App to access the test user’s profile. </p> <h4>To be authorised by the marketing user</h4> <p>Using the code example above, the user will be redirected to an URL in the form of <a href="http://alloy.local/#access_token=AAAABBDFDSFDxxx">http://alloy.local/#access_token=AAAABBDFDSFDxxx</a>. Copy the access token value from the browser’s address bar, save it for future use (web.config setting) </p> <p>One important thing to note here: by default, when a user authorises a Facebook App, it only allows the App to access its basic public information like username, first name, etc. The events information is not included. That is why we will need to pass in an extra parameter “scope” containing the extended permissions. In this case it needs user_events permission, and because this is a trusted user, we want to get the offline_access permission to make the access token long-standing (see Part I of the article). </p> <p>For a full list of permissions, go to this reference link: </p> <p><a href="http://developers.facebook.com/docs/reference/api/permissions/">http://developers.facebook.com/docs/reference/api/permissions/</a> </p> <h4>To be authorised by the site visitor</h4> <p>The same piece of code can be used, but in this case, it is unreasonable to request offline access In fact, if some Facebook App wants that access level from me, I would click “report this app” without thinking, as if I change my mind later it would be pretty hard to de-authorise that App, and worse, that site could store this token in their own database, then it’s like I’m exposed naked. </p> <p>For that reason, we only want to get a temporary permission to access the site visitor’s user events information. Just remove offline_access from the extended permission array. </p> <p><b><font size="1">Facebook.aspx</font></b> </p> <p>This is an ad hoc web form that can be deployed to the webroot. It will first execute the above code to load the auth dialog for the user, and once the user approves the App, redirect the user to the Facebook App URL (<a href="http://apps.facebook.com/alloylocal">http://apps.facebook.com/alloylocal</a>). A link can be created within CMS to point at this web form (<a href="http://alloy.local/facebook.aspx">http://alloy.local/facebook.aspx</a>). Then if the user has joined the selected event, she should see the personalised blocks within the IFRAME! </p> <h4>To be authorised by the test user</h4> <p>You have seen how you authorise the app when you create a test user. But again, by default, user events information is not included. Unfortunately you will not be able to log in as the test user from the auth dialog. The only way to log in as the test user is to go to the App, Modify Test User screen to switch to it (see previous screenshot). </p> <p>There is an easy workaround I used – firstly you need to switch to the test user (which will log your real user off). Then, keep the session open (do not close your browser) and just open a new tab in the browser, and manually type in the URL of the auth dialog with the extra user_event permission. The format is like this: </p> <p><a href="http://www.facebook.com/dialog/permissions.request?app_id=288150991224591&display=page&next=http%3A%2F%2Falloy.local&response_type=token&perms=user_events">http://www.facebook.com/dialog/permissions.request?app_id=288150991224591&display=page&next=http%3A%2F%2Falloy.local&response_type=token&<b>perms=user_events</b></a><b></b> </p> <p>Now there you go! </p> <p>  </p> <h2>Other minor things to consider:</h2> <ul> <li>You can create a Facebook Page for your company and very easily add the Facebook App to your Facebook Page. </li> <li>You can go further to enable Mobile Web for your App. When using an IPhone, IPad or Adroid, they can have a better mobile experience. The principal is the same and you can try EPiServer Mobile Pack. </li> <li>Multilingal: there is a language file in this solution which needs to be deployed to the lang folder. It is referred by the Model class (FacebookCriterionModel.cs) </li> </ul> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:d5a0f7bd-f1d0-49db-a44b-e3a6bb1b70b9" class="wlWriterEditableSmartContent"><p> <a href="/link/c5e125c3bf9440968afc28045e8bc11d.zip" target="_blank">Source code and binary can be downloaded from here</a></p></div> <p>. </p> <h2>To Set up and Test:</h2> <p>Use EPiServer Deployment Centre to install a module from zip files (select FacebookEventCriterion.zip) </p> <p>Create a Facebook app, set up site domain, site URL, canvas URL, and auth dialog settings. The canvas URL should point at a page of the EPiServer site. Once created, APP ID, App Secret, and APP URL will be generated and should be used in the next step. </p> <p>Update web.config:</p> <blockquote> <p><configSections></p> <p><section name="facebookSettings" <br />                   type="Facebook.FacebookConfigurationSection" /></p> <p></configSections></p> </blockquote> <blockquote> <p><facebookSettings appId="Your Facebook APP ID" appSecret="Your Facebook APP Secret" /> <br /></p> <p> </p> <p><appSettings> <br /><add key="FacebookAccessToken" value="Facebook Permanent Access Token"/> <br /><add key="FacebookAppUrl" value="Facebook App URL"/> <br /><add key="FacebookPageUrl" value="http://your.domain/facebook.aspx"/> <br /></appSettings></p> </blockquote> <blockquote> <p>  </p> <p><episerver.shell> <br /><protectedModules> <br /><add name="Criteria" resourcePath="~/"> <br /><assemblies> <br /><add assembly="FacebookEventCriterion" /> <br /></assemblies> <br /></add> <br /></protectedModules> <br /></episerver.shell></p> </blockquote> <p>FacebookAccessToken needs to be generated using Source/GeneratePermanentToken.aspx. This file should not be deployed to the webroot, and should only be used by a developer. Before running, update GeneratePermanentToken.aspx.cs to match the APP ID and Your Site URL specified in the facebook app. </p> <p>Create a Visitor Group using Facebook Event Criterion. The events available from the dropdown are all events that the marketer's Facebook user is attending. This Facebook user is also used to generate the permanent access token in the previous step. </p> <p>On the page where the Facebook app's canvas URL points at, add some content just for the visitor group created in the previous step. </p> <p>Create a link at somewhere obvious of the site, linking to http://your.domain/facebook.aspx. This will authenticate the site visitor's Facebook user, and let the Facebook user authorise your Facebook app to access information of the events she is attending. Then it will redirect the site visitor to the Facebook app to view the personalised content. </p> <p>Also, provide a link on the canvas page, linking to the URL of the Facebook event. Once the site visitor's Facebook user attends that event, she should see something different on the Facebook app!</p> <h2>Reference reading </h2> <p>Magnus Rahl’s Richer UI for Custom Criteria </p> <p><a href="http://world.episerver.com/Blogs/Magnus-Rahl/Dates/2011/3/Richer-UI-for-your-custom-Visitor-Groups-criteria/">http://world.episerver.com/Blogs/Magnus-Rahl/Dates/2011/3/Richer-UI-for-your-custom-Visitor-Groups-criteria/</a> </p> <p>Paul Smith’s Custom View for Criteria </p> <p><a href="http://world.episerver.com/Blogs/Paul-Smith/Dates1/2011/4/Providing-a-custom-view-for-your-Visitor-Group-criteria/">http://world.episerver.com/Blogs/Paul-Smith/Dates1/2011/4/Providing-a-custom-view-for-your-Visitor-Group-criteria/</a> </p> <p>Dan Matthews’ Pulling Facebook Events into EPiServer </p> <p><a href="http://world.episerver.com/Blogs/Dan-Matthews/Dates/2011/9/Pulling-Facebook-events-into-EPiServer/">http://world.episerver.com/Blogs/Dan-Matthews/Dates/2011/9/Pulling-Facebook-events-into-EPiServer/</a> </p> <p>EPiServer Tech Notes – Creating Custom Criteria </p> <p><a href="http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-6-R2/Visitor-Groups-Creating-Custom-Criteria/">http://world.episerver.com/Documentation/Items/Tech-Notes/EPiServer-CMS-6/EPiServer-CMS-6-R2/Visitor-Groups-Creating-Custom-Criteria/</a></p>2011-12-01T18:20:30.0000000ZBlog postFacebook Event Attendance Visitor Group Criterion – Part I<h3> </h3> <p>On the #epidayuk event I demonstrated how to create a custom visitor group criterion with a custom Dojo widget and a MVC controller. Since the entire day had a social theme I could not miss the chance to get into Facebook development. On the day, the code was explained to the tech session attendees and download can be enabled by joining a Facebook event. It is totally understandable that some may not want to expose their Facebook credentials, let alone to authorise some Facebook app that was created by a guy they only met once. So as promised in the seminar, and for the general public who may think this is useful, a Facebook Event Attendance Criterion.</p> <h2>What it does:</h2> <p>The name says it all – A visitor group can be defined to include this criterion, where the marketer can select the event to attend. See screenshot:</p> <p><a href="/link/9ee8d8ec8b8642b2afedcdf1e1b44a05.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image002" border="0" alt="clip_image002" src="/link/cea16eb08ed946d69dc04f070ec9fb83.jpg" width="434" height="226" /></a></p> <p>An editor will be able to create a block of personalised content just visible to this visitor group. See screenshot:</p> <p><a href="/link/52075f01b613490c97b6b60444761901.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image004" border="0" alt="clip_image004" src="/link/29a8b3133b7c48049aaa452788f929fc.jpg" width="436" height="245" /></a></p> <p>If site visitors are attending/have attended a specified event published on Facebook, they belong to the visitor group and personalised content will be displayed. They will need to authorise your website to access their event attendance information on their Facebook profiles. See screenshots:</p> <p><a href="/link/516b833e51a54f9b9a470f768afe69ef.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image006" border="0" alt="clip_image006" src="/link/36ba6615aa294ce7a50e01436a437c6d.jpg" width="440" height="332" /></a></p> <p>Step 1 – Authorise Facebook App</p> <p><a href="/link/d35fb545efc34c9b8d2761a216c6db5c.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image008" border="0" alt="clip_image008" src="/link/414c484cc133479da05f8bdaabfa388c.jpg" width="444" height="309" /></a></p> <p>Step 2 - No personalised content yet</p> <p><a href="/link/0f2c3a1c84e341abbe93d730c8ae8dd5.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image010" border="0" alt="clip_image010" src="/link/288afaa960bf480ea44c9fc10d2cfe54.jpg" width="447" height="288" /></a></p> <p>Step 3 - Join the event</p> <p><a href="/link/c8b1cd6ecd714800a27746620660b649.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image012" border="0" alt="clip_image012" src="/link/8c2d82245ac7422e931ba6009076d02f.jpg" width="449" height="334" /></a></p> <p>Step 4 – personalised content is visible</p> <h2>How it does it:</h2> <p>The development is formed of two parts – to create a widget for the criteria in the visitor group UI, and to implement the IsMatch method that will be evaluated when a personalised page is visited.</p> <h4>Visual Studio Solution</h4> <p>Again, a picture equals a thousand words:</p> <p><a href="/link/86e18947c60642a6aedccff340070262.jpg"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="clip_image014" border="0" alt="clip_image014" src="/link/c8240ec564c14b548c4ad4aba936064e.jpg" width="242" height="392" /></a></p> <h4>FacebookEventCriterion.cs</h4> <p>The main criterion class, inheriting from EPiServer.Personalization.VisitorGroups.CriterionBase<T>, where T is the class of the criterion model (will come to that in a minute). We also want to decorate this class with EPiServer.Personalization.VisitorGroups.VisitorGroupCriterionAttribute in order to set the criterion’s display name, category, etc, and in this example, initialise the Dojo Widget using a piece of Javascript that can be specified in ScriptUrl parameter (will come to that in 2 minutes)</p> <p>IsMatch() is the only method to override. In this case, check if the user has authorised the Facebook App and has attended the selected Facebook event (which is accessible through the Model object). </p> <h4>FacebookCriterionModel.cs</h4> <p>The model class, inheriting from EPiServer.Personalization.VisitorGroups.CriterionModelBase. It contains a public property “EventName” (string) that can be selected from a dropdown list when creating a visitor group. The selected value will then be passed to the IsMatch method in the main criterion class.</p> <p>By default, EPiServer will use a text box for a string property when using the criteria to create visitor groups. In this case, we want to use a dropdown list instead, which means the EventName property needs some annotation using EPiServer.Personalization.VisitorGroups.DojoWidgetAttribute. </p> <p>e.g. [DojoWidget(WidgetType = "dijit.form.FilteringSelect", …)]</p> <p>This drop down needs to have some options, which is why the FacebookEventCriterion class has used ScriptUrl in its VisitorGroupCriterionAttribute.</p> <h4>FacebookEventCriterion.js</h4> <p>This is the Javascript that will be executed when dragging and dropping the criterion when creating a visitor group. It will initialise an AJAX call to the URL <a href="http://domain/criteria/FacebookEventCriterion/GetAllEvents">http://domain/criteria/FacebookEventCriterion/GetAllEvents</a>, which is a piece of code running on the server to get all the Facebook events a certain Facebook user has attended (or if you want, created). This Facebook user could be a user created by the marketer or marketing department that organised the actual event, or a user that is used for other Facebook marketing activities. The server code will return a JsonResult object that the Javascript can capture and fill the Dojo FilterSelect Widget (a drop down list) with all the event details.</p> <h4>FacebookEventCriterionController.cs</h4> <p>This is the fore-mentioned server code to get all the event details. It will use Facebook .NET APIs to firstly get the user authorisation token and use the token to get all the events that this user has attended. It will return a JsonResult object, with the EventName being both the dropdown option’s ID and itsText, so it can be serialised and passed to the client Javascript.</p> <h4>GeneratePermanentToken.aspx</h4> <p>This is a page that you only need to run once to get a “permanent” (or long standing) access token for your Facebook App to get the Facebook user’s profile events information. We want to get a long standing token because this is likely to be a Facebook user created by the same marketing department that is responsible for the web site. So there isn’t any trust issue here, and this Facebook user is unlikely to change, and the password of this Facebook user is unlikely to change, either. However if any of situation changes, you will need to regenerate the access token. We want to allow this by using an AppSettings section in the web.config.</p> <p>In order to generate an access token, you firstly need a Facebook App. That topic, together with the source code download, deployment and configuration, will come in Part II of this article.</p>2011-11-30T13:03:00.0000000ZBlog postAnother Accessibility Checker<h3> </h3> <h3>EPiServer and Accessibility Checker</h3> <p>Seems an old topic in the current CMS market. There are many ways of checking the site’s compliance in EPiServer. <a title="Wave Accessibility Checker" href="http://labs.episerver.com/en/Blogs/Allan/Dates/2010/7/Checking-a-accessibility-for-a-page-with-Wave/" target="_blank">Allan’s post</a> talked about how to use WAVE to achieve the goal, and <a href="http://www.episerver.com/en/Extras/Licenses/EPiMore/EditLive!-for-EPiServer/" target="_blank">EditLive</a> provides a rich editor that checks the compliance while the editor is typing. I thought it would be good to provide yet another alternative open source solution so the control is completely yours and it is free. </p> <p>It is called AChecker, an open source project hosted by <em>Adaptive Technology Resource Center</em> at the <em>University Of Toronto</em> (see <a href="http://atutor.ca/achecker/" target="_blank">project page</a>). Currently it checks your web page against WCAG1, WCAG2, Section 508 (US), BITV (Germany) and Stanca Act (Italy). It is written in PHP/MySQL as an open source project, which means you can download it, set it up, and use it locally on your server. If PHP is not your plate of food, you can always convert it to .NET. </p> <h1> </h1> <h3>Features and why it is different:</h3> <ul> <li>Compliance selection </li> <li>Multi-lingual support </li> <li>Guideline creation and customisation </li> <li>Decision making for warnings (checks that machines are not clever enough to perform) </li> <li>TinyMCE Plug-in </li> </ul> <p>For more details, check out these pages: </p> <p><a href="http://www.tinymce.com/wiki.php/Accessability">http://www.tinymce.com/wiki.php/Accessability</a> </p> <p><a href="http://atutor.ca/achecker/">http://atutor.ca/achecker/</a> </p> <p>Here is the URL pointing to a little open source CMS (ATutor) that show how an editor interface could be integrated with AChecker. </p> <p><a href="http://atutor.ca/atutor/demo.php">http://atutor.ca/atutor/demo.php</a> </p> <p>Fortunately if you are not ready to do the local install, AChecker also provides a URL that can take HTML as input through POST request, and return the errors and warnings to you. Better still, it has a ready to use TinyMCE plug-in that you can take and plug straight into your EPiServer editor. This probably is exactly what editors need as they only need to care about the content they are responsible for instead of the entire page.</p> <p>  </p> <h3>Integration with EPiServer</h3> <p>This is what I tried as the first step. The following screenshots shows the idea </p> <p><a href="/link/0dda126ce8824708adc193c99e90b582.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="tinymce-admin" border="0" alt="tinymce-admin" src="/link/89f81d118860424b95100c07ca2da3eb.png" width="316" height="234" /></a> </p> <p>  </p> <p><a href="/link/da3cb39fbcf84ec59fc2bac25f786b32.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="tinymce-edit" border="0" alt="tinymce-edit" src="/link/5354bf87e2aa4ab18bc6c4eb9ebbb899.png" width="321" height="192" /></a> </p> <p><a href="/link/1b35a31cf1bb4a56bad5dc3a46e88ab1.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="achecker.ca" border="0" alt="achecker.ca" src="/link/fac7495169754a358c2475d6171f1736.png" width="317" height="235" /></a> </p> <p> </p> <h3>Next Steps</h3> <p>As you can see by now, using the URL and posting HTML to it may not be ideal for editors who normally do not understand those errors and warnings in the context of the HTML source. If you need to take a step further because of this, you will have two options:</p> <p>a) Although I have not tried myself, you could utilise AChecker Web Service APIs <a href="http://achecker.ca/documentation/web_service_api.php" target="_blank">documented here</a> to pass in the HTML, analyse the returned message and highlight the corresponding text within the TinyMCE editor or in preview mode</p> <p>Or </p> <p>b) Forget about the on-line service. Download everything and install the checker locally. You can remove user interface provided by the application and just convert the checker engine to .NET (we have done that for a former version of AChecker in my previous job and it took 1 man 2 weeks), then the control is all yours how you want to integrate with EPiServer.</p>2011-10-13T11:54:37.0000000ZBlog postWeather Criterion<p>Apparently British people talk about weather a lot. So wouldn’t it be good to personalise the content based on the weather of the visitor’s location?  Your site visitor had a bad day before visiting your site, and found out that at least it is still sunny outside and he can go to the beach with the family after work <img style="border-bottom-style: none; border-left-style: none; border-top-style: none; border-right-style: none" class="wlEmoticon wlEmoticon-smile" alt="Smile" src="/link/7495bb5aa6b1459b91e8dfdcc6cf1c2e.png" /></p> <p>The Custom Criterion uses Google Weather API and expect the user profile to have a ZipCode property. If you are trying it on the Alloy Tech site, set up the workroom component, and locate the file ~/templates/AlloyTech/Units/Placeable/PersonalSettings.ascx. You can easily modify the code to set/get user’s ZipCode information.</p> <p>A typical zip code in UK, Sweden and USA is such as</p> <ul> <li>EC1N 8SS </li> <li>103 86, Stockholm </li> <li>60181 </li> </ul> <p>Very quick and dirty project as part of my new exposure to EPiServer personalisation. Now you have the source code so let’s see your imaginations!</p> <div style="padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; display: inline; float: none; padding-top: 0px" id="scid:fb3a1972-4489-4e52-abe7-25a00bb07fdf:be848404-4e3a-4805-a7fb-2f9396d0f82a" class="wlWriterEditableSmartContent"><p>See the code: <a href="/link/b3cd30a922af46459b162e8e972910a0.zip" target="_blank">Download</a></p></div> . 2011-08-01T15:09:00.0000000ZBlog post