Click HERE for the expanded version of this social bookmarks article. Hope this helps.
This is fairly easy to do but you should have a basic understanding of HTML before you proceed. For those of us who are still learning, this will take patients and some reading.
These are buttons on your blog that allow customers to submit your article to Digg, Del.icio.us and Slashdot at the click of a button.
What is Digg, Del.icio.us, Technorati?
Digg is a user-defined news site similar to Slashdot only better. Del.icio.us is an online social bookmark site that allows you to have all your bookmarks in one place and access them from any computer connected to the Internet. Technorati has mastered tagging for blogs if you have blogware you already have a link for the Technorati Cosmos (code for added this feature are at the bottom of this post). All these tools are HIGHLY effective at getting more traffic, getting Google to index your site constantly and getting submerged into a niche online community that will get you “social traffic.â€
About This Instruction:
This instruction uses specific Blogware/Blogharbor examples. If you’re content manager gives you the ability to get down into Template code you should be able to ad these buttons. Hopefully, this will serve as a decent guide regardless of your tools.
If you’ve got mad skillz, the icons are in Step 1 and the code is in Step 4. Enjoy.
Step 1. Get the icons.
Here they are. Right click and “save file as.†
Step 2. Getting to the code in Blogware and Blogger
Once logged in to Blogware/Blogharbor (or reseller blogwares) go to the “Look & Feel†then click on “Templateâ€
For Blogger login and go to the Template tab.
Step 3. What templates to edit (Google Bloggers go to the bottom of this step)
Within Blogware you will see a bunch of Templates. But we are only interested in two templates: “Article†and “Categoryâ€
If you look at any blog you it will usually see a permalink, comments, link, and/or trackback at the beginning or end of any article. This is what we are looking for when we go into the code.
Click on the “Edit†link for Article template.
You will be taken to the “Select Style†page. Once there, choose your style. If you, your administrator, or reseller hasn’t changed anything you will only have one option, “standard.â€
Finally, you’ll get to the “Edit Template†page.
Back up the Template by selecting download from the Action drop down. We will not work from the downloaded copy. It makes a great reference if you have a hard time figuring out what you deleted to mess everything up. Just do a save as and hit the back but to get back to your template.
Select “Copy†in the Action drop down box.
I don’t recommend working from the download for this particular hack. Downloading automatically changes the paths to your local machine. If you’re lazy like me you don’t want to go back in and figure out all the original paths.
Blogware is great because it will actually allow you to edit a live version of your blogs article template on the fly in what is called a “Staging Area.†From there you can preview changes and eventually save and make it live.
Now you need to find the permanent link, comment code that allows the blog reader to interact with your blog posts. It will look something like this:
BLOGWARE CODE
{{publish_time.hour}}:{{publish_time.min}}{{publish_time.ampm}} ({{publish_time.zone}})
on {{publish_time.month_name}} {{publish_time.day}}, {{publish_time.year}} | <a href=”{{url}}”>PermanentLink</a>{{if cosmos_url}} | <a href=”http://technorati.com/cosmos/search.html?url={{permalink_url}}”><img src=”/technorati.gif” alt=”See this page in technorati”>Cosmos</a>{{/if}}&
You will copy and paste the my code in Step 4 after the Cosmos. (you’ll notice I added the technorati symbol just before the Cosmos.)
BLOGGER CODE (located in Template)
In the post module located here:
<!– Begin .post –>
Put this Code…
<a href=”<$BlogItemPermalinkUrl$>” title=”permanent link”><$BlogItemDateTime$></a>
<a href=”http://del.icio.us/post?url=<$BlogItemPermalinkUrl$>&title=<$BlogItemTitle$> “> <img src=”http://your.blog.com/delicious.gif” alt=”book mark <$BlogItemTitle$> in del.icio.us”>Del.icio.us</a> | <a href=”http://www.digg.com/submit” target=”_new”><img src=”http://your.blog.com/digman.gif” alt=”submit <$BlogItemTitle$> to digg.com”>Digg</a> | <a href=”http://slashdot.org/submit.pl” target=”_new”><img src=” http://your.blog.com/slashdot.ico” alt=”submit <$BlogItemTitle$> to slashdot.com”>Slashdot</a>
Before and after this:
<div>
<$BlogItemBody$>
</div>
</div>
Make sure you preview and test.
You will want to add your code after the last item that allows blog readers to interact with your blog article. This could be the Permalink, cosmos, comment or time. In my case it is my technorati Cosmos search button. For the Techorati button see the code below.
Step 4. Get the Code then Copy & Paste it.
Here’s a break down of the code.
Variables:
Variables differ for each blog type (Table 1.1). No matter what blog type you use you will only need to use two variables for this hack, the permanent link (articles url) of the blog post and its title (name of the Article).
Table 1.1
|
Blog Type
|
VARIABLES
|
|
Blog Permanent Link
|
Blog Title
|
|
Blogware (blogharbor and MANY other resellers)
|
{{permalink_url}}
|
{{title}}
|
|
MoveableType/Typepad
See blog.del.icio.us
|
<$MTEntryPermalink$>
|
<$MTEntryTitle encode_url="1"$>
|
|
WordPress
See blog.del.icio.us
|
<?php the_permalink() ?>
|
<?php the_title(); ?>
|
|
Blogger (see blogger code)
|
<$BlogItemPermalinkUrl$>
|
<$BlogItemTitle$>
|
Make sure you upload the appropriate icons. Here is the code (replace the blogware variables with the appropriate variable:
| <a href=”http://del.icio.us/post?url={{permalink_url}}&title={{title}} “> <img src=”/delicious.gif” alt=”Bookmark {{title}} in del.icio.us”>Del.icio.us</a> | <a href=”http://www.digg.com/submit” target=”_new”><img src=”/digman.gif” alt=”submit {{title}} to digg.com”>Digg</a> | <a href=”http://slashdot.org/submit.pl” target=”_new”><img src=”/slashdot.ico” alt=”submit {{title}} to slashdot.com”>Slashdot</a>
Step 5. Check your work
This is perhaps the most important step.
Google’s Blogger:
Click “Previewâ€
Blogware:
If you’re editing from the “Staging Area†with Blogware/blogharbor, you can “view blog test mode.†This link is located above the staging area. You will have to go to the full article with a permalink (or more link) to see your changes.
Once you have the code how you want it, do the same thing (steps 3-4) with the Category template.
Remember, the Article template only alters the code for the full page view of the article that is in the permalink. If you have little descriptions of each article on your main blog page then you will not see the changes unless you alter the Category template the same way.
BONUS:
To add the Cosmos Technorati search use this code:
http://www.technorati.com/cosmos/search.html?url={{YOUR _PERMALINK_VARIABLE}}
References:
Joshua “Delicious.†Blog.del.icio.us. “This Bookmarkâ€
Absolutely-delicious-complete-tool.
http://pchere.blogspot.com
Mr. Peirce. Blog for Fun and for profit.
Blogharbor John. Blogharbor Manual: Editing Templates.
http://demo.blogharbor.com/
More Links:
Typepad user advice:
http://www.sixapart.com
In Deutche:
http://www.einfach-persoenlich.de
WordPress (found on Digg):
http://www.davidbreyer.com/
All trademarks and copyrights on this page are owned by their respective owners.