Putting Social Bookmarks button on your blog

     

 
 


 

Social Bookmarking Table of Contents:

Chapter 0: Intro to Social Bookmarking

What are Social Bookmarks?

Why Social Bookmarks?

What you should know before you start.

Effective Use of Service Links

Chapter 1: Web 2.0 Services: Social Bookmarks & feed readers

3Spot's Post on Social Bookmarks

Socializer

Chapter 2: Putting Social Bookmarks on your Blog

Quickest way for the most Social Bookmarks: Socializer

Add Social Bookmarks to Blogware/Blogharbor

Step one: Get Icons

Step two: Get Blogware/Blogharbor Code

Step three: What Templates to edit

Back up before you start

Blogware Code

More Help Blogware

Add Social Bookmarks to Blogger

Step one: Get Icons

Step two: Get Into the Blogger Template

Step three: The social bookmark code and where to put it

Add Social Bookmarks to WordPress

Add Social Bookmarks to Drupal 4.6/4.7

For Lazy People

Get Drupal Module

Drupal Service links (4.6)

Drupal Service links (4.7)

Code Breakdown

Blog Social Bookmark Variable Table

 

 

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

look & feel blogware/blogharbor

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

bogware templates

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.

blogharbor/blogware "copy" template: for social bookmarking

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}} &nbsp;|&nbsp; <a href="{{url}}">PermanentLink</a>{{if cosmos_url}}&nbsp;|&nbsp; <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.):

| &nbsp; <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> &nbsp;| &nbsp; <a href="http://www.digg.com/submit" target="_new"><img src="/digman.gif" alt="submit {{title}} to digg.com">Digg</a> &nbsp;| &nbsp; <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> &nbsp;

< 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> &nbsp;| &nbsp; <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> &nbsp;| &nbsp; <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/

 

 

     

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.