Widgets & Embeds Feed

Watch this space! #IgniteLiv

On the 25th Feb, I am presenting a mini-presentation at Liverpool Ignite 40 Digital.

20 slides lasting 20 secs to produce a tight talk timeframe.

Mine will have a QR code that comes here.

The event is drawing close, I'll be going live this Thursday evening via YouTube and Facebook.

Watch here on YouTube

The write up will be here too.

Full set of slides. Not used Slideshare for a while.

A stitch in time

I started a blog back in 2007. Back then embeds and widgets were my fascination. Today I revisited the design settings of my blog and rediscovered an old, one of my first embed-able widget. 


Clustr Maps


Analytics are key to understanding the reach and catalyse growth for audience engagement.


Augmentation has been a focus of my work. Making the most of resources and technology as it emerges and integrates into the common consciousness.

YouTube embed were a revelation. Why send someone to see your video on YouTube when you can insert it directly into your website.

Cluster maps is a visual representation of where your site visitors are located.
Intelligence is direction. Direction is fulfilment.


Playlist Power Moves



Since I first discovered folksonomic tagging in Flickr making dynamic updating photo albums and in turn hashtagging on Twitter a thing, I've always been on the lookout for embeddable elements when and new platform or service emerges. RSS has a similar transmutable superpower but its prevalence seems to be waning. It this superpositioning-stylie capability of putting content in one place and have it populate elements places elsewhere that I find super useful.

Continue reading "Playlist Power Moves" »

Food Crime... the musical to #StopFoodCrime


Where academic reporting meets musical theatre

Yes, you are reading that correctly! From March to May 2016 I was commissioned as The New Optimists Social Media Producer. They wanted someone to 'DO' social media. With the budget I received this is what I did. I cam up with the title Social Media Producer.

That is producer, not maker. Whats the difference? In this blog I hope I can explain.

Firstly, what is a producer anyway? This definition illustrates my point

"Producers play an integral role in the television, film and video industries. A producer will oversee each project from conception to completion and may also be involved in the marketing and distribution processes. Producers work closely with the directors and other production staff on a shoot...the producer deals with all the practical and political aspects of keeping a project running smoothly, so that the director and the rest of the team can concentrate on the creative aspects."

Now, a producer in these terms is a scoped role far more extensive than I delivered to The New Optimists but the sentiment of how I approached the commission are reflected in the tasks producers carry out. To me a social media person is integral, sees a project through from concept to completion, may be involved with marketing and works closely with the direct and production staff. As a social media person the reputation and portrayal of the project online and understanding the multitude of social media accounts distributing context appropriately while nurturing an audience is an important part of what I do. Pre - Performance - and Post. Legacy is is important to me too.

Being new to the organisation my first task was to understand who they "The New Optimists" were, what resources thay had for me to work with and what their overriding expectation of social media output was going to be.

The expectations were to

  • provide contextual resources relating to each song in the musical to be tweeted in real-time during performance
  • raise the profile of the project to attract audience
  • build a simple web presence to begin separating The New Optimists main website from their Narrativium creative project based work.
  • support the creative and production team with social media output

As producer I was able to step back from the creation of the social media out of necessity, with the budget little time was available for editing or considered composition. For example, I requested company members write a short blog post each. I took the text, accented the posts with a photo before publishing the posts on the The Optimists website.

All the blog posts were tagged StopFoodCrime - Read them HERE - that tagged category produced a URL from the website containing only those posts tagged StopFoodCrime.

With a limited budget the effective use of folksomony is extremely valuable. Hashtags are folksonomic. User defined terms to provide quick access or knowledge retrieval.

My second task was to make it all happen with as little impact on the creative production process as possible. I want to iterate that this role was not about marketing or advertising, it was about defining an audience and a legacy. What happens next to this project is unknown to me but my objective was to deliver a collection of media to act as a beacon online for what ever comes next... at a guess the further work of raising a general awareness about Food Crime and the work that is on going to protect the integrity of out food supply, globally.

Wow, big stuff when you see it in writing like that.

So... understanding. For every project or client I build a digital scrapbook. This is a page hosted on my PCM website where feeds and content embed widgets can be collected.

The is The New Optimists Scrapbook Page.

Its a mish-mash, not particularly elegant but serves a purpose, to pull all the available media relating to the project together.

Now the project is over this is it's PCM legacy.


Embed Responsively

image from alistapart.comIllustration by

