eLearning Development and Consultations
Online Colleges

Find your perfect Distance Learning Program!

Search online colleges:

Why Choose Us?

Instructional Design and Development Consultant and consultations in elearning and distance education. We aim to provide tips and ideas for your e-learning projects....From Freelancers to development tips as well as providing students the resources they need to successfully complete online training. You want to make the right choices when you create your e-learning program.

Creating Custom Share Buttons

Most of the popular social service out there offer pre-made javascript buttons that allow you share your pages or articles on their service.While this does make it easy, there is one problem with using their code
generating methods; you are stuck with their styles and icons.

I wanted to use a custom style with a different set of icons. To
accomplish this, I had to take advantage of the services various “URL”
submission methods.

All the services offer this method, but most of them are poorly
documented and are hard to find details on.

After spending hours browsing the web for the various “URL” submission
methods, I decided that once I finished I would post them all together
in one place so people

can easily find them and create their own custom share buttons. Below, I
am going to offer you the various services URL’s and teach you how to
use them on your site.

Twitter

http://twitter.com/home?status=[TITLE]+[URL]

Digg

http://www.digg.com/submit?phase=2&url=[URL]&title=[TITLE]

Facebook

http://www.facebook.com/share.php?u=[URL]&title=[TITLE]

StumbleUpon

Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

Google Buzz

http://www.google.com/reader/link?title=[TITLE]&url=[URL]

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]

Posterous

http://posterous.com/share?linkto=[URL]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Google Bookmarks

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Friendfeed

http://www.friendfeed.com/share?url=[URL]&title=[TITLE]

Those are the URL’s you need to know, now, I know some of you are say
what do I do with them? These are the URL you link your social icons
too. Replace [TITLE] with the title of the page or article.

Replace [URL] with the link back to the page or article. Both of
these values need to be URL in encoded for the submissions to process
correctly. If you are using php, you can easily URL encode anything
with:

<?PHP echo urlencode("VARIBLE"); ?>

If you are using WordPress, you can easily substitue the [URL] and
[TITLE] values with WordPress codex functions. Below is the code you can
use to replace the [TITLE] value:

<?php print(urlencode(the_title())); ?>

Now, the the code to replace the [URL] value:

<?php print(urlencode(get_permalink())); ?>

<p>Now, lets take a look at it all put together for a general page with
a “Share on Twitter” button:

<a href="http://twitter.com/home?status=This is the blog
title.+http%3A%2F%2Fatlchris.com%2F1656%2Flink-to-page">

<img
src="http://www.distantelearning.com/blog/wp-content/uploads/2011/04/twittericon.png"
height="18" width="18" alt="Share On Twitter" /> </a>

Now, a wordpress example. This example substitutes the [TITLE] and [URL]
values automatically with the current articles information with URL
encoding:

<a href="http://twitter.com/home?status=<?php print(urlencode(get_permalink())); ?>+<?php print(urlencode(the_title())); ?>">
<img src="http://mudstock.com/wp-content/themes/ATLChris/images/twitter.png" height="18" width="18" alt="Share On Twitter" /> </a>

I hope this helps to you create your very own custom share buttons.


Leave a Reply