| Comments

I’m an avid user of Twitter (join me on Twitter @timheuer) for things social, family and technical.  I use it to keep in touch with friends, learn things from technical sources, get news and otherwise interact with names I’ve never met in person.  My use of Twitter has changed much over the years and I’ve found myself just using the web site more and more while on the desktop where a full browser is available.  On my mobile I use native clients but presently not one of the ‘official’ Twitter mobile apps (I find them less full-featured than the 3rd party ones which also offer a better performing experience for me).  In my use of the web site I’ve noticed more and more links that say “view summary” in my feed. 

Twitter Summary Card sample

Sample Twitter Summary Card from dev.twitter.com

When expanding this, the twitter post (which is limited to 140 characters itself) basically provides more information about the post.  The most frequent I’ve seen is what Twitter calls a Summary Card, which reads metadata from the URL posted in the Tweet, effectively extending the 140 character limitation a bit (however summary descriptions are limited to 200 characters).  I post to Twitter most of my blog posts and thought it would be a great little enhancement to provide this summary data in the feed view (it isn’t expanded by default so users must explicitly click ‘view summary’ and thus there is no real risk of making your Twitter feed more noisy without you choosing to read more).

Learning about Twitter Cards

I recently learned more about these after a quick exchange with @JeffSand (former director at Channel 9, now at Twitter) about another implementation (more on that later) and thought I’d get into doing the Summary Card for my own personal use.  Twitter has some pretty decent documentation on this topic on their Dev center.  There are a few types of Cards available for content authors to leverage and the great thing is that you, the content author, really just have to add metadata to your content and that’s it.  Twitter feeds/apps do the rest by interpreting and displaying that data in a Card view in the feed.

Summary Cards seem to be the most popular to me but that could be just my own personal use.  The others that I could see add value are the App info/install and deep-linking ones.  These do presently, however, seem to add most value in the mobile space and not the desktop space.

  • App Cards – provide a link to mobile apps and product page information.  This is currently limited to iOS and Google Play store listings it seems.  There is also some documentation on App Install/Deep-linking techniques.
  • Photo Cards – provide a good representation of an image in-line.  You see this for images from Twitter, Flicker, SkyDrive, etc.  Sadly, Instagram chose not to pull this support for their usage last year (yay customers…grrr).
  • Player Card – seems great for podcast publishers!  You see YouTube usage of this most of the time as well.
  • Product Cards – I’ve not seen usage of this in my interactions but I would imagine we’ll see more of this in sponsored posts/ads as they become more prevalent

After reading about these, I set out to add this metadata to my own content on my site.

Modifying my blog engine

At present I use Subtext as my blogging engine of choice.  This is due to some choices made long ago using .Text and then migrating to Subtext when that transitioned the work.  Subtext has served me very well over the years but is showing its age more recently as I’ve been desiring to modernize some things and leverage the vast ecosystem of WordPress type themes and plugins.  Still, it is Open Source, written in ASP.NET and so I could modify things as I need.

I first went to the source of Subtext and thought I’d just upgrade.  The version I run is the latest stable/release build of Subtext and hasn’t really evolved since that version release a few years back.  The version on GitHub now is moving toward ASP.NET 4, which is good and I thought I’d just move to that.  I had an immensely painful time trying to do this upgrade and ultimately decided against it (blog post on my ASP.NET migration woes perhaps to come) as there wasn’t much return on my time investment at present to do that.

The first thing you have to do is set up your Twitter Card.  Twitter’s docs have a cool Cards validator tool (only works on Webkit browsers for some reason) to give you a display of your card so you can tweak settings.  Once you do this and have your metadata set up, you need to submit your URI to Twitter for validation.  This step is critical or they won’t show up.  This step is also not entirely clear in the process and you may think that just setting the META tags are sufficient…they are not.  Use the validator tool to see the second tab to “Validate & Apply” for your card view.  I did a basic Summary Card for my entire site to get through this process so I could test/validate my own logic for the per-post metadata later.

I wanted the data from each of my posts to be a unique Summary Card as I felt that has been the most valuable I’ve used in my feed.  Card data is implemented as META tags so your mileage may vary on how you need to implement this. 

If you are a WordPress user, there is an amazing ecosystem of plugin developers who have already done this for you and you just install a plugin.  It doesn’t seem that Twitter provides a directory of recommended plugins for popular CMS systems, so I can’t speak to which ones are reliable or not.  Twitter Cards for WordPress seems to have a lot of downloads so I’d check that one out first if you are a WordPress user.

