Twitter Friends Widget / v2.0 /

Setup Wizard

Customize widget options, and this wizard will demonstrate and generate the code for you.
Click “Add to Blogger” to get redirected to Google Blogger and have code placed in a HTML/JS page element.

Options

Leave inputs as is to use defaults. more info on widget options
  • Set your Twitter username.
  • You can set width of widget container in pixels, Or set 0 for auto width..
  • Auto-load any number of div elements with “twitter-friends” class and place options in a HTML comment or HTML5 data attribute. Also, you can use a jQuery method call.
  • Twitter will return your latest 100 Followers/Friends or less. you can choose to show a smaller number of pictures (ex: 80).
  • Pictures are 48×48 pixels. you can scale it down to 32 pixels for example.
  • Customize picture entry animation type. also, you can disable animating users pictures and display them at once.
  • transition time of a picture in milliseconds.
  • loop pictures animation or not.
  • Time in milliseconds to wait before animating pictures again. This delay is used only when tweets are disabled. otherwise swapping happens after tweets animation ends.
  • Set the height of pictures container to something like 100 pixels, to prevent flickering while pictures are added. Or set 0 for auto.
  • show user name under picture or not.
  • You can show random subset of the returned pictures each time the widget is loaded.
  • reverse the order of pictures returned?
  • By default user picture is appended by the end of pictures list. you can insert picture at the beginning of list.
  • by default, friends pictures will link to their Twitter profile. however, your can link it to their homepage.
  • you can set the height of profile container to something like 60 pixels, or set 0 for auto.
  • By default, widget will display your name and picture as in demos, but you can customize by setting this option with HTML template.
    HTML code may contain any of these optional variables which will be replaced with actual values.
    _tp_ : Twitter profile Link.
    _ti_ : Twitter picture.
    _ts_ : your Twitter username.
    _tn_ : your name.
    _fo_ : followers count.
    _fr_ : friends count.
  • You can display friends/followers tweets at widget footer. Tweets will also appear as a tool tip when hovering on a user picture.
  • You can set the height of tweets container to something like 50 pixels to prevent flickering while tweets are animated. Or set 0 for auto.
  • Show/hide user picture in tweets.
  • Pictures are 48×48 pixels. you can scale it down to 32 pixels for example.
  • tweet transition time of in milliseconds.
  • Time in milliseconds for a tweet to be shown.
  • Show tweet author name or not.
  • Customize picture entry animation type. also, you can disable animating users pictures and display them at once.

Code

Copy and paste into a HTML/JavaScript Gadget under Page Elements. Or click “Add to blogger” to get code copied to your blog.

Demo

Notes

  • Javascript files -jQuery library & Widget- should be included in that order. Each file only needs to exists one time on a page regardless of how many widgets you have on that page.
  • You can include the Javascript files at <head> section or by the end of the page.
  • When setting options in HTML5 attribute, you should escape single-quotes with backslash in options values.
    so, you would write ‘John\’s Post’ instead of ‘John’s Post’.
    And escape double-quotes like this ‘say &quot;hi&quot;’ instead of ‘say “hi”‘.
  • If you place options in HTML comment, you should escape single-quotes as before. And put a backslash between any 2 consecutive dashes like this ‘John -\- Post’ instead of ‘John — Post’.
  • Also, If you place options in HTML comment and embed code in Blogger template, you need to escape the HTML comment like this:
    &lt;!-- {
      username:'mike_more'
      ,...
    } --&gt;
    
  • Plugin was also tested to work with jQuery 1.2.6 or later.