Aggrega la tua attività online con jQuery Lifestream

Aggrega la tua attività online con jQuery Lifestream

10 dicembre 2011 13:25 0 comments

Tutti i giorni passiamo del tempo su internet e lo facciamo utilizzando un sempre crescente di e altri servizi sempre più presenti nelle nostre attività sulla rete.
Il problema che l’utilizzo di diversi servizi porta è l’impossibilità di visualizzare tutta la nostra attività online in un unico punto.

Se volete creare un elenco di tutte le attività svolte su internet e dei post pubblicati sui social network, dei tweet, etc. vi consiglio l’ottimo di  Christian VueringsjQuery Lifestream.

[linkButton title ="Demo  " url="http://christianv.github.com/jquery-/me/"]Demo  jQuery [/linkButton]

Servizi Supportati

I servizi supportati dal plugin sono davvero tanti:

  1. Blogger
  2. Dailymotion
  3. Delicious
  4. DeviantART
  5. Dribbble
  6. Flickr
  7. Foomark
  8. Formspring
  9. Forrst
  10. Foursquare
  11. Github
  12. Google Reader
  13. Iusethis
  14. Last.fm
  15. PicPlz
  16. Pinboard
  17. Posterous
  18. Reddit
  19. Slideshare
  20. Stackoverflow
  21. Tumblr
  22. Twitter
  23. Vimeo
  24. WordPress
  25. Youtube

Download e installazione

La prima cosa da fare per utilizzare il plugin è inserire jQuery e gli altri plugin necessari al funzionamento all’interno della nostra pagina, inserite queste righe prima del tag .

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script charset="utf-8" type="text/javascript" src="https://raw.github.com/rmm5t/jquery-timeago/master/jquery.timeago.js"></script>

Ora scaricate il plugin jQuery Lifestream premendo il pulsante qui sotto:

[downloadButton title ="jQuery Lifestream" url="https://raw.github.com/christianv/jquery-lifestream/master/jquery.lifestream.js"]jQuery Lifestream[/downloadButton]

caricatelo sul vostro server e inserite questo codice, sostituendo tua/cartella/ con l’indirizzo dello script, sotto al precendente:

<script type="text/javascript" src="tua/cartella/jquery.lifestream.js"></script>

