Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: Social Media

  1. jQuery Socialist


    jQuery Socialist is a plugin that allows you to quickly and easily pull all of your social media channels into a single location and display them in a Pinterest styled layout.

    To get this up and running you just need to head over to GitHub and download the plugin.

    Check out the example over here.

    This is running with the following configuration….

    <script type="text/javascript">
    $(document).ready(function () {
            networks: [
       //         {name:'facebook',id:'responsivewebdesigns'},
       //         {name:'rss',id:''},
      //          {name:'rss',id:''},
      //          {name:'craigslist',id:'boo',areaName:'southcoast'},

    As you can see I’ve commented out a few of the lines simply because I don’t really want/need them. The Facebook is removed because I really didn’t like the way it was being rendered, and I think a little more work could go into the Twitter layout. I’m planning on doing a bit of work around those.

    If you want something similar set up for your site and need some assistance I’m happy to help.

  2. Hootsuite partner image loading problem

    Leave a Comment

    I really like hootsuite.

    It gives you an easy way to manage your social media channels in a single location. I use it for my clients and I use it for my online channels for Javery Design as well as the many side projects I have going. I like it so much that I even joined up as a partner and advertise them in the side bar.

    Unfortunately this has caused my site to load slowly because the image that is provided through the program never actually loads. This has only been happening over the past few months but has taken me until now to spend some time to identify the issue (the old mechanic and his own car story).

    The quick fix was to upload my own image and serve that, which is what I did, but I shouldn’t have to do that. For a such a good product it seems a shame to fall down when they’re trying to market themselves.

  3. Olympic Social Media Infographic

    1 Comment

    They call it the social media olympics.

    Four years ago in Beijing the world was well on the way to becoming “social“, however due to the fact that it was still an emerging trend and that it was also held deep inside a internet exclusion zone (not really, but you know what I mean) means that the London Olympics were the first true social games.

    The infographic below

    London 2012 Socialympics Infographic

  4. Facebook Influence Tools

    Leave a Comment

    A few months ago I decided to expand on my Facebook knowledge through a training packaged developed by Amy Porterfield.

    While the majority of the $97 course was information that I was already aware of there were a few key areas that I had not previously considered which I was able to work on to improve the Facebook interactions of a few of our clients.

    Unfortunately this led me down the path of a mechanics car, where I don’t get to do as much on my own Facebook site.

    Facebook Influence Tools design

    The inspiration behind the layout of the site came from a few different areas. Facebook itself has an influence over the colours, the font and the header sections as well as the category tabs. I wanted it to have the Facebook look and feel seeing as it was all about the Facebook.

    The grid layout inspiration comes from and Pinterest. It’s also an easy way to evenly layout the different options without showing any prioritisation to the particular areas.

    CMS & Development Tools

    WordPress was used to create the site mainly because the possible contributors (Amy Porterfield) already knew how to use the product….. and that it was easy to set up.

    Unfortunately the categorisation and tags that come with WordPress are not as easy to apply in this situation, so a bit of development work was required around listing the Categories as links (the sorting menu on top) as well as listing all of the categories as part of the individual posts for sorting. was used to optimise the images and W3T Cache was used to improve the performance.

    Reverie theme (based on the ZURB Foundation template) was the CMS theme basis, a very simple theme that you can start off with any project.

    If you think this is something that you might want as a site or even include as part of your existing site then get in touch.

  5. Facebook Page Branded Image Marketing

    Leave a Comment

    One of the great things that Facebook has done over the years is giving us the opportunity to create Fan Pages (also known as Business Pages, or just Facebook Pages).

    This had a duel benefit for Facebook users.

    1. If you didn’t want your company or brand to be associated with your holiday snaps they could be completely separate
    2. If you wanted to Follow a Brands message you didn’t have to put up with non related content

    It also allowed users to collaborate together while still maintaining your own individual accounts.

    The other benefit of the page was that Facebook allowed us to create a specific image for our Facebook pages, and it could be a lot bigger than our regular profile images.

    So lets get into the details of the Facebook page image.


    The image can be 180 x 540 pixels.  This gives you a tonne of screen realestate to not only show off your funky brand, but also to convey quite a bit of extra information to you reader.

    This leads us to the next element

    Company Name

    Include your brand name in the image as well.  I know that sounds pretty obvious, but you would be amazed how many people get caught up with the design and forget to include the name of the buisness they’re trying to promote.

    Sure, if you’ve got a world recognised brand then you can get away with it, however if you’re like the rest of us getting started you should keep the company name visible.  It goes a long way to cementing your name and what you do into the readers sub-conscious.

    Company URL

    Although you won’t be able to click on the URL it’s the same theory as the company name.  It’s no good if you have a potential customer that knows you are called Justin Avery Design but don’t know that you’re site is actually .  This is particularly important if you are in competition with domain names and there is .com,, .net, .org, sites out there as well.  You don’t want all this good work to go to your competitors do you?

    What your business does

    Again we are sure that you will have this covered with you post updates but people are drawn to this area so you should use it.  Give people a sentence or a strapline telling them exactly what you’re all about.

    Think “elevator” pitch but much much shorter.  Maybe “broken elevator hurtling towards the ground” pitch.

    What else?

    That’s it.  This will be a great start… and if you haven’t already done these things then chances are you should see some improvement on your fan base. Check out some examples below to give you a few ideas about what you can do, but please remember that some of these brands are already very established so stick with the guidelines.

    Skittles Facebook Image

    Skittles Facebook Image

    Victorias Secret Facebook Image

    Victorias Secret

    social media examiner

    Social Media Examiner

    Commonwealth Bank Facebook Brand

    Commonwealth Bank

    Zappos Facebook Page

    Zappos Facebook Page

    Justin Avery Design Facebook Brand

    Justin Avery Web Design

    Next Steps

    We’ll be posting a few more articles around Facebook, Twitter and Google Plus marketing in the next few weeks so if you’re interested don’t forget to subscribe to our updates.  If you’re looking for some immediate advice then contact me to organise an in person meeting or we can skype(@justincavery) or get together for a google hangout.

  6. Surfer Magazine

    Leave a Comment is a wordpress based magazine site that has now been running since 2008. It features news and reviews about everything and anything that happens in the World of Surfing.


    Website Features

    • WordPress Design & Development
    • Google Analytics
    • Google Adwords
    • Google Adsense
    • Facebook Advertising
    • Facebook Fan Pages
    • Cloud Hosting/CDN
    • Performance & Caching
    • Twitter
    • Real Time Analytics

    Since the inception we have developed the initial theme to inclue Full Page Live Streaming, Online Stores, Adsense and Affiliate Advertising.

    We created a Category and Tag based Taxonomy to improve the related content options as well as improve the SEO Performance in a saturated market.

    We ran Facebook and Google Adwords advertising campaigns to improve the user subscription numbers and reviewed the success of the campaigns through integrated Google Analytics.

    The site took on live steaming of ASP Surf Competitions and we wanted to see the affect that had on user interactions in real time. We used GoSquared to monitor this and used the results to improve on the Twitter and Facebook conversations .

    As a global site the performance (site load time) was a concern. We set up a Content Distribution Network (CDN) with Amazone S3 Services so that all file assets (images, CSS, Javascript) were downloaded from a local source. We also worked on a caching strategy to ensure browser caching was fullly untiliise without affecting the currency of the articles.

  7. Weekly Update #2



    Type Guide

    DESIGN: I’ve never been quite sure which typeface is the best for which scenario. This poster doesn’t just convey the rules in plain english, it clearly shows you what you need to know. Another helpful resource I found was from Mark Boultons Designing for the Web book, and in particularl the chapter on Typography Heirarchy. Don’t skimp on the web version either, totally worth a purchase.[/one_third]



    JAVASCRIPT: jQuery.fracs determines the current viewable area of the entire web page, and provides a refrence point map on the side of your page. Imagine zooming all the way into an image in Photoshop, but still having a small box with a preview of the image and another area shaded to show the spot you’re looking at. Doesn’t make sense? Well take a look for yourself. It would be great for a full sized map broken up into divs. Think World Map![/one_third]


    Spy on Facebook

    ANALYSIS: Be a little bit more successful than the characters from Spy vs Spy. These handy tips start with some developer work and getting your competitions social reach, moves onto bringing their content through Social Graph, keeps things moving by setting up RSS feeds to see updates rather than Like them, and finally see how to target advertising only to their Loyal Fans. They’ve got some Twitter techniques too![/one_third_last]

    Welcome to all the new subscibers especially seeing as I had a bit of a mishap with the first mail out and my gmail integration. After a few hundred bounces, 19 unsubscribes and 1 complaint I found my account block and a please explain. It doesn’t matter now though, because here we are again and you’ve all resubscibed. Do me a favour though, if you think anyone of your collegues or friends would be interested, or recieved the last email and might want to continue to receive them, please forward this on to them so they can resubscribe.

    This week I’ve had Chrome crash about 25 times on my new shiny OSX Lion install, so I can’t wait to get rid of all of the tabs that I’ve been keeping open to share with you.

    I know that some of you are more interested in the Business advice than the Javascript or Design elements, so I’ve tried to keep them separate. Do youself a favour though and still click through to some of the areas that that you might not be used to. It’s adventageous to at least see the technical side of things even if you don’t understand how they occur…. and for you techies it’s also good to get a business perspective on why people want their websites.


    • Create Mobile Apps Free – for HTML5 mobile sites at least. Then you’re looking at $99 a month, we’re trialling them out now.
    • Mobile Emulators – when your budget can’t stretch to buy the devices, use the emulators!


    • is a site dedicated to showcasing the latest and best implemenations of Javascript and HTML5. The implmenetations are mainly focussed around the CANVAS element. So far it covers HTML5 page turn effect, 31 Days of cavas tutorials, and some greate examples of paper.js.
    • is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface. You can check out the examples, Voronoi is my favourite. Once you’ve found someting you like check out their tutorials on how to do it.
    • Free NodeJS Book


    • Google + is all the rage at the moment and Michael Mahemoff has taken a step back to look at the good and the bad. If you’re looking to get involve with Google+ then we have a few invites sitting here that we can send out. All you need to do is Like our Facebook page and post your details and we’ll send it through (oh the irony).
    • Increase CTR in Google Adsense Many of you will be trying to fleece some money through advertising on your site. I’ve personally found it difficult to get any revenue through personal blogs, however have recently had some luck on a Magazine site after we moved a few page elements around and began going with Visual Ads over text based.
    • Good first impressions with Clients

    Social Media



    If you’re interested in using any of this in an upcoming project let me know, I might be able to lend you a hand.

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as (now my resume) and (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.