How To Build Your Own Share By Email Button

Fatima Williams commented on Milos Djukic's post, "Fractals, Beauty of Complexity (and Chaos)." In her comment, Fatima asked about a Share via Email function. 

Franci "Legs" Hoffmann also asked about it.

Frankly, I thought Share via eMail already existed.

I checked. It didn't.

Four things popped into my head. 

• I've been here since mid-February 2016 and never noticed the lack of a Share Via eMail function. I'm guessing it won't rank very highly on the "New Things to Code Into The Platform" list.
• My sense of chivalry (although perhaps now an outdated concept) incites me to act. Here we have not one, but two damsels in distress. Besides, Fatima's Twitter handle is @tina_ariesgal. I can't refuse to help a fellow Aries.
• Playing with URLs requires encoding. It isn't hard to do. You can't have spaces (and some other stuff) in URLs. Encoding fixes that. The last time I did anything similar to this I got carried away. I ended up building a whole freaking web app. It's now probably the most feature-rich, least-costly Social Media Management System there is. And it was built right here from bees' suggestions. Check it out here.
• I need to come up with an easy-peasy way to do this. One web-app at a time is plenty. I actually found three. One only works on beBee, one is very easy, the other is super-duper easy. It’s easier than falling off a bar stool after your 12th drink. It’s waaay down at the end of this post.

What is an email link?

An email is just a different flavor of a web link. You use those every day. 

They don't scare you. 

Email links shouldn't scare you either. If anything, they are less complex than web links.

Let's break down a typical web link, 

http://www.example.com/BSfolder/index.html?source=beBee&test=Why%20not

The "http://" part says that this is a hypertext protocol link. That's a fancy-pants way of saying it's a link to a website. Your browser now knows it should look for a website called "example.com".

If it finds the site, it should look for a file or directory whose name is whatever is after the /. Here it’s BSfolder which is a directory or folder. If it looks like a path on your computer, that's because it is. It's a path on a remote server.

If it finds a directory, it will jump to whatever's after the next / and do it again. It keeps going until it finds a file name to open. 

In our example, it opens the file index.html that it found in the BSfolder directory.

So Far so Good. What’s with the gobbledegook at the end?

The ? and the & are important. Think of the ? as meaning "I'm sending you variables and their values now."

The & means exactly what you think it means.

Here we told the browser to open file index.html and assign "beBee" to the variable source AND "Why Not" to the variable test. 

Notice that I replaced the %20 part with a blank space.

A blank space signals the end of the link. If you have a blank space inside your link, you’ll confuse the browser. They’re quick, but not overly bright. 

Think of the %20 as a placeholder for the space between the words. You can use a + sign too.

OOOH, so complex, right?

That's URL encoding. Big whup. 

Let's Build a Link to Share Milos' post via eMail

First off, let's figure out what we want the email to say. 

mail to = I don't know about you, but I'd rather not have my email published at large. If you don't mind, you can add as many as you like. Just separate them with commas. To be safe, I'd ask permission before adding any emails here.

cc = Ditto

bcc = Ditto

subject = "I think you will like this post by Milos Djukic on beBee"

body = a link to the post

Those are the ingredients. You don't need them all on every link. Just use the ones you want/need. Here, we’ll only use a subject and a body.

Now for the link.

We saw that a website uses hypertext protocol, http: . What does email use? 

It uses mailto: . Cryptic, huh?

Our email link starts with mailto: followed by one or more email addresses separated by commas. Don't use a comma if there's only one address.

You could also just start with mailto: and forget about email addresses altogether. Believe it or not, even an address is optional in a mailto link.

In fact, the word mailto: above is a live link. It will open a new empty email for you. Go ahead, try it. I’ll wait.

An empty email is not very useful. Let's dress it up by adding a subject line.

A subject is just a variable called, you guessed it, subject. 

The first variable has a ? in front of it. Any others have a &. Their order is unimportant.

mailto:?subject=I think you will like this post by Milos Djukic on beBee

That link won't work anywhere except beBee. I think you now know why. The browser will think the link ends after “=I”. 

It sort of works on beBee. To my great surprise, I saw that beBee fixes encoding automatically. I wish I had tested the links before writing this whole post. No matter. 

mailto:?subject=This is pretty cool Bebee fixes encoding!