Unfortunately the way Subtext is architected doesn’t easily let me jam new META tags into my site that are dynamic (there is a tool that allows me to easily add static ones without altering the page itself).  A few properties for my cards would indeed be static (creator, site, domain) so I just used the Subtext admin area to add those.  The title and description I wanted to be content-specific.  I didn’t modify the Subtext source, but rather created my own ASP.NET 3.5 control that did this.  I put the code on my GitHub repository for you to view…you’ll see it is a quick few lines of code.  My control basically gets the context of the request, pulls the title/body out and sets these META tags.  Now whenever I post a URL to Twitter, my Summary Card option will be there and provide some helpful information to the reader (hopefully).

Viewing the results on different platforms

Looking at the results, I’m happy with my quick hack.  Outside of the web site, the cards only show on Twitter official apps it seems.  Here are some examples based on my site content.  The red box is only there to illustrate what content is actually the card:

Twitter Summary Card web view

View on twitter.com when expanding ‘view summary’

Twitter Summary Card iOS

View on Twitter for iOS when viewing full Tweet detail

Twitter Summary Card on Windows

View on Twitter for Windows

Simple metadata additions providing some more content beyond the 140 characters Twitter allows in the post itself.  I chose to use my face in the image because my blog doesn’t associate a “poster” image per-post.  If yours does, you should use that if available and change the twitter:image value as needed.

Summary

This didn’t take me long to implement and adds some additional value on to the content I post on Twitter (I hope).  Again, this is optional for the user, they have to click “view summary” or view the Tweet in details view to see this, so there is no general feed noise here.  I have found that it appears to cache the results per URL so there may be an issue if you change title/description on a post.  I’ve found that my initial tests wouldn’t update the previous Cards I had which were just the blog summary data…that’s unfortunate, but now I know.

When I talked with @JeffSand he mentioned this would be nice to have the App cards for Windows Phone/Windows Store apps (ugh, we really have to do something about that name).  I think this is a great idea!  Unfortunately it looks like Twitter needs to do something to understand Windows apps as it only understands iOS/Google Play app stores.  I’ve started a conversation with Jeff’s team as of the date of this writing and hopefully we can understand what might be required and deliver some goodness here.

If you are a content publisher (hint: if you are a blogger you are) this is a subtle and helpful addition to your content in my opinion.  If you are podcaster, consider using the Player Card as well.  It was really easy to understand and implement and I like the results.

Hope this helps!

| Comments

My blog runs on Subtext which has a pretty good skinning model (albeit a tad outdated) and allows you to customize whatever you want.  I’ve had my own custom theme since 2009.  I figured I was due for an update.  I was further strengthened by a post from Jon Galloway last week.

Now when I saw this I figured it was another nudge.  I did also have some time this weekend without any distractions so I took it as an opportunity to do some ‘work’ on this here blog.  Now a while back I was inspired by what Scott Hanselman had done on his site with a designer.  I reached out to a few designers that I admired, but frankly never heard back :-(.  I figured that was okay as I wasn’t in a position to really pay what I know it is worth for a good designer.  So I went looking for things on the web that I could do myself.  I did want some subtle design tweaks to represent some things I’m currently passionate about.

Bootstrap your CSS

After some digging I saw a ton of pointers to Bootstrap.  This is an Open Source Javascript/CSS library that sets your site up for styling success and layout goodness.  The documentation was some of the better docs I’ve seen for a library.  Each aspect of the library/styles where in the docs that I could visually see, interact with and see the code that produced the behavior.  I liked what I saw and went to work.

When I got all the styles configured (using the basic setup from Bootstrap) I went to work on some of my own minor tweaks.  One of the things I really liked is the responsive layout options, not only for the grid but also for different screen sizes.  By adding a simple class I can specify certain aspects that shouldn’t be displayed when viewing the site on a tablet or phone.  There were other cool responsive options for this such as the main menu will switch to a drop-down approach when on a smaller device.  Using Firebug, IE F12 tools and real devices I was able to get the precise tweaks that I wanted.  Here’s what my site looks like on an iPhone as an example:

timheuer.com on an iPhone

Notice the menu at the top is gone but replaced with a little icon (which is a drop-down).  Also notice the sidebar area is no longer visible (it is on the bottom of the site in this device view).  I like this subtle configuration that was really easy to do with just adding a class name to the area I wanted to collapse.

The other thing I wanted was to implement my primary navigation links in a little-more-than-text style.  I used the CSS sprite method by creating a single image that I would then define styles that used clips within that image to pull out the right area.  Here is the image in entirety:

Notice how the normal and hover states are the same image. 

NOTE: I put this on a black background so you can see them but it is actually a transparent background so the theme’s background shows through.

What I do then is just define a style for the <a> tag like:

   1: #follow {
   2:     background-image: url("navbarglyphs.png");
   3:     background-position: -195px 0px;
   4: }
   5:  
   6: #follow:hover {
   7:     background-image: url("navbarglyphs.png");
   8:     background-position: -195px -70px;
   9: }

