百科.dev
全部条目AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
J

jquery-lifestream

> 编程语言
开源

使用 jQuery 显示您在线活动的流

753 stars0 点赞1 次浏览
访问官网GitHub

工具介绍

使用 jQuery 显示您在线活动的流

jQuery Lifestream Plug-in

Show a stream of your online activity. Check out the example or create your own lifestream instantly.

Requirements

  • jQuery 1.4.2+

Supported feeds

Currently supports the following feeds:

  • Bitbucket
  • Bitly
  • Blogger
  • Citeulike
  • Dailymotion
  • Delicious
  • DeviantART
  • Disqus
  • Dribbble
  • Facebook Pages
  • Fancy
  • Flickr
  • Foomark
  • Formspring
  • Forrst
  • Foursquare
  • Gimmebar
  • Github
  • Google+
  • Hypem
  • Instapaper
  • Iusethis
  • Last.fm
  • LibraryThing.com
  • Linkedin.com (via Network Updates RSS feed)
  • Mendeley
  • Miso
  • Mlkshk
  • Pinboard
  • Pocket
  • Posterous
  • Quora
  • Reddit
  • RSS
  • Slideshare
  • Snipplr
  • Stackoverflow
  • Tumblr
  • Twitter
  • Vimeo
  • Wikipedia
  • Wordpress
  • Youtube
  • Zotero

Feel free to fork the project and add your own feeds in. Just send a pull request to christianvuerings/jquery-lifestream when you're finished.

Extensions

  • Drupal - Social River - jQuery lifestream as a drupal module called Social River.
  • Filter feeds - used by codeandstuff.com
  • Wordpress - WP Social Stream

Build

cd build
make

Available targets

Use make target and replace target with the target you want to use.

  • jls: Build jquery.lifestream.js, the non-minified version of jQuery Lifestream
  • jls-min: Build jquery.lifestream.min.js, the minified version of jQuery Lifestream
  • jls-css: Build css/lifestream.css, the stylesheet containing the favicons
  • script-min: Build download/js/script.min.js, this script is the main script for the download page
  • uglifyjs: Build download/js/uglify-cs.js, a custom version of UglifyJS patched to work in the browser
  • uglifyjs-min: Build download/js/uglify-cs.min.js, minified version of UglifyJS
  • service-list: Build download/services.json, a list of all the services which are available

Requirements

  • Node
  • Npm
  • UglifyJS 2

Usage

Add the following to the or tag of your HTML page.

The above code will always use the latest version of the script. If you want to use it in production, download the minified or uncompressed file and host it yourself.

You also need to add a bit of HTML:

jQuery Templates

You have the ability to use jQuery templates for your feed. Checkout the template page to see an overview of the current available templates.

Usage:

{
  service: 'deviantart',
  user: 'gabbyd70',
  template: {
    deviationpost: 'heeft hetvolgende gepost: ${title}'
  }
}

Configuration

The plug-in accepts one configuration JSON object:

$("#lifestream").lifestream({
  classname: "lifestream",
  feedloaded: feedcallback,
  limit: 30,
  list:[
    {
      service: "github",
      user: "christianvuerings"
    },
    {
      service: "twitter",
      user: "christianvuer"
    }
  ]
});

classname: The name of the main lifestream class. We use this for the main ul class e.g. lifestream and for the specific feeds e.g. lifestream-twitter

feedloaded: (function) A callback function which is triggered each time a feed was loaded.

limit: (integer) Specify how many elements you want in your lifestream (default = 10).

list: (array) Array containing other JSON objects with information about each item. Each item should have a service and a user. For more information about each service, check out the source code of the example page.

Commit to the project

Add your own feed

Adding in your own feed is pretty easy. Have a look at this commit which adds support for the last.fm feed.

Add your favicon

  1. Convert the favicon.ico of a site to a .png file. (e.g. http://google.com/favicon.ico)
  2. Optimize the .png file. Save it in src/favicons/.

How to commit?

  1. Push the finished code to your own remote repository.
  2. Send a pull request to christianvuerings/jquery-lifestream.

Code Style Guidelines

  • Indentation: 2 spaces
  • Max column width: 78 characters
  • Trailing spaces: not allowed
  • Always use curly brackets {} for if/else/for
  • Put all var statements in the beginning of a function
  • Use === & !== for comparing variables
  • Use the following spacing rules:
for (var i = 0, j = length; i < j; i++) {
  • Use jshint on your files. .jshintrc contains the necessary configuration

Ideas

Stuff that isn't implemented yet, but would be nice to have:

  • Add support for Twitter Web Intents

Mentions

Places on the web where this plug-in got mentioned:

  • Andref.it - Italian
  • Bitconfig
  • BlogUpstairs
  • ChurchMag
  • Codevisually
  • DailyJS
  • DesignBeep
  • Devl.im
  • Doejo
  • Eire Media
  • Elliptips - French
  • Erik Ostrom Blog
  • Forrst
  • HTML.it - Italian
  • JavaScript Experiments
  • jQuery Plugins
  • jQuery Rain
  • jQuery this
  • jqueryitalia
  • jQueryScript.Net
  • Lifestream Blog
  • Maddyzone
  • Script Tutorials
  • Simong Gaeremynck Blog
  • Slodive.com
  • Softpedia - Softpedia pick
  • Speckyboy
  • Spyrestudios
  • phpspot - Japanese
  • ProgrammableWeb - Mashup of the Day on 17/06/2011
  • Sitepoint
  • Smashing Magazine
  • Splashnology
  • Tactoom.com
  • The Changelog
  • The Next Web
  • Unheap
  • Webhouse
  • Weboptimize
  • YJL

Used By

A list of sites that use the jQuery Lifestream plug-in:

Alesh Houdek, Armin Roșu, BrainDump2.0, Dennis Metzcher, Devin Berg, Erik Ostrom, Ethan Brown, Libby Baldwin, Sam Tardif, Sebastix, Simon Gaeremynck, Song Gao, Sunny Walker, Roni Laukkarinen

Special Thanks

Special thanks all the committers and gabbyd70 for letting us use her DeviantART username.

Version log

Have a look at our tags to see what we've been working on.

Issues· 0 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

JavaScript

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言