This is the first blog post in a series of "Social Media Integration" schtuff that I have been working on lately.  What I will tackle first is the Twitter integration, which at first seemed really hard, but with a bit of perseverance is now so simple I could cry.

Twitter Applications

To start a Twitter application, firstly log into Twitter and then go to http://twitter.com/oauth where you can register a new application.  I haven't used the "User twitter for login" yet so we won't be discussing that today.  If you want your application to be able to update a user's feed, then you must set Read & Write.  If you think you will only want to read from a user's twitter account then setting Read Only makes your code more secure, i.e. you can't accidentally change things.  Twitter will now give you your Consumer Key and Consumer Secret.  Place that somewhere safe and within a config file of your application.  I don't know why they also show the three URLs as its not very helpful until you have read the API documentation or even blogs like this one (or only this one as the others are rubbish!).  The URLs are not even in order.  The order should be :

1. Request token URL - your application requests this
2. Authorize URL - your user clicks this URL in your application with the token you retrieved in number 1
3. Access Token URL - your application then takes the output from number 2, calls this URL and saves the result!

So how did placing those 3 urls on the page help you?  It didn't!

Read more »

We finally recently got to create a 'Fuzzy Felt' style drag and drop application. It's one of those things that's been sitting on our 'please ask us to build this' list for a while, right after the 'Website build for Agent Provocateur' entry.

Our lovely client Shelter came to us asking if we could build them an application that would allow users to build their own home. After the initial shock and the realisation that this didn't necessarily mean writing a CAD application in Flash, we put our thinking caps on, made it a little more light hearted and something more achievable given the budget and timescales.

The application we created allows you to select from a number of backgrounds and cut-out graphics loaded from the server on request. These can then be dragged, dropped and arranged on stage allowing you to create a custom image that can then be saved to both your desktop (using Flash) and to the server with the power of ASP.NET as a GIF, PNG or JPEG. We choose JPEG, given the photographic style of the graphics used and to keep the file size down.

This isn't particularly new but if have a look online you'll find most of the examples are in PHP, and you'll probably also find it difficult to get all of the Flash and ASP.NET source code in one place. We've done the heavy lifting (well actually Adobe and Microsoft have if you want to get technical) and being the nice bunch that we are we've decided to pull it all together for you. Not the drag and drop part of the wider application but the core part that allows you to save a JPEG from Flash with .NET.

Read more »

Since launching our new google maps and flickr mashup creation tool iMapFlickr two weeks ago users have created around 500 Google maps with flickr photosets.

We've been busy too, and have introduced a number of new features. We've started announcing updates on get satisfaction, but there's been so many updates we thought we'd list them here.

All maps will be automatically updated with all these new features. Read more »

For the last few months, we've been hidden away in the Frame Digital secret lab playing with a new website making heavy use of the Google Maps and Flickr APIs. After getting our way through a mountain of coffee, lots of late nights and more than just a few beers, we finally finished our new google maps and flickr mashup creation tool iMapFlickr. Read more »

Something a lot of us do is create SQL statements inline or in stored procedures but never really think of what is happening.  When you create a simple stored procedure like:

SELECT * FROM MyTable

what happens is that SQL Server (am not sure about other databases sorry) goes off, checks a couple of previous statement calls incase it has already got an execution plan for this stamtent, runs the statement, and returns the result.  However the results that it sends back contains more data than we need most of the time.

By adding the following

SET NOCOUNT ON

At the top of your SQL Store Proc or statement if inline, you can reduce the amount of network traffic.  If your site is heavily hit and you haven't got a proper caching system in place, this could help speed up your site.

Ever built a usercontrol or webpage and had a repeater?  Did that repeater have an item and alternating item template?  And were those templates exactly the same except for the class on the row or li element?  Well I have, and for years I cried when I had to update the repeater.  

<ItemTemplate>
    <tr class="row">
	<td style="text-align: center;">Some&nbsp;Code or other HTML</td>                        
    </tr>
