此篇筆記我安裝last.fm.records這個plugin的過程
last.fm.records原本是wordpress的一個plugin
它可以將你的Last.fm "最近聆聽歌曲"用專輯封面的方式呈現在你的blog上
而這個"最近"的區間可以自行設定為一個星期、三個月、六個月、十二個月、全時段或者最常聆聽專輯和最喜愛歌曲。
當然這只是一個資料庫的範圍，在blog上呈現的專輯封面數量可以自行設定
我這裡是設定最近一個星期所聆聽的歌曲並且在blog上顯示前六個專輯封面。
雖然這plugin原本是用在Wordpress上，但是作者也很好心的說明如何在非wordpress上使用這個plugin
我這裡也記錄一下使用的方法，因為當初為了使用這個plunin花了我好多時間才成功
範本開頭貼入三個script
1.jquery
<script type='text/javascript' src='/PATH/TO/jquery.js'></script>
假如沒有安裝請到http://jquery.com/下載
2.last.fm.records.js
<script type='text/javascript' src='/PATH/TO/last.fm.records.js'></script>
到作者官網下載安裝
3.
將YOURUSERNAME更改為自己在last.fm的帳號
count: 6,
要在blog顯示專輯封面的數量
period: '7day',
資料庫顯示的時間範圍
refresh: 5,
設定要幾分鐘向last.fm要資料
offset: +8
你所在的時區，台灣+8
在範本的CSS欄位貼上
這裡的CSS必須根據自己的sidebar和整體的範本做微調
最後在sidebar新增一個小工具並且貼上下面這一串就完成了
<div id="lastfmrecords"></div>
last.fm.records原本是wordpress的一個plugin
它可以將你的Last.fm "最近聆聽歌曲"用專輯封面的方式呈現在你的blog上
而這個"最近"的區間可以自行設定為一個星期、三個月、六個月、十二個月、全時段或者最常聆聽專輯和最喜愛歌曲。
當然這只是一個資料庫的範圍，在blog上呈現的專輯封面數量可以自行設定
我這裡是設定最近一個星期所聆聽的歌曲並且在blog上顯示前六個專輯封面。
雖然這plugin原本是用在Wordpress上，但是作者也很好心的說明如何在非wordpress上使用這個plugin
我這裡也記錄一下使用的方法，因為當初為了使用這個plunin花了我好多時間才成功
範本開頭貼入三個script
1.jquery
<script type='text/javascript' src='/PATH/TO/jquery.js'></script>
假如沒有安裝請到http://jquery.com/下載
2.last.fm.records.js
<script type='text/javascript' src='/PATH/TO/last.fm.records.js'></script>
到作者官網下載安裝
3.
<script type="text/javascript">
jQuery(document).ready( function() {
var _config = {
// last.fm username
username: 'YOURUSERNAME',
// number of images to show
count: 6,
// period to get last.fm data from
period: '7day',
// when to get new data from last.fm (in minutes)
refresh: 5,
// difference between your timezone and GMT.
offset: +8
};
lastFmRecords.init(_config);
});
</script>
將YOURUSERNAME更改為自己在last.fm的帳號
count: 6,
要在blog顯示專輯封面的數量
period: '7day',
資料庫顯示的時間範圍
refresh: 5,
設定要幾分鐘向last.fm要資料
offset: +8
你所在的時區，台灣+8
在範本的CSS欄位貼上
/* lastfmrecords
-----------------------------------------------
*/
#lastfmrecords{
position: relative;
left: 20px;
}
/* thx to http://cssglobe.com/lab/overflow_thumbs/ */
#lastfmrecords ol,#lastfmrecords li{
margin: 0;
padding: 0;
list-style: none;
}
#lastfmrecords li{
float: left;
margin: 0px;
}
#lastfmrecords a{
display: block;
float: left;
width: 100px;
height: 100px;
line-height: 100px;
overflow: hidden;
position: relative;
z-index: 1;
}
#lastfmrecords a img{
float: left;
position: absolute;
margin: auto;
min-height: 100px;
}
/* mouse over */
#lastfmrecords a:hover{
overflow:visible;
z-index:500; border:none;
}
#lastfmrecords a:hover img {
border: 1px solid #999;
background: #fff;
padding: 3px;
margin-top: -20px;
margin-left: -20px;
min-height: 120px;
}
這裡的CSS必須根據自己的sidebar和整體的範本做微調
最後在sidebar新增一個小工具並且貼上下面這一串就完成了
<div id="lastfmrecords"></div>
