Recent Posts

Topics

Archives

Twitter Widget or Feed Not Working? Update to Use Twitter API 1.1

By Vance Bell | June 16, 2013 | comment7 Comments »

On June 11, 2013 Twitter finally retired the version 1 (v1) API which provides, among other things, the “Recent Tweets” feed commonly found on websites.

If your Twitter widget is has mysteriously disappeared recently, it may be time to update to an embedded timeline.

The Old Method

You can still embed a timeline for Tweets from an individual user, a user’s favorites, Twitter lists, or any search query or hashtag on your site. However, the old, two part code for doing so:


<div id="twitter_div">
 <a href="http://twitter.com/vancebell" id="twitter-link">Latest Tweet:  </a>
 <span id="twitter_update_list"></span>
</div>


<script type="text/javascript" src="https://twitter.com/javascripts/blogger.js" > </script>
<script type="text/javascript" src="http://api.twitter.com/1/statuses/user_timeline/vancebell.json?callback=twitterCallback2&count=3" > </script>

Will no longer return any results. “It’s dead, Jim.”

Creating and Registering Embedded Timelines

Instead, you are required to register a new widget specific for your site via your Twitter account.

The steps for doing so:

  1. Login to your Twitter account
  2. In the upper right, select the Settings submenu under the Gear symbol
  3. From the left navigation, select Widgets
  4. In the upper right, select Create New

You will arrive at a page similar to the one below (click to enlarge):

Create a Twitter user widget

From this panel it is possible to customize your embedded timeline (e.g, specify feed(s), light or dark visual design scheme, link color, widget height, etc.).

The number of visual customizations allowed through this panel are limited, however, and in all likelihood the timeline’s default appearance will not match your site or your prior implementation. This can be addressed to large degree through further effort described in the section below.

Once you complete your setup, the Create New button will register the widget with Twitter and return a code snippet you can use to embedded the widget on your site.

An generic example of the widget’s code:

<a class="twitter-timeline" href="https://twitter.com/yourusername" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @yourusername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Customizing Twitter Widget Appearance

While all of the configuration settings you made above are stored on the server, you may override specific options on the client side (your website) by customizing the embed code. These settings are as follows:

Theme: Set by adding a data-theme=”dark” attribute to the embed code.

Link color: Set by adding a data-link-color=”" (e.g. data-link-color=”#790000″

Width: Set using the standard HTML width attribute on the embed code (units are pixels).

Height: Set using the standard HTML height attribute on the embed code (units are pixels).

Chrome: Control the widget layout and chrome (container or framing decoration) by using the data-chrome=”nofooter transparent” attribute on the embed code. Use a space-separated set of the following options:

  • noheader: Hides the timeline header. Twitter would like you to refer to the timeline display requirements when implementing your own header design. Meh.
  • nofooter: Hides the timeline footer and Tweet box, if included.
  • noborders: Removes all borders within the widget (between Tweets, cards, around the widget). See also: border-color below.
  • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
  • transparent: Removes the background color.

Border Color: Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color=”#cc0000″

Language: The widget language is detected from the page, based on the HTML lang attribute of your content. You can also set the HTML lang attribute on the embed code itself.

Tweet Limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit=”#” attribute with any value between 1 and 20 Tweets (e.g. data-tweet-limit=”5″ to display 5 tweets). The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

Web Intent Related Users: As per the Tweet and follow buttons, you may provide a comma-separated list of user screen names as suggested followers to a user after they reply, Retweet, or favorite a Tweet in the timeline. Use a data-related=”nameone,nametwo” attribute on the embed code.

ARIA politeness: ARIA is an accessibility system that aids people using assistive technology interacting with dynamic web content. Read more about ARIA on W3C’s website. By default, the embedded timeline uses the least obtrusive setting: aria-polite=”polite”. If you’re using an embedded timeline as a primary source of content on your page, you may wish to override this to the assertive setting, using data-aria-polite=”assertive”.

When the above are set in the embed code directly, they will override the server side settings.

Creating a Pared Down Version

Many users trying to customize the widget to appear as it did previously, or nearly so at least, will find it useful to eliminate many of the elements in the default widget.

For instance, setting a link color of #a66c2a while removing the scrollbar, background, header, footer and border elements, specifying three tweets and switching to a dark theme compatible with a dark site background, would yield a code snippet similar to the following:

<a class="twitter-timeline" href="https://twitter.com/yourusername" data-widget-id="YOUR-WIDGET-ID-HERE" data-chrome="noheader nofooter noborders transparent noscrollbar" data-tweet-limit="3" data-link-color="#a66c2a" data-theme="dark">Tweets by @yourusername</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 