Now I was having a bit of difficulty with this because I was misunderstanding the background-position value in CSS.  A quick set of second eyes with Shawn Wildermuth (who is doing a bunch of HTML dev posts right now) helped me realize my math was wrong and I needed to use the negative value instead of what I was using.  Once that forehead-slap moment was done, I was set. 

I still have a few tweaks to go (need to re-work the comments sections but didn’t have the time to think about a design more) but I’m happy with the quick re-design.  It is very simple for sure, but I like it.  I tried on a few different screen sizes and I think I have met Jon’s challenge to adapt to the available space for the screen.  If you are working with a new site and aren’t a CSS/JS guru I highly recommend looking at Bootstrap as a solid starting point for your efforts.

| Comments

I run my site on Subtext which has been around for 6+ years in some form (Subtext is a fork of .Text from way back).  As a part of the framework, there was initially built-in capabilities for tracking referral traffic.  On each view of the application, it would tick a referral note and you could see this in the statistics view of the admin pages.

As the standards (for lack of a better term) of tracking Page Views, Referrals, etc. moved to more proven/consistent reporting like Google Analytics (or other platforms) these type of platform tracking became worthless to me.  I never checked them because, frankly, I didn’t believe them anyway.  The problem is that Subtext is still tracking this information for me and taking up valuable little bytes in my database.

For Subtext, specifically, contributors have created scripts and maintenance pages to help manage some of these referrals that may not matter to folks and are just taking up space.  I am one of those people.  In my recent migration to SQL Azure I wanted to take advantage of 100MB pricing.  Surely my blog was not bigger than that.  To my surprise my blog was 650MB in size. 

What!?

I hadn’t run my database maintenance script in a while and decided to run that which purges the referral tracking.  It got down to 35MB.  Yeah baby.  In fact this topic has been discussed on a few times on the Subtext developer mailing list and even tracking as a issue for the project.  In the meantime I wanted to solve it myself for my blog.

In Subtext there is a stored proc that runs to get some of the entry tracking data called subtext_TrackEntry.  Within that proc is where it looks to see if it is a referral and adds that data.  I simply altered my proc on my end to be like this (keeping in the old function just so that I know what I did in case I needed to revert back):

   1: ALTER PROCEDURE [dbo].[subtext_TrackEntry]
   2: @EntryID INT, @BlogId INT, @Url NVARCHAR (255)=NULL, @IsWeb BIT
   3: WITH EXECUTE AS CALLER
   4: AS
   5: -- Removing the referral tracking
   6: -- if(@Url is not NULL AND @IsWeb = 1)
   7: -- BEGIN
   8: --    EXEC [dbo].[subtext_InsertReferral] @EntryID, @BlogId, @Url
   9: -- END
  10: EXEC [dbo].[subtext_InsertEntryViewCount] @EntryID, @BlogId, @IsWeb

Now I’m no longer tracking referrals because my analytics package is doing that for me already.  My database is now representative of things that matter to me, rather than things I just want to clean up.  If you are a Subtext user and never knew that referral logging was wasting your database (and you are using an analytic package to track that anyway), then I hope this helps! 

| Comments

From time to time I’ve gotten a few inquiries as to what platform my blog is, what tools do I use, etc.  After a recent trip to Redmond and visiting with the Live Writer team, I got another inquiry while talking with a customer.  I thought I’d just spit out my thoughts.

First, my platform.  Yes there are many platforms out there for blogging.  Probably the most popular are Wordpress and Blogspot.  I think those are popular because you can get up and running for free and have it hosted.  My wife and her friends mostly use Blogspot for that reason.  Only a little customization is allowed, but skilled people can get creative.  For us propeller heads though, we don’t like hosted solutions :-).  I started a long while back on the .TEXT platform.  When Scott Watermasysk had started working with Telligent and Community Server, the .TEXT project was at a bit of a stand-still for growth.  A few picked up the project source code, forked it and created Subtext, which is the platform I now use.  Subtext has a good developer ecosystem around it and led by Phil Haack, there are constant improvements being discussed on the developer list.  It has served me well since I made the move and I’ve contributed features/fixes myself to make it better for me to use!  I’ve tinkered with Graffiti CMS, but for now, Subtext is my comfort zone and has given me no reason to leave.  There are a few things in the overall engine that are a bit dated, but heck the team is all volunteers and open source, so I’m not holding that against anyone.

