Workaround: WPF Separator hidden if in a horizontal StackPanel

The other day I was working with a series of TextBlock controls in a horizontally-oriented StackPanel. When I wanted some visible separation, I naturally chose the Separator control. When it didn’t show up, I was bemused and confused. This is getting to be a familiar place to be as I spelunk the deep caverns of WPF.

It took some digging, but I finally came across a workable solution:

 <StackPanel Orientation="Horizontal"> 

     <TextBlock Text="A" /> 

     <Separator> 

         <Separator.LayoutTransform> 

             <RotateTransform Angle="90" /> 

         </Separator.LayoutTransform> 

     </Separator> 

     <TextBlock Text="B" /> 

 </StackPanel>

It seems the Separator control is not set up to be "self righting" if the parent control has an alternate orientation. Thus the 90 degree twist. After this, the Separator shows as expected.

Blogger: Add Facebook "Like" button to each post

Amit, over at Digital Inspiration, laid out some simple steps to getting the new FaceBook "Like" button onto your Blogger site. If only it had worked for me...

But, being a developer, I dug a bit into the Blogger templating engine and figured out how to make it work for real in a modern template. The snippet you want is:

<iframe 
   allowTransparency='true' 
   frameborder='0' 
   scrolling='no' 
   expr:src='"http://www.facebook.com/plugins/like.php?href=" 
             + data:post.url 
             + "&amp;layout=standard&amp;show_faces=true&amp;"
             + "width=530&amp;height=60&amp;action=like&amp;"
             + "colorscheme=light"' 
   style='border:none; overflow:hidden; width:530px; height:60px'/>

The "expr:src" tells the engine to interpret the XML attribute as an expression. The single quotes allow you to nest double quotes inside. The quoted sections are the parts that won't change, and the "data:post.url" is replaced with the fixed url for the given post.

As to where to put it, that really depends on your intention and current blogger template. In general, though, you need to edit your HTML template:

Layout Tab -> Edit HTML

Warning! Manually editing your template can hose your entire blog if done wrong. Be sure to back it up (instructions are on the Edit HTML page), and don't blame anyone but yourself if you mess it up!

In the edit box, search for "<b:includable id='post' var='post'>". That is the beginning of the post template. You should be able to make out the various parts of the post (comments, edit button, title, etc.) Try pasting the above snippet in various areas and then pressing the "Preview" button. (This lets you try it before you "buy" it ;) If you get a working "Like" button on each post, you are done!

Good Luck!

UPDATE 1 - No Line Breaks

In case you have issues, here is the version with all the clarifying formatting removed and no line breaks:

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;show_faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

Note: When you paste this into the HTML editor, ensure that the snippet begins with "<iframe" and not "&lt;iframe". The snippet had to be escaped in order to display correctly in the HTML of this blog, but you need the real deal.

In addition, if you are using the blogger in draft template designer, be aware that there are some HTML editor errors that occur under certain conditions. If you are getting a mysterious error code, try switching to the draft HTML editor. (while on the Edit HTML page, replace "www" in the address bar with "draft") I had to change some attributes from having the value "" to having " " (a space) in order to work.

UPDATE 2 - String escapes

As reported by some readers, the previous drafts of this post were not correctly formatted. Inside the expr:src quoted strings, you need "&amp;" instead of "&". The above examples have been updated to allow for direct copy and paste.

Free, automated Google Sitemap for your Blogger site

I am sure that this is well-known for an elite few SEO-type folks, but it is new to me, and thus I am posting it for posterity.

Strayed across some choice tidbits today. Was doing the work to make a custom ASP.NET MVC site have an automated Sitemap stream and suddenly realized that various blogs that I maintain did not have this service either.

Ever wary of re-Inventing wheel-like structures, I did some digging and came across this (slightly outdated) reference on how to use the ATOM feed of a blogger site as a sitemap. More important, however, was the user comments that suggested using the following URL for a live sitemap feed:

atom.xml?redirect=false&start-index=1&max-results=100

Since Google Webmaster Tools no longer allows a full sitemap URL, copying and pasting that value into the sitemap add UI will yield delicious, automated discovery of Blogger.com content.

Flocking together

DevFuel is now tweeting.

Windows 7 XP Mode: Manually Add Virtual Application Link

I was playing around with Windows 7 on my work machine and got the Windows XP Mode working. I loved how installing an application on the virtual machine creates a “virtual application” link in the host Windows 7 environment. However, while the first application I installed worked perfectly, the second failed to autopublish a link to Windows 7.

Turns out that you need to have the install link available for all users in order to autopublish. So I just dragged and dropped a shortcut into Documents and Settings\All Users\Programs and logged off the virtual machine. Voila, the link autopublished.

In the future, I will make sure to install applications for “all users” to avoid having to do this step. Someone mentioned that they thought the autopublish only worked for Microsoft Installer based applications, but I am skeptical. Instead I am betting that certain non-Microsoft installers are more likely to default to installing for the current user/and/or the suggestor of this idea chose “install for current user” on these applications (as was in the case of my second, non-publishing install).

Google Chrome 4.0.223.9 Crashes (development branch workaround)

Was getting pretty regular crashes when clicking on links in Chrome. After disabling the RSS extension, everything is hunky-dorey again:

Wrench Menu->Extensions->disable button on RSS extension

Chrome Bookmark Sync on by default? (development branch)

This morning I noticed some links at the bottom of the excellent Google Chrome “New Tab” page. Although I am running the development build of Chrome, I hadn’t specified the command line parameters that enable bookmark sync.

So I went out on a limb and tried it out. Indeed, it does what one would expect. Previously I had been using evernote to share/log links. This looks like a much better system for having my organized links on any machine I work on. I should have tried it when it was first released, but oh well…just a bit behind the curve. If you have the development branch of Chrome, give it a try!