From this version it should be easier to style the widget’s output to match your previous implementation or site.

Alternative Solutions

If you dislike the default options available in the embedded timeline, you may consider one of these solutions:

For WordPress

WooDojo Plugin. Updated 6/13/13 for compatibility with v1.1 of the Twitter API. Additional information available on the necessary step of setting up a Twitter Application.

For Developers

OAuth2 and the Twitter API – Creating A WordPress plugin

Create a Twitter Widget, Smashing Magazine

Authenticating a User Timeline For Twitter OAuth API v1.1

Javascript method, Twitter Post Fetcher

Best of luck everyone!

Documentation

Overview: Version 1.1 of the Twitter API

Embedded Timelines

Main Line Restaurant Week Banner Ad Campaign

By Vance Bell | May 4, 2013 | comment1 Comment »

Main Line Restaurant WeekMain Line Restaurant Week, founded by AroundMainLine.com CEO Sarah Lockard in 2010, is the Philadelphia suburbs’ largest dining event. Twice a year Main Line Restaurant Week brings together dozens of the region’s finest restaurants for a week of delicious, value dining.

Main Line Restaurant WeekParticipating restaurants across the Main Line and Philadelphia’s western suburbs will offer special, prix fixe menus showcasing their chefs’ greatest dishes. Menus will feature discounted lunches as well as three-course dinners (e.g. appetizer, entrée and dessert) priced at $20, $30, $40, or $50 per person. Be sure to join us on Facebook and Twitter to get the latest.

Main Line Restaurant Week Banner Ads

Services Provided:

  • Banner Ad Design
  • Image Optimization
  • Campaign Placement

Click for a full size image, or
Download the full campaign sample sheet (PDF, 160 KB) and take a look up close.

Jack Edmondson Plumbing & Heating Website Relaunch

By Vance Bell | December 30, 2012 | commentLeave a Comment »

Jack Edmondson Plumbing & Heating Earlier in the year, I was privileged to lead Jack Edmondson Plumbing & Heating through a complete redesign of their website. A family-owned business with over 30 years experience in plumbing, heating, and air conditioning installation and repair, Jack Edmondson also does a great job at remodeling as you can see in their new portfolio.

If you’re in Philadelphia and seeking quality, trustworthy tradesmen, you’ll find a bunch at Jack Edmondson Plumbing and Heating.

Jack Edmondson Plumbing & Heating

Homepage slider images:

Jack Edmondson Plumbing & Heating - Homepage Slider

Jack Edmondson Plumbing & Heating - Homepage Slider

Jack Edmondson Plumbing & Heating - Homepage Slider

Footer:

Jack Edmondson Plumbing & Heating - Footer Image

Services Provided:

  • Web design
  • Web development
  • Customized WordPress theme development
  • Search engine optimization

Jack Edmondson Plumbing & Heating

 

One Shot Coffee Website Launch

By Vance Bell | March 22, 2011 | comment1 Comment »

One Shot CoffeeFor those who live or work in Northern Liberties, One Shot Coffee is a rather well-loved fixture. Owner Melissa Baruno and her team made a collosal effort over the last year to bring the new One Shot Coffee location into existence. Now recently opened, the new building boasts two floors with area enough for live performances, private parties, and more.

The One Shot’s new interior is a masterpiece of eclectic harmony—be sure to drop by if you are in the ‘hood and check out the greatly expanded food and drink menus! And now for the delightfully lazy, there is even delivery service!

Main Line Restaurant Week Web Design

One Shot Coffee

One Shot Coffee

One Shot Coffee

Services Provided:

  • Web design
  • Web development
  • Custom WordPress theme development
  • PHP development
  • Strategic consulting

One Shot Coffee Website Design

 

Main Line Restaurant Week Website Launch

By Vance Bell | August 1, 2010 | commentLeave a Comment »

Since I mentioned previously the launch of the Main Line Restaurant Week teaser site, I’ll keep it short and just show a few samples from the new site. Have a look and be sure to get out and support your local restaurants.

Main Line Restaurant Week Web Design

Main Line Restaurant Week Web Design

Main Line Restaurant Week Web Design

Main Line Restaurant Week Web Design

Services Provided:

  • Web design
  • Web development
  • Custom WordPress theme development
  • PHP development
  • Information architecture
  • Email design and development
  • Strategic consulting

Main Line Restaurant Week Website Design

 

Main Line Restaurant Week Pre-launch Site

By Vance Bell | June 18, 2010 | commentLeave a Comment »

