Putting social bookmarks
such as blinklist, reddit, digg, rawsugar, furl, delicious, and others
to
Blogware/blogharbor, Blogger and Drupal 4.6/4.7.
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.
DISCLAIMER
All changes to your blog should be done at your own risk so don't sue
me. Don't try and get rich sueing people. Take responsibilty for your
own actions. And for godsake BACKUP BEFORE YOU DO ANYTHING! Don't drink
and code! And if your friend is attempting to code while under
the influence
of
alcohol,
take
his
or
her keyboard.
Quickest
way to add the most Social Bookmarks.
The
easiest and quickest way to place multiple social bookmarks on your page
is to use
Socializer.
Socializer
provides the code in Javascript and PHP. Once the Socializer code is
added to your page or blog the Socializer link will lead readers
who select it
to a page with over 35
social bookmarking sites.
Add
Social Bookmarks to Blogware/Blogharbor:
Step
1. Get the icons. (optional)
Here
they are. Right click and “save file as.” 
Social
Bookmark images are cool on a blog but some times they
are just tacky.
WANT
MORE services check out these sites:
BlogMarketingTactics
- Social
Bookmarking Top Sites
eConsultant's - Bookmarking
Services
3spots... - All
SOCIAL that CAN bookmark (includes icons. By far the best social
bookmarks page/post on the web)
Step
2. Getting to the code in Blogware
Once
logged in to Blogware/Blogharbor (or reseller blogwares)
go to the “Look & Feel” then
click on “Template”
Step
3. What templates to edit
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 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.
******************************************************************
BACK-UP BEFORE YOU DO ANYTHING!!
Blogware/blogharbor allows two methods of editing
the template: download and Copy to the Staging Area.
Although, we will not work from the downloaded copy,
it is a good idea to download the template to your
local machine, 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 to get back to your template.
You can also back up by Copy/Pasting
the Code to notepad.
*****************************************************************
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 do not
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 following code after the
code above (you’ll notice I added the
technorati symbol just before the Cosmos your code
may look different.):
| <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>
MORE HELP on BLOGWARE/BLOGHARBOR HACKS:
If you need further guidance on this hack contanct elamb[dot]security[at]gmail[dot]com
Or if you have specific blogharbor questions ask John
Keegan/Blogharbor guru.
The blogharbor help pages are some of the best blog basics/hacks/help I’ve
seen anywhere on the Net thats why I initially chose Blogharbor:
Blogware/harbor Help
http://www.blogharbor.com/cgi-bin/page.cgi?page=/help.html
Add
Social Bookmarks to Blogger:
Step
1. Get the icons. (optional)
CLICKE HERE TO GET
ICONS ABOVE
Step
2. Getting into the Blogger Template
Blogger login and go to the Template tab.
Step 3: The Social Bookmark Code and Where to
post the code
In the post module located here:
<!--
Begin .post --> (easiest
way to find it is to copy and paste the code
to notepad and "find" <!--Begin .post
-->
Put
this Code in …
<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:
< $BlogItemBody$>
</div>
</div>
It is more efficient to add Socializer code to
your blogger blog since it actually links to over 30 social bookmarking
services:
<script language="javascript" type="text/javascript" src="http://ekstreme.com/socializer/socializer.js"></script>
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.
Add Social
Bookmarking to WordPress
WordPress
has a Quick Social Bookmarking Plugin.
You
can download it at MaxPower.CA
Try
the Social Bookmark Link Creator!
Add Social
Bookmarking to Drupal
Drupal 4.6.X & 4.7.X
I do not recommend altering the drupal
service links module unless you have some understanding of programming and html
or attention to detail and lots of patients. If something goes wrong, it will
be difficult to fix if you don’t know what you typed wrong. Drupal is my
favorite CMS but (much like*nix & any other Open Source) it can be
unforgiving.
Drupal has a module called “service links”
that has Del.icio.us, Digg, Reddit, and Technorati. You will have to add this
module to Drupal. I’ve only worked with 4.6.X and 4.7.X so I’m not sure of how
to add service links with any earlier versions.
******************************************************************
For Lazy People
If you are lazy like me and want to stand
on the shoulders of people before you here is the altered modules:
Drupal Service Links 4.6
Drupal Service Links 4.7
******************************************************************
Get Drupal Modules
http://drupal.org/node/40790 --> Service
Links for Drupal
Download Service Links 4.7.0 | 4.6.0 | CVS
http://drupal.org/node/40790/release
Drupal Service Link Module Summary:
1) Download
the module (unzip *on Windows you’ll need to get rid of the “.tar”)
2) Upload the
unzipped module to your server into the folder called “modules”
a. Once
unzipped you can edit the module and add additional service links (use mine) or
upload first and change as you go.
3) Once the
module is uploaded, you will need to enable it by going into Admin | Module of
Drupal and checking the “enable box”
Drupal Service Links (4.6.0)
The Service Links Module (4.6.0) is one of
the easiest to modify. All I did was add additional links to two parts of the
module:
You will have to add code to the “show_set”
portion:
$show_set = form_checkbox(t('Show
del.icio.us links'), 'service_links_show_delicious', 1,
variable_get('service_links_show_delicious', 1));
And to the “variable_get” portion:
if
(variable_get('service_links_show_delicious', 1)) {
$links[] =
_service_link_build_link(t('Del.icio.us'),
"http://del.icio.us/post?url=$url&title=$title", t('Bookmark this
post on del.icio.us.'), 'delicious.png');
}
Drupal Service Links (4.7.0)
4.7.0 is similar to 4.6.0 but the code is
different.
You will add code to the “$form” portion:
$form['what_links_to_show']['service_links_show_delicious']
= array(
'#type' => 'checkbox',
'#title' => t('Show del.icio.us
links'),
'#return_value' => 1,
'#default_value' =>
variable_get('service_links_show_delicious', '1'),
);
And the “variable_get”:
if
(variable_get('service_links_show_delicious', 1)) {
$links[] =
_service_link_build_link(t('Del.icio.us'),
"http://del.icio.us/post?url=$url&title=$title", t('Bookmark this
post on del.icio.us.'), 'delicious.png');
}
As long as you
pay attention to the brackets and variables you can add any valid service link
you want.
Code Break Down
Most social bookmark code has the following pattern:
(Explaination in RED)
Social Bookmark is simply
creating a link from your page to the desired social bookmarking
web service <a href="http://del.icio.us/post?url=this "post
command sends data from your page to the social bookmarking service.{{permalink_url}}&title={{title}}items
within the brackets are variables. Each blog service (blogger, blogware,
drupal et al) has a different looking variable (see variable table)."> /img
is optional/<img src="/delicious.gif" alt="Bookmark {{title}} in
del.icio.us">/img is optional/Del.icio.us</a>
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$> |
Check
your work
This is perhaps the most important step.
Google’s Blogger:
Click “Preview”
Blogware
Preview:
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.
Ghetto ass Drupal preview:
Drupal can be a real pain in
the carapus but it can also the most
rewarding if your are geek who likes
to tinker.
First off, you have
hopefully backed up the original
WORKING service link module. Once you
have
the settings up just navagate to
the page
to check the settings. O.k. this
is not really previewing but if you
know of a drupal "preview module" let
me know.
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/