As for tools, I’ve come to love Windows Live Writer.  Honestly, if you are a blogger and don’t use Writer, I have to ask why.  Seriously…even if you are the casual blogger.  I’ve heard my wife’s friends complain about formatting pictures in Blogspot…then they see Writer and love it!  When I first started blogging I would use the web site and my blog engine.  But quite honestly that is limiting to very basic posting information.  It doesn’t make authoring easy.  I initially started using BlogJet in the early days.  Honestly, it’s a good tool and I happily paid for it.  Probably my only reason for switching to Live Writer was because of the programming model.  As a developer I wanted to be able to customize it and take advantage of other customizations from others.  I remember getting word that Live Writer was available internally.  I took a look at it. 

The moment I downloaded it and installed it I knew we were going to be on to something.  But there were glaring holes.  That being said, I was a responsible beta user and gave feedback…very blunt feedback.  I remember within a week being invited on a phone call with the team to help them understand my feedback.  It was GREAT!  I told them that as-is they shouldn’t release…there were too many holes and releasing without a few key features would be detrimental to future releases.  Quickly I was introduced to some APIs and we talked through certain scenarios.  A few we agreed at the time couldn’t be core, and I volunteered some time to look at building some plugins with their help.  That was the birth of a few of my tools (Tag4Writer and Flickr4Writer).  Tag4Writer was a stop-gap until the Tags feature could get into the next release (which the functionality has and much better).  Flickr4Writer was a great learning experience in client development as well as working with a great team.  I’ve constantly stayed close to the feedback loop with the team to make it a better product.  To date, there is no better authoring product for me than Live Writer.

That being said, here’s my complete tools for blogging:

  • Subtext – my blog engine
  • Windows Live Writer (WLW) – authoring tool
  • Flickr4Writer – a plugin for WLW that enables browsing and insertion of pictures from Flickr and also has BlogThis support
  • S3Browser - a plugin that enables insertion/upload of bits to Amazon S3 storage.  I wrote this along with tremendous help from Aaron Lerch.  This enables me to keep my images/files stored on a reliable network and reduce overall bandwidth usage.
  • Leo Vildosa’s Code Snippet plugin – another plugin for WLW which enables me to insert formatted code snippets.  I know people have their favorites (and there are a lot of them) – this one is mine.
  • Dynamic Templates – a WLW plugin from one of the developers of Writer that enables you to provide your own “macros” within the plugin, helpful in a lot of cases
  • Creative Commons footer – a WLW plugin to append a Creative Commons note to every post without having to think about it.
  • Twitter Notify plugin: a WLW plugin to automatically update Twitter after posting
  • Templates: every blog should be as unique as you can make it.  Some of us are more skilled in design than others.  I’m not one of them.  I get my inspiration from others.  Wordpress has the best ecosystem of templates…learn from them.  There are a few sites that advertise templates like wpSnap.com and others.  Also look at SmashingMagazine.com always, they have some great stuff they find/provide with liberal licensing.

As you can see, my tools completely revolve around Live Writer.  There is only one instance where I can’t use it to do what I need: Enclosures – and I’ve been providing the team feedback around this feature to hopefully get it into their next release. 

For Mac Users: No, there isn’t a version of Writer for Mac :-(.  I’ve heard a lot of people on Mac say they keep a Windows virtual image around just for using Live Writer…wow.  There are some other tools (ecto and Mars Edit) but I haven’t used them extensively to know if they are good or not.  I know they don’t provide the suite of tools that I use so I don’t even bother exploring for now.

I’ve made a lot of investment in making Writer+Subtext an easy authoring setup for me and it has paid off in productivity savings.  Hopefully you have a set of tools on your own as well that keep you productive!

| Comments

I’ve just completed my upgrade to my site of the official 2.0 release of Subtext, the Open Source blogging engine that I use to manage content on this site.  You can read the full announcement from grand poohba Haack himself here.

I’m loving this release because of the improvements made but also a little selfishly because the modifications I’ve made to my own fork I’ve been using have made it into this release!  These modifications really make this the best platform for me when using Live Writer.  This may not make a difference to a lot of you, but it really is exciting for me to see my check-ins make it into the release and to not have to use my custom assemblies anymore!

Thanks to the Subtext team for supporting my contributions and I look forward to seeing how I can participate in v3!  Get your Subtext 2.0 upgrade today!