Anybody associated with the arena of web design even on the periphery as I am has heard about responsive design. The concept of designing a single web site that adapts (responds) to the devise it is being displayed upon. A time was that it was by analysing the stats of your visitors you could predict the most likely size of monitor and resolution being required and provide a selection of sites sized accordingly along with a client side query to determine the size expected and deliver pages in response to the query. Then there came mobile! At least that's how I understood it in my limited experience. I was down the rabbit hole! It was at this time I became aware of reciprocity, propinquity and normalisation. Coding a design could be rigidly and inflexibly set in tables with sliced up graphic elements with hotspots and links. These would 'explode' and 'break' displaying in what seemed like an arbitrary manner depending on your favoured browser. The separation of code and style enabled consistency and including a set of instructions to overwrite different browser margin defaults helped. The Cascading Style Sheet (CSS). I was an advocate for responsive as soon as it became a thing. I expect these 'zero default' style sheet addenda still exist and form the basis of secret design formulae many pure coders still closely guard. Its tricky to achieve... or things might have changed.

Web presence and the ability to create one was the objective of my web building education and as each element of building web sites became specialisms in their own right html, xhtml, CSS, asp, php, xml, javascript - these became distinct from the visual front interface which in turn developed its own special branches UDI (User Designed Interface), UXI (User Experience Interface) until being a master of all was an impossibility and engaging a professional was beyond the cost effectiveness of my needs, I turned to the very thing I loathed when I first begun my education. BYO (Build Your Own), drop and drag applications evolved into a necessary evil.

I remember the first drop and drag experiences within browser environments afforded by javascript and flash. The move away from passive unmovable pages with form fields the only interaction was the introduction of user experience integration. Whether that equated to 'engagement' is contentious, still being discussed. I could indeed go on but this post is Embed Responsively.

Many blogging platforms and BYO are now to a greater or lesser extent 'responsive' to varying degrees of success. It is an art. The transition through absolute and relative positioning to fully responsive adaptive web pages has been aesthetically essential to the seamless, cross platform, multi device user experience.

Returning the premise of this post ...web presence and the ability to create one being the objective of my web building education... left me forever needing to learn something new to keep up to date! I just want to gather resources and information for inclusion in one space with a link to share. Simple as! But...

Although BYO and Blogging platforms (the ones I use currently) offer responsive templates and elements, the media I gather from around the web and the media I create and upload are embedded using html code snippets, podcasts from Audioboom, audio interviews stored on Soundcloud, videos and playlists on YouTube, PDF documents published on ISSUU, presentation slide decks on Slideshare or Photo galleries from Flickr or Instagram they are traditionally fixed in size (height and width). 

Yes I'm getting to the point!

The straight copy and paste of these html embed snippets don't adapt to a responsive environment. I was overjoyed when I was introduced to embedresponsively.com - "It helps build responsive embed codes for embedding rich third-party media into responsive web pages." It was created and is maintained by @jeffehobbs based on research and work by Theirry Koblentz, Anders Andersen and Niklaus Gerber.

I love it, I wanted to share it - here it is! embedresponsively.com


Lots of Twitter activity at your event? HowTo - Storify it

image from www.gizbot.com

Platform / Service Websitewww.storify.com

Available on Desktop from a browser and it has an app for iPad.

 The screenshots in this post have been captured and annotated using Skitch

Storify it - Share it - Embed it 

Sign up for FREE Storify account.




Once you have signed up I recommend finding the account settings and completing your profile, adding a photo and cover banner. Storify doesn't have an internal platform community it's a platform tool, but readers can follow your account and like-wise you can follow storify publishers.

What is useful is the profile URL. This is mine - https://storify.com/pcmcreative

Its not compulsory but it makes you look professional in the eyes of your audience. First impressions do count. Let your content speak for you not the neglected, incomplete profile pages. 

(aside... I also dislike badly cropped avatar images. There is no excuse for
butchering your branch graphic or having a badly framed head-shot...
check out browser based image editor Pixlr)

But if you are in a big rush to create your first Storify go ahead and click the 'New Story' button.


The Storify interface is nice and clean. Not too fussy but it does contain lots of features mainly to help you bring in content from a wide range of social media platforms.

In this post I'm just looking at finding media from one event posted on Twitter using the Hashtags #ARC15, #ARC2015 and the keyword EquityUK.

Storify Basics... title, description, Social Media source, search term, refinements, build your Storify.


Use the 'Insert' button for adding headings, text boxes and horizontal rule lines to divide sections in your narrative.