The above link shouldn't work, but does on beBee. There is a trick to it, though. When you first type in the link, it breaks after This, at the first space. That's as it normally is. That's as it "should" be.

Copy the whole thing and paste it in as a link and it works. It shouldn't, but it does, Someone was thinking ahead when they wrote the back end.

Talk about "undocumented features!"

Ya gotta love these guys.

Easy Encoding

If you were doing this for real, you would start in your word processing software. Here, let’s just copy the link and paste it into a new Word file.

Using the word processor’s Find/Replace function, replace all spaces with %20 or +

You’ll end up with this

mailto:?subject=I%20think%20you%20will%20like%20this%20post%20by%20Milos%20Djukic%20on%20beBee

Much better. This one works, but still isn't complete enough. Let's add the body. It’s just a link to Milo's post, namely 

https://www.bebee.com/producer/@milos-djukic/fractals-beauty-of-complexity-and-chaos

FYI: If you see a # near the end of a link, don't use it. It's another way to pass some information along. The link I had on my browser was to https://www.bebee.com/producer/@milos-djukic/fractals-beauty-of-complexity-and-chaos#c82

That means go to Milos' post, jump to comment number 82. If that’s what you want, fine. Otherwise, get rid of everything from the # to the end.

Anyway, let's add the link to our mailto, which now becomes

mailto:?subject=" rel="nofollow" target="_blank"> I%20think%20you%20will%20like%20this%20post%20by%20Milos%20Djukic%20on%20beBee&body=https://www.bebee.com/producer/@milos-djukic/fractals-beauty-of-complexity-and-chaos

We don’t need to do anything to the post link. beBee took care of that.

And that's all she wrote. Well, I'm a "He," but you get what I mean.

If your link doesn’t work

Check to see that a blank space didn’t sneak into the link. Word has an annoying tendency to insert spaces before pasting.

If that isn’t the problem, then your subject line may be using characters that have special meaning to a URL. They're known as reserved characters.

Your best bet is to be clever enough to avoid them. But, if your name is D’Arcy N!Good, you won’t have a choice. That ‘ needs to be encoded by %26, and the ! by %21.

Here’s a table of reserved characters and their encodings. I added it just to be complete. You probably won't need to know it. 

Jump right over the table if you like. I won't get insulted. In fact, I suggest you edit your subject line rather than dive too deeply in encoding.

Reserved characters before and after percent-encoding

• space becomes %20 or +
  
• ! becomes %21
• " becomes %22 (Don't use smart-quotes or curly quotes on anything that may become a URL. There lie dragons!)
• # becomes %23
• $ becomes %24
• % becomes %25
• & becomes %26
• ' becomes %27
• ( becomes %28
• ) becomes %29
• * becomes %2A
• + becomes %2B
• , becomes %2C
• / becomes %2F
• : becomes %3A
• ; becomes %3B
• = becomes %3D
• ? becomes %3F
• @ becomes %40
• [ becomes %5B
• ] becomes %5D
• ' becomes %60
• If you want a bigger, fancier body, you will probably need to add line feeds or carriage returns. Use %0D%0A to cover all bases. Unix, Windows, old Apples and new Apples use one or the other. Don't ask.

Now for The Easy as Falling Off a Bar Stool Part

The “complicated” part is building the email’s subject line. Here's the thing. You only need to do that once.

Milos would simply paste the link to match every post.

You can do the same. Just replace Milos%20Djukic with your-first-name%20your-last-name.

But wait, There’s more!

To thank you for reading all the way through this thing, here’s a couple of gifts. Actually, they’re a couple of GIFs. No, wait, they’re PNGs. beBee doesn’t accept GIFs. 

That's probably because GIF is an image format owned by Compuserve. 

Smart.

No matter. Let’s just call them icons and be done.

Feel free to copy them and use them as your Share to Email icons. The first one is active.

Drawbacks to this method

This type of thing is supposed to be done within a HTML href where you have greater control over the environment. 

No such luck here.

Clicking a Share to Email link will open a new email. It will also open a new empty browser tab. 

Since we are specifying the email's body content, we will overwrite any signatures associated with a new email. No biggie, this method just opens a prepopulated email, it doesn't send it.

The user is free to make any modifications before hitting the send button. That includes adding their signature back in.