Metadata
- Btn:
g-fb-feedcount - First Release: 2010-01-11
- Code Last Updated:
- Doc Last Updated:
- Status: Experimental
Description
g-fb-feedcount is similar to FeedBurner FeedCount but in pure HTML + CSS.
Demonstration
Default
<span id="lilbtn_g_fb_feedcount"></span>
<script type="text/javascript">
lilbtn_g_fb_feedcount_render('http://feeds.feedburner.com/lilbtnBlog');
</script>
More Than One Subscribers Count
<span id="lilbtn_g_fb_feedcount_1"></span> <span id="lilbtn_g_fb_feedcount_2"></span>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://lilbtn.appspot.com/g/fb/fb.js" type="text/javascript"></script>
<script type="text/javascript">
lilbtn_g_fb_feedcount_render('http://feeds.feedburner.com/lilbtnBlog', 'lilbtn_g_fb_feedcount_1');
lilbtn_g_fb_feed_count_render('http://feeds.feedburner.com/makeYJL', 'lilbtn_g_fb_feedcount_2');
</script>
Localization
<span id="lilbtn_g_fb_feedcount_zh"></span>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://lilbtn.appspot.com/g/fb/fb.js" type="text/javascript"></script>
<script type="text/javascript">
lilbtn_g_fb_feed_render('http://feeds.feedburner.com/lilbtnBlog', 'lilbtn_g_fb_feedcount_zh', {readers: '讀者', subscribers: '讀者數', hits: '閱覽數', reach: '點閱數', on: '於'});
</script>
Installation
The basic install is easy, you only need these:
<span id="lilbtn_g_fb_feedcount"></span>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://lilbtn.appspot.com/g/fb/fb.js" type="text/javascript"></script>
<script type="text/javascript">
lilbtn_g_fb_feedcount_render('http://feeds.feedburner.com/<feed_title>');
</script>
The first one is where the number should be put into, and lilbtn_g_fb_feedcount_render is the main function to do the work.
Customization
Loading Message
You can also give a nice loading message and link it to your feed like:
<span id="lilbtn_g_fb_text">Loading...</span>
Different container
By default, the feedcount chicklet goes to element whose ID is lilbtn_g_fb_feedcount, but you can change to whatever your like. You only need to supply to the render function.
<span id="my_container"></span>
<script type="text/javascript">
lilbtn_g_fb_feedcount_render('http://feeds.feedburner.com/<feed_title>', 'my_container');
</script>
Moreover, you don't have to use <span>, or <div> also work.
Localization
Localization section of Demonstration should explain all.
Style
After the render function render, it will assign the container a lilbtn_g_fb_feedcount class. The DOM looks like:
<span id="blah" class="lilbtn_g_fb_feedcount">
<a class="lilbtn_g_fb_feedcount_link">
<span class="lilbtn_g_fb_feedcount_outer">
<span class="lilbtn_g_fb_feedcount_count">
<span class="lilbtn_g_fb_feedcount_text">
The default CSS can be read at here.
You can have a round feedcount chicklet:
<span id="lilbtn_g_fb_feedcount_round"></span>
<script type="text/javascript">
lilbtn_g_fb_feedcount_render('http://feeds.feedburner.com/lilbtnBlog', 'lilbtn_g_fb_feedcount_round');
</script>
<style>
#lilbtn_g_fb_feedcount_round span {
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
}
</style>