The simplicity of Storify's click, hold, drop and drag mechanic, left column to right, click and hold on media element, dragging up and down, placing items above or below one another is so easy. Do remember browser based apps can become unresponsive due to the nature of the internet connection you are using while moving graphic elements around. If the platform stops fully responding to your clicks and drags - pause, check the project has saved (that status displays beside the Publish button) and refresh your screen. Better loose a little than loose the lot.


The screenshots above show searching and adding elements from Twitter. Creating a Storify of this event in pictures was the aim. Media can be collected from lots of other sources. Even individual URL's (universal resource locators) like the .jpg graphic being inserted shown below.

Storify accommodates (and a few others)

  • Soundcloud
  • Facebook
  • Google+
  • YouTube
  • Flickr
  • Instagram
  • Google Searches
  • RSS feeds

There are lots of platforms, tools and services for media capture especially. I tend to favour ones that easily integrate with and offer sharing to the major audience focused platforms (Twitter, Facebook, Google+) and platforms such as Storify do that brilliantly while making media accessible when telling your story.


Once all the media elements / assets are dragged where you want them its time to curate the storyline of your project. Dragging further than one element up or down can get tricky as your screen scrolls by while you look for the location to slot in an element you want to relocate. The Reorder optional view makes rearranging a lot easier.


Very quickly you can have a document for publication. Look at the draft preview before publishing.


All done... you can add more elements at your leisure.


The next step and a reason why I love Storify is being able to notify via custom tweets the people who have contributed to the story you have pieces together. Storify finds all the twitter names and helps you share to those who will want to share it too.

Effortless, contextually relevant, content rich, audience exposure.



Being able to embed your Storify projects, just as you can from YouTube, is another great feature. Embed your Storify on your website or in a blog post.


This is how the embed code was inserted in to this post. 




Here it is...

The Embedded Storify - Equity ARC 2015 in Pictures

SXSW from the UK - digital stalking!

Wow, where do I start? My co-colaborator and epic media maker @PhilCampbell is at SXSW (south by southwest) I am here in the UK going about my day to day at PCM creative. SXSW is the world stage conference for technology and more specifically the interactivity with technology. Twitter made centre stage in 2006 to become a global phenomenon. After listening to SCVNGR's Seth Priebatsch keynote introducing me to his concepts of 'the social layer' and 'the game layer' of the Internet's interactive evolution my SXSW engagement has been valuable even if its been from afar. Pepsico have been live streaming a selection of the keynotes and panel sessions through out the conference.

Not attending has had its plus points believe it or not. You may be aware of my event and online network curation activity. Essentially it is about focusing web activity and filtering relevant and interesting content to a location where it can be engaged with. More importantly it is the potential to provide a point of engagement with others who are accessing the online experience. Media only becomes social when it is sharable and the audience tangible. Gathering around a collection of media so people can reach out and exchange views, opinions and comments in real time is the legacy of web 2.0. Well that's what I think anyway.

SXSW has generated a Tsunami of Twitter activity. I have wrestled with my conscience about using the term Tsunami in the light of recent events in Japan and I intend no detriment to the tragedy that is unfolding which is truly incomprehensible but its the over riding and overwhelming visual cascade of chatter I have witnessed. As a social media practitioner specialising in filtering activity for an online audience being one step removed has meant I can consider the best way to syphon and distill a coherent media stream in order to interact with the event taking place in real time.

Mixed in the unfiltered stream is captured visual and audio media, observations, location announcements from individuals and shout outs for imminent happenings, local facility recommendations, event back-channels where teams or groups communicate and stay in touch with a collective using social mediums. It's a noisy information highway.

So how do you make sense of the stream of consciencness that spews from an event like SXSW? Writing down my processes I find hard. I visualise and filter. I am determined to share my discovering. If I can't blog what I do how can I get people to engage me to do this for future events.

I am compiling a collection point, an active and constantly updating noticeboard. Anyone can access it and consume. The lagacy of web 2.0 is the social, the conversation it is this element I strive to facilitate to provide, an entry point to experience for those who are unable to attend in person.


SMIB10 - Session Attention!

As I spend a focused amount of time tweeting I was looking forward to reading the blogs that resulted from the stunning speakers schedule, on which I have not been disappointed. Social Media in Business 2010 was an inspirational day and I met so many people traveling on the social media road of adventure.

Blogs tagged SMIB10 were picked up by Google Alerts.

I mustn't forget the suburb iPadio interviews masterfully carried out by Ben Ellis

Collected Media gathered together using widgetbox

The sessions of most interest to me for amplification to my arts based network came in the final session of the day.

