Easy HTML Tricks for Blogging

10 Facebook Widgets and Tools for Your Website and Blog

Facebook is the largest social networking site with more than 400
million active users and is growing larger every day! Make sure to use
these Facebook widgets for your website or blog to connect with your
large Facebook audience. You can use these tools to easily share certain
profile information, websites, blogs, and businesses with the Facebook
community.

Personal Profile Widgets

Like Badge

Display your Facebook pages for all to see.

Profile Badge

Create a Facebook profile badge to share selected profile information on
your website. A profile badge will allow your users to easily connect
with you and add you as a friend.

Photo Badge

This photo badge allows you to share your Facebook photos on websites
and blogs. Choose from a vertical, horizontal, or two-column layout and
also choose the number of photos to be displayed.

Basic Widgets for Website or Blog

Like Box

This allows your users to publish their content and activity to Facebook.

Share Button

A powerful facebook widget which allows your visitors to share your content on Facebook! An excellent Facebook widget for blogger.

Page Badge

Lets you share your Facebook page (one that you have created) information on your website.

Twitter Link

Connect your Facebook page with Twitter. Whenever you update your
Facebook page, your twitter followers will be updated as well with a
tweet. A great Facebook widget for your website!

Developers Widgets for Website or Blog

Like Button

Allows facebook users to share web pages from your website on their profile.

Comments Box

Lets your users comment on your website content with their Facebook account.

Recommendations

Provides your website users with personalized suggestions for pages to visit.

Live Stream

Lets Facebook users to post and share content in real-time.

Activity Feed

Lets users know what their facebook friends are doing on your website through comments and likes.

Login Button

Displays a login button along with profile pictures of facebook friends who have already signed up.

Facepile

Shows profile pictures of people who have liked your facebook page or have signed up for your webpage.

Registration

Another way for users to sign up for your site.

Picasa Album Widget

Picasa is the free-to-download,
easy-to-use, and Google-Pushed software tool to manage all your digital
pictures. You can upload your pictures to your Picasa Web Albums. Now,
wouldn't it be nice to have these albums available on your Blog? That is
where this new widget comes in.

This widget will show your public Picasa Webalbums in your sidebar, and links to Picasa itself.
Go to install this widget to your Blog.

In the widget installer, you have to enter the URL of your Picasa Web Albums. So if your Picasa Web Album is stored at http://picasaweb.google.com/yourname, that is what you have to enter in the installer's inputfield.
In the skin of your template, you can add CSS-styling for a new class, bbpicasabox.
An example of the styling definitions is given below:


.bbpicasabox {
  border: solid 1px #000000;
  padding: 5px;
  background: #efefef;
  margin-bottom:5px;
  width: 180px;
  text-align:center;
}

.bbpicasabox a:link, .bbpicasabox a:visited {
  text-decoration:none;
}

.bbpicasabox a:hover {
  text-decoration:underline;
}

.bbpicasabox img {
  border-style:none;
}

BlogToC Widget Released

The job is done. We now have a complete
interactive Table Of Contents. Click the button in my sidebar to display
the TOC. You can sort the TOC by Post Title by clicking the column
header. Click it again, and it is sorted in reversed order. The same way
if you want to sort the posts by date: newest first, or oldest first.
And by clicking on one of the labels in the TOC filters all posts with
that label. Click the column header to return to the full ToC.

Here is how to install it to your Blog.

Step 1: Back Up your Template.

Step 2: Add a HTML Page Element
Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.
Change that line as follows:


<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

Save the template and switch to the Page Elements Tab.
Add a HTML page element above your Blog Posts element.
Leave the title blank. Add the following html:

<br /><div id="toc"></div><br />

Save your template.

Step 3: Add a Sidebar HTML-element
Now add a HTML-element to the sidebar. Set the title to "TOC".
For the contents, enter:

<br /><div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><br /><script style="text/javascript" src="http://kpn.planet.nl/oosti468/downloads/blogtoc.js"></script><br /><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script><br />