</ItemTemplate>
<AlternatingItemTemplate>
    <tr class="rowalt">
	<td style="text-align: center;">Some Code or other HTML</td>                        
    </tr>
</AlternatingItemTemplate>

Well I found the simplest way to fix this was with C# and a ? notation and some inline coding.  Yes inline coding.  Doesn't that break paradigms of keep C# in the code behind and so forth?  Well I have views on this and may at some point blog on it, but today let's just say yes, yes it does.  But the rules are there to be broken.

The Solution

Container.ItemIndex % 2 == 0 ? "row" : "rowalt"

Yes it's that simple!  By replacing the value in the "class" tag in your HTML with that you get a more concise piece of code.  It basically says "Take the row index of the current row, divide it by 2.  If you have no remainder, then its an even number and so output 'row' otherwise output 'rowalt'."

<ItemTemplate>
    <tr class='<%# Container.ItemIndex % 2 == 0 ? "row" : "rowalt"  %>'>
	<td style="text-align: center;">Some code or other HTML</td>                        
    </tr>
</ItemTemplate>

Roll on the next version of CSS to make this even easier.  It's also possible in Javascript libraries like MooTools or jQuery to do this, but this is the simplest option in my opinion.

Helping you help Flash

The following instructions are intended for Flash CS3 users with a basic knowledge of ActionScript 3.0. You will also require a Google Analytics Profile ID.

Downloading and Installing GAforFlash, for use within the Flash IDE

1. Download the GAforFlash components @: http://code.google.com/p/gaforflash/
   
   The zip file contains 2 SWC files. SWC's are basically component files that package together a bunch of code into one compiled file that is easy to use and install. Once installed, you can access all of the methods within GaForFlash in the same way that you would access methods in your own Class libraries.
    
2. Next you have to install the SWC for use within flash.
   
   1. If Flash is open, close it for now.
   2. Then create a sub folder in: C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration\Components. I named my folder 'Google Analytics'.
   3. Copy the analytics.swc (not the analytics_flash.swc) file into this new folder.
   4. When you re-start Flash, open the component library. You should see a new Google Analytics folder and AnalyticsLibrary Component.
      
      
       
   5. To use Google Analytics you have to import the component from the component library into the library of your Flash file. You can do this by dragging the component into your library from the component library, or by dragging an instance of the component onto the stage, which you can then delete. This will add it to your library as a compiled clip and allow you to use it from your ActionScript 3 code.

Read more »

Flickr has a really nice API exposed that allows anyone with an API key to interrogate and present public Flickr data on their own website or application. The API supports a number of formats such as REST, XML-RPC and SOAP, or you could use a third-party API kit. In .NET-land there is a fantastic open source wrapper for the API - FlickrNET. This article explains some of the fundamentals of getting up and running with the FlickrNET API.

Why we used Flickr

2009 is the 250th anniversary of Robert Burn's birth, In Frame Digital towers we received a brief at the end of 2008 from Homecoming Scotland to create a promotional site to mark the bard's birthday and launch 'Homecoming Scotland 2009', a global campaign to promote Burn's night worldwide and encourage people to host their own Burn's party. The website would be used to provide historical information on Robert Burns and also be used as online resource for users wanting to host their own Burn's Supper, wherever they were in the world. One of the key aims was that registered users could create their own online account, accessing special stationary and manage invitations online. After the big day, users could upload images and videos of their Burns night to the website and share them with the world. Rather than build our own image upload and management tools we immediately thought 'Flickr'. Why reinvent the wheel where there are some perfectly good round ones available already?

Cool, before I read on, can I see it working?

Sure. Download and play with the demo, or use the live example to upload files to our own Frame Digital account. Just don't go getting clever with your image uploads, everything is set to private by default.

You could also do worse than look at the website the inspiration for this article came, our implementation of Flickr.NET on the World Famous Burns Supper website.

Read more »