Main Line Restaurant Week The all new Main Line Restaurant Week launches this fall—September 27th through October 3rd. Participating restaurants will offer special, prix-fixe menus showcasing their chefs’ greatest dishes. Menus will feature discounted, three-course dinners (e.g. appetizer, entrée and dessert) priced at $15, $20, $30 or $40 per person depending on venue. The week also includes a special calendar of food-themed events.

The teaser website will be in place through late July while we complete the “real mccoy,” so be sure to check back. And, if you live or work in the western suburbs, save those dates. You can follow Main Line Restaurant Week on Facebook or Twitter to get all the latest.

Main Line Restaurant Week Web Design

Services Provided:

  • Web design
  • Web development
  • Strategic consulting

Main Line Restaurant Week Website Design

 

Installing Epson Perfection 1200U Scanner XP Drivers under Vista and Windows 7

By Vance Bell | May 20, 2010 | comment85 Comments »

Epson 1200U Scanner

Like myself, many folks still own the popular Epson 1200 Photo or 1200U scanner. Likewise, many of us have transitioned to Vista or Windows 7. Unfortunately, Epson, in their “wisdom” has failed to provide working Vista or Windows 7 drivers for these older scanners—preferring no doubt that we all go out and purchase a new scanner instead. It’s called “planned obsolescence,” no doubt the most annoying trend in the hardware and software industries.

Fortunately, there is a workaround that preformed well in my case. This involved using the most recently available Windows XP Twain drivers installed under Windows 7 using Windows XP compatibility mode. For Vista users the process should follow the same principles.

[Edited: If you are using a 64-bit version of Vista or Windows 7, you may wish to attempt the method outlined by Equinox in the comments to this post.]

Step 1: Download the most recent version of the Epson Twain drivers from the Epson site. At the time of writing this was TWAIN Driver v5.53A (for Windows XP, Windows 2000, Windows Me, Windows 98 – epson10245.exe – 4.6MB – posted on 02/25/02). The file bundle is a self-extracting Zip archive. Note the location of the download.
Continue Reading »

Posted In: Tips | comment85 Comments »

StyleMatters Website Launch

By Vance Bell | May 12, 2010 | commentLeave a Comment »

StyleMatters Web Design StyleMatters is a Philadelphia-based entity delivering a full suite of professional writing, editing, marketing, website development, graphic design, video and strategic communications services. Lead by Suzanne and Robert Murray, StyleMatters has completed an impressive number of developmental editing projects for clients at home and abroad. Additionally, the organization provides a wide variety of writing and communications services both on- and offline for corporations, government agencies and individuals.

A pleasure to work with, I can recommended them wholeheartedly. So, if you are seeking to bring that book concept to fruition, need to revitalize your company’s online presence, or just having difficulty organizing that annual report—reach out to StyleMatters.

StyleMatters Web Design

StyleMatters Web Design

Services Provided:

  • Web design
  • Web development (CSS & XHTML)
  • Information architecture
  • Search engine optimization
  • WordPress installation and configuration
  • PHP development
  • Strategic consulting

StyleMatters Website Design

 

Kate Samworth Website Launch

By Vance Bell | May 12, 2010 | commentLeave a Comment »

Kate Samworth - Thinking Spot Oddly enough, several years before Kate Samworth contacted me to develop her new portfolio site, I’d purchased a print of her’s entitled “Pride and Joy” at a gallery in the Old City area of Philadelphia.

Kate had been rather productive since then—having finished a large group of new paintings, and now busy preparing for two shows the following month. “Can you finish it up by then,” she asked. Simply, “Of course,” I replied.

I don’t mind short deadlines—fortunately, I do “methodical” and “organized” as well as anyone when the situation requires.

We’re all happy with the outcome.

Kate Samworth Web Design

Services Provided:

  • Web design
  • Web development (CSS & XHTML)

Kate Samworth Website Design

 

Ethreations eCommerce Store Launch

By Vance Bell | March 16, 2010 | commentLeave a Comment »

Ethreations Web Design

Ethreations is a new online storefront dedicated to becoming your online resource for refined, artisanal paper media products. Their first product is a line of hand-made CD/DVD media holders—perfect for professional wedding and family photographers, or anyone wanting to simply jazz up a gift for a friend or loved one.

Ethreations CD/DVD Media HolderPersonally, I am rather fond of the ‘rusty copper’ version with two sleeves over on the side, but there are enough variations for any taste.

Ethreations Web Design

Services Provided:

  • Web design
  • Web development (CSS & XHTML)
  • Shopify theme development

 


Page 1 of 41234