Bene, ora non ci resta di richiamare i servizi che vogliamo visualizzare nello stream!
Sotto agli scripts inseriti prima aggiungiamo questo codice e modifichiamolo inserendo le nostre credenziali ai servizi. Modificando la variabile limit a riga 176 si può variare il numero di post visualizzati.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<script type="text/javascript">// < ![CDATA[
// < ![CDATA[
// < ![CDATA[
    (function(){
      var count = 0,
      list = [
        {
          service: 'bitly',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'blogger',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'dailymotion',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'delicious',
          user: 'inserisci_tuo_user'
        },
        // If you want to fetch your main gallery use your DeviantART nickname.
        //
        // To fetch a gallery folder, add the id after a slash character.
        // Example:
        // Pick the gallery folder url: e.g.
        // http://giuliom.deviantart.com/gallery/30227724 .
        // Append the id, which is 30227724, to your nick obtaining
        // something like 'mgiulio/30227724'
        {
          service: 'deviantart',
          user: 'inserisci_tuo_user',
          template: {
            deviationpost: '<a href="http://inserisci_tuo_user.deviantart.com/">inserisci_tuo_user uploaded a deviation: <a href="${url}">${title}</a>'
          }
        },
        {
          service: 'digg',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'dribbble',
          user: 'inserisci_tuo_user'
        },
        // find your flickr id @
        // http://www.flickr.com/services/api/explore/?method=flickr.people.findByUsername
        {
          service: 'flickr',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'foomark',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'formspring',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'forrst',
          user: 'inserisci_tuo_user'
        },
        // Run javascript:alert(_USER_ID); when you're logged in at google reader
        {
          service: 'googlereader',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'github',
          user: 'inserisci_tuo_user'
        },
        // Go to instapaper.com, click Liked and open rss feed, copy last two parts of the url
        // including the slash
        {
          service: 'instapaper',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'iusethis',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'lastfm',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'librarything',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'mlkshk',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'picplz',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'pinboard',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'posterous',
          user: 'techcrunch'
        },
        {
          service: 'reddit',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'slideshare',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'snipplr',
          user: 'inserisci_tuo_user'
        },
        // Run javascript:alert(userid); when you're logged in at stackoverflow
        {
          service: 'stackoverflow',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'tumblr',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'twitter',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'vimeo',
          user: 'inserisci_tuo_user'
        },
        // [language] Optional setting, defaults to 'en'. 
        // Use wikipedia local site prefix (e.g. 'de' for German)
        {
          service: 'wikipedia',
          user: 'inserisci_tuo_user',
          language: 'en'
        },
        {
          service: 'wordpress',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'youtube',
          user: 'inserisci_tuo_user'
        },
        {
          service: 'facebook_page',
          user: 'inserisci_tuo_user'
        }
      ];
 
      Date.prototype.toISO8601 = function(date) {
          var pad = function (amount, width) {
              var padding = "";
              while (padding.length < width - 1 && amount < Math.pow(10, width - padding.length - 1))
                  padding += "0";
              return padding + amount.toString();
          }
          date = date ? date : new Date();
          var offset = date.getTimezoneOffset();
          return pad(date.getFullYear(), 4)
              + "-" + pad(date.getMonth() + 1, 2)
              + "-" + pad(date.getDate(), 2)
              + "T" + pad(date.getHours(), 2)
              + ":" + pad(date.getMinutes(), 2)
              + ":" + pad(date.getUTCSeconds(), 2)
              + (offset > 0 ? "-" : "+")
              + pad(Math.floor(Math.abs(offset) / 60), 2)
              + ":" + pad(Math.abs(offset) % 60, 2);
      };
 
      $("#lifestream").lifestream({
        limit: 400,
        list: list,
        feedloaded: function(){
          count++;
          // Check if all the feeds have been loaded
          if( count === list.length ){
            $("#lifestream li").each(function(){
              var element = $(this),
                  date = new Date(element.data("time"));
              element.append(' <abbr class="timeago" title="' + date.toISO8601(date) + '">' + date + "</abbr>");
            })
            $("#lifestream .timeago").timeago();
          }
        }
      });
 
    })();
// ]]></script>

e Stylesheet

Ora che tutto il codice Javascript è pronto non resta che inserire 

<div id="lifestream">Loading..</div>

dove vogliamo che venga visualizzato lo stream di tutte le nostre attività online e personalizzarlo con i !
All’interno del vostro foglio di stile inserite e modificate a piacere questo codice: 

    #lifestream {
      background: #333;
      border-radius: 7px;
      color: #d4d4d4;
      width: 450px;
      font-size:11px;
    }
    #lifestream a {
      color: #f6dd97;
      text-decoration: none;
    }
    #lifestream a:hover {
      color: #fff5d8;
      text-decoration: underline;
    }
    #lifestream ul {
      padding: 10px;
    }
    #lifestream li {
      padding: 5px 3px 5px 25px;
      background-repeat: no-repeat;
      background-position: left center;
    }
    #lifestream li:hover {
      color: #e9e9e9;
    }
    #lifestream .timeago {
      opacity: .5;
    }

Con i CSS è possibile visualizzare un’icona dei vari servizi, per farlo basta aggiungere nella head:

<link href="https://raw.github.com/christianv/jquery-lifestream/master/css/lifestream.css" rel="stylesheet" type="text/css">

 

Potrebbero interessarti anche:

  1. Aggiungiamo il supporto a FeedBurner a jQuery Lifestream
  2. ScriptSrc.net, le più recenti librerie javascript a distanza di un click!
  3. Scopri quanto è veloce il tuo sito con Page Speed
  4. Responsive Design, raccolta di articoli e tutorial