Replace YOURBLOG with the name of ...... exactly.
Oh yes, and save.

Step 4: Add custom styles to the skin of your template.
New id's and classes are:
#toc : the div-wrapper that contains the TOC
.toc-header-col1 : header of column 1
.toc-header-col2 : header of column 2
.toc-header-col3 : header of column 3
.toc-entry-col1 : cell in column 1
.toc-entry-col2 : cell in column 2
.toc-entry-col3 : cell in column 3

For your convenience: Beautiful Beta uses the following styling:

<br /><style type="text/css"><br />#toc {<br />  border: 0px solid #000000;<br />  background: #ffffff;<br />  padding: 5px;<br />  width:500px;<br />  margin-top:10px;<br />}<br />.toc-header-col1, .toc-header-col2, .toc-header-col3 {<br />  background: #ffd595;<br />  color: #000000;<br />  padding-left: 5px;<br />  width:250px;<br />}<br />.toc-header-col2 {<br />  width:75px;<br />}<br />.toc-header-col3 {<br />  width:125px;<br />}<br />.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {<br />  font-size:80%;<br />  text-decoration:none;<br />}<br />.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {<br />  font-size:80%;<br />  text-decoration:underline;<br />}<br /><br />.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {<br />  padding-left: 5px;<br />  font-size:70%;<br />}<br /></style><br />

You can add this to the <b:skin>-part of the template, or insert it in the sidebar widget.

Enjoy!

Beyond the 100 posts limit

After a lot of trial and error, and
without having any success to develop a decent piece of programming to
call JSON-feeds recursively, I suddenly had a flash of insight in how we
can cross the 100 posts limit of the Table of Contents Widget. It's all
because of Annie,
one of those friends in the Blogosphere that makes me (and others)
think. She has 101 blog posts, and is in dire need of a Table of
Contents that can list all 101 of them. Well, check out my sidebar, the
link will show Annie's table of contents, with all 101 of them!

The new BlogToc Widget release is updated in several ways:
- it now supports > 100 posts
- the link is more user-friendly
- a note is added displaying number of posts and filter applied

If
you have more than 100 posts, you have to duplicate the
JSON-script-call that is in your sidebar several times, each time with a
different start-index. If you have more than 100 posts, you need 2
calls like this:


<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>
<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=101&max-results=100&callback=loadtoc"></script>

If you go beyond 200, you will have to add another line, starting at start-index=201 and so on.
It is as simple as that. Took me DAAAAAAAAAAAYYYYYYYYYYS to come up with it.

There
is a new class added, .toc-note, that you can use to style the
top-line. I used a simple styling, a 5px left-padding and a 80% font
size.

Next stop: adding customization options (especially language).

Speeding Up BlogTOC

Some of you who are using my (much
appreciated) BlogTOC widget have mentioned the long load times of their
blog as a result of the BlogTOC widget. Also, some of you want to
display the Table of Contents automatically, without the visitor having
to click on the Show TOC link.

Well, I will share some ideas with you regarding this subject.

Speeding up stuff
If
you implement the BlogTOC widget in the standard way, the entire code
of the widget is placed in a Blogger Page Element, usually somewhere at
the top of you blog.
Now, while your Blog is loading, all code is
processed from top to bottom. The piece of code that is the most
time-consuming is the code that retrieves the Blogger Feed, parses it,
and puts the data in a set of javascript arrays. This slows down
loading, but once the data has loaded displaying it is done
lightning-fast.
A good solution is, to move the retrieval-code to a page element that is completely at the bottom of your blog page.
I have moved the code to the bottom of the footer, and that has sped up loading a lot.
The code you have to move is this:

<script src="http://yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=100&callback=loadtoc"></script>

Automatic display of TOC
If you want the TOC to auto-display, add a simple line of javascript code at the end:

<script type="text/javascript">showToc();</script>