Mitzi Szereto: Author, Blogger & Vlogger - 15 mins

SMIB10 - Mitzi Szereto

Lloyd Davis: Social Artist & Master Community Building - 15mins

SMIB10 - Lloyd Davis

Clare Hudson: CEO In4Merz, Hudson PR - 15 mins

SMIB10 - Clare Hudson

Peter Bouvier: Marketing & Communications NHS Direct - 15mins

SMIB10 - Peter Bouvier

Heather Taylor: Chief Blogger & Social Media Manager PayPal UK - 15 mins

SMIB10 - Heather Taylor

As a notoriously poor coherent note taker I recorded them for playback. Recordings captured are listed above. (Audio files were uploaded on 11 July.)

In all it was a day of knowledge and networking. So, if you attended what was your BFO? Blinding Flash of the Obvious! Your light bulb moment or 'Wow the web can do that!' moment? For me it had to be auto-tweeting from Powerpoint, during a presentation.

Architects Journal - aggregating with ease

Capturing content is one thing. Getting it live another, and in the right place yet another. With web content street ninja, Phil Campbell I've been working on a commission to create an updating web feed to Architect Journal's home page culminating with a 2 day live stream at Earls Court as Nottingham H.O.U.S.E is assembled for exhibition at this years Ecobuild.

Over the past 4 weeks Phil demonstrated with stupendous style the core PCM creative in action objective and that is to make media real. Yes its a little raw (there are no edits, intro idents or outro credits) but the conversations and interviews are relaxed, informal capturing the individuals being interviewed in a good way. Being pushed infront of a camera often has an edge of awkwardness that was absent when chatting off camera. Using mobile media is less intrusive and especially when it comes to AudioBoo the quality is excellent. With mobile connectivity the added bonus is that content can be uploaded immediately to the web.

Using tagging, RSS feeds and embeddable widget code all packaged nicely using WidgetBox I was able to provide Architects Journal with a dynamically updating box of content needing no support from them to maintain. (Featured to the Left of this text) Once the embed code had been added to thier home page any content created by myself or phil could be directly feed to the widget.

Agregated content in the widget

This has been a great project. I really hope I get commissioned to do more. I'm looking forward to the live stream. Social Media has to have soul and I hope PCM gives that.

Keeping a balance - Geek Chart - social media pie!

Geek_Chart With so many social media tools, services and sites on the web how do you make sure you get a balanced distribution of content for your time and money?

Being so busy with social media clients recently its ironic that my social media activity has been lacking. Not in quantity as I am a prolific Tweeter which cross posts my updates to several other web services, notably Facebook. My social media activity has lacked focus and depth.

Twitter is a fabulous service for letting the world and your network know what you are up to, what you are discovering as life drags you along. Twitter is up datable from my mobile so its quick and easy.

I tag articles, websites, tools and services I discover during my working day using Delicious and these online bookmarks, kept in check on all my PC's by Xmarks means I can effortlessly maintain my online and offline bookmarks (as an added bonus it means they are all backed up) and using the nifty Delicious widget I can filter selected tagged content in to the various online networks I act as custodian for, at the moment predominantly Amb:IT:ion and it's multiple UK regional digital opportunities networks I am building and igniting.

So... Geek Chart. What I think is great about this embeddable widget is it's a way to show where you share online and most importantly how that activity is distributed. Geek Charts show the last 30 days of your activity on the sites you enter usernames for.

PCM-geek-chart-01-06-09Seeing mine on May 1st 2009 (left) I realised I need to even out my activity.

The active embedded PCM Geek Chart should be in column on the right. If not see it on the Geek Chart site. It tracks Twitter (the turquoise) Delicious (the pale blue) a blog (the orange) Flickr (the pink) StumbleUpon (in green) and also at the time of writing this post - YouTube, Digg and Last.FM.

It is a visual gauge to show your followers, readers and friends where you are most active on line but it is also an excellent indicator to help measure your personal effectiveness and to focus attention on areas of your activity that are weakest and hopefully prompt you to ask your self if your communication is effective and assess how to redress any imbalance.

Quite frankly for me it highlighted how poor my blogging has been, coming in at 6% of my activity. Targets are a good thing and by blogging more I hope to alleviate my blogger's guilt and produce the more focused and considered content the medium of blogging facilitates.  

So see for your self have I addressed the imbalance?

If you set up a Geek Chart or already have your very own Geek Chart please post a link to yours here in the comments. How has it made you think about your online activity and has it promoted you keep a different balance?