North StreetNORTH STREET / A Creative Studio

We’re North Street. We make pretty things with pixels and paper. Learn more

Posts tagged: Social

  1. north-street-sony-heatmap-1 north-street-sony-heatmap-2

    Sony Instagram + Twitter Heat Map Visualization

    For the San Diego, CA, headquarters of Sony Electronics, North Street was commissioned to conceptualize, design and develop this projected installation that highlights Sony-related Instagrams, Tweets, news content and in-store purchases in a geographical context.

    A custom content management system allows Sony staff to scrape Instagram and Twitter content and to upload custom news and in-store purchase updates — all plotted accurately to a visually customized Google Map of the United States. Content updates made through the content management system are reflected on the front-end map in real time (no refresh or reboot required).

    Built on AWS S3, Bootstrap, Google Chrome, Google Maps, Heroku, jQuery, MongoDB, Ruby on Rails.

  2. golf-digest-top-golf-north-street-1 golf-digest-top-golf-north-street-2

    GolfDigest + TopGolf Social Media Wall

    North Street is thrilled to be partnering with GolfDigest magazine to bring our Socialpulp Instagram and Twitter wall to TopGolf locations throughout the country. Displayed on big screen TVs throughout each venue, our Socialpulp feed is a highly-engaging animated social wall that allows users to engage with both brands by hashtagging posts on Instagram and Twitter. The Socialpulp display — which now supports up to five hashtags in a single feed — is updated in real time as user content is approved through our easy-to-use moderation panel.

    Check out our Socialpulp.com website for more details on how it all works.

  3. twitter-map-loop-north-streettwitter-map-north-street-zoom

    Real-Time Twitter Map Dashboard

    North Street’s latest adventure in social media design and development is this real-time Twitter dashboard we recently built for a client. Designed for display on a 1080p big screen (in, say, a social media war room setting), the dashboard monitors Twitter activity around a given search term. In the example shown, we’re watching for all mentions on Twitter of “apple,” we’re showing where in the world those tweets are coming from, which three countries lead the pack and what Apple’s stock is doing today.

    The widgets are draggable, which allows them to be rearranged and collapsed. The dashboard is also responsive, allowing social media war to be waged on tablets while on the go.

    We built this using Dashing (Shopify’s Sinatra/Ruby-based framework), Twitter API, Google Maps API and Yahoo! Query Language, plus plenty of Quaker Oats and bacon.

    Related posts:

  4. nydj-testimonials-north-streetnydj-testimonials-north-street-facebook-and-admin

    Socially-Powered Testimonials for NYDJ.com

    Fans of women’s denim line NYDJ are, well, fanatical. And North Street was called in by the jeans outfitter to capture that excitement by transforming a static HTML testimonials page into a live feed of ecstatic fan praise sourced from Twitter and Facebook.

    Users can now post a testimonial to the site AND to their own social channels by authenticating via either Facebook or Twitter. They can fill out a form and submit their testimonial directly. OR, they can simply hashtag any tweet #NYDJlove to bypass the web form and submit a testimonial directly via their preferred Twitter client.

    As testimonials are submitted, they are sent to a moderation dashboard for approval. While testimonials submitted via Twitter and Facebook appear on a user’s feed immediately, they don’t appear on the NYDJ.com site until a moderator allows them to. The dashboard can also be used to activate a promotional graphic, change the Twitter hashtag and export submissions to a spreadsheet.

    But, why stop there? We also built a Facebook app for NYDJ’s fan page using the same exact HTML as the NYDJ.com site, save a few CSS and JavaScript tweaks for the Facebook ecosystem.

    Built on HTML5, CSS3, JavaScript, JQuery, Masonry, Bootstrap, Ruby on Rails, Heroku, Facebook API, Twitter API.

  5. glamour-logo sephora-logo

    Socialpulp Instagram Wall in Times Square

    North Street recently teamed with Glamour Magazine and Sephora to bring our real-time Instagram wall, Socialpulp, to Times Square for the launch of Sephora’s Color IQ color-matching system. Displayed on the ABC SuperSign at 44th and Broadway, the Instagram visualization pulled in photos taken by Sephora fans at two different Times Square stores that were hashtagged #MyColorIQ.

    As with all Socialpulp social media walls, the photos were first pulled into a moderation dashboard, which the North Street team operated from iPads on the ground.

    The event was a huge success, so big thanks to the folks at Glamour for putting it all together.

    For more information on Socialpulp, its Twitter capabilities, moderation panel, branding opportunities and analytics reporting, check out northstreetcreative.com/socialpulp.

    Related reading!

  6. north-street-nelly-black-and-white-ball

    Instagram Wall Projection at Nelly’s Black & White Ball

    North Street’s Instagram Wall Projection was recently featured at Nelly’s Black and White Ball (a Synergy Productions event. The wall pulls images tagged with a certain hashtag from both Instagram and Twitter, and displays them in real time (after being filtered through our moderation queue). The Instagram and Twitter projection can be customized with branded imagery and logos, and can be configured to most screen resolutions. We’ve also recently added text tweets into the mix.

    Read about how we created this here. For more information contact us at info@northstreetcreative.com.

  7. duracell-4040-north-street

    Instagram + Twitter Installation for Duracell Powermat

    North Street Creative collaborated with Duracell Powermat to create this real-time, interactive Instagram and Twitter wall. Installed at the 40/40 Club in New York, NY on September 12, 2012, the wall was projected onto two of the venue’s massive 9×9-screen displays as well as onto flat-panel TVs throughout.

    Attendees were encouraged to tag their Instagram, Twitter and TwitPic photos with “#PowerHouse4040.” Photos were pushed to the screen in real-time and integrated into the visualization.

    For more information on how we built this, view our previous post or contact us at info@northstreetcreative.com.

  8. north-street-instagram-wall

    Live Interactive Twitter / Instagram Projection

    North Street has developed a fun little piece of technology we call an “interactive art installation.” It’s a living, breathing, moving photo collage that gets projected onto a surface (a 12’ x 9’ wall usually does the trick) and is constantly updated in real-time with Instagram and Twitter images of a particular tag. Our platform is built on HTML, HTML Canvas, Javascript, JSON, Ajax and CakePHP and it runs in Google’s Chrome browser.

    Here’s some info:

    1) It’s instant. The time between when an image is tagged and when it appears in the collage is in the range of 3 to 10 seconds (depending on whose API we’re calling: Twitter, TwitPic or Instagram)

    2) It’s built using standards-based, open-source web technologies and because it’s really just a giant webpage at heart, it’s incredibly easy to change and adapt. No compiling. No plug-ins.

    3) It’s a completely user-controlled and wonderfully unpredictable experience. We set it up with a seed hashtag (both #highlinepark and #taxisnyc make for some beautiful imagery), then it’s out of our control. The people in the room shape what it ends up looking like with the images that they tag. Attendee images gradually replace seed images over the course of the event so that the “finished” piece ends up being a completely different animal than what it started out as. We’ve run this thing a dozen times and each time we’re amazed by how participants end up shaping it.

    4) It’s “sponsorable.” We’ve run it at a couple of events where the seed imagery is provided by a sponsor and the collage includes fixed logo placement. We’ve also built a moderation panel that runs on an iPad so that inappropriate images can be prevented from making it on the wall. We provide post-event analytics showing platform breakdown (Instagram vs Twitter vs TwitPic), top users and a summary of all of the images tagged during the event.

    5) A companion web embed or Facebook tab can be created as an event summary OR as a way of letting non-attendees participate in shaping the experience while the event is happening.

    Contact us if you’re interested in our projection for an event.

    More photos after the jump.  (more…)

  9. veuve-clicquot-north-street-sqveuve-clicquot-north-street-sq-2

    Veuve Clicquot Live Instagram Facebook Tab

    Development of an Instagram-fed Facebook tab for luxury champagne maker, Veuve Clicquot. The tab pulls in Instagram images of a specific tag in real-time, and can be moderated via a custom-built admin panel (pictured below). The admin panel also allows Veuve Clicquot to change the hashtag at any time. Built on HTML, CSS, JQuery, Ajax, JSON, Isotope, CakePHP, Instagram API, Facebook API.