(English → 中文) View originalTranslators:
Recently, someone asked me how to put together a link in HTML that, when clicked, took the clicker to their Twitter page with a tweet already filled in. She basically wanted an easy way to let people share her newsletter. I was putting this little color-coded guide together for her and I thought I’d turn it into a blog post. Check it.qczttot87t1ab4t0w4bk2sembvelbasr
Regular Ol’ Links95fp4skdt68at4x190f7dbm9cxkmohbo
To begin, let’s review how to make a simple link in HTML. First, make sure you’re editing in HTML and not Rich Text. You’ll be able to tell because you’ll see a bunch of “55lqt4tvdkm00z02ji1eqt2wi91221vy<"s and ">“s everywhere. Below is a color-coded diagram of the code for an HTML link. (If you’re a newbie to HTML, remember that your code won’t be in color)5adxw62aqr2u6u8ujgub92ffsg9exvwt
- Blue is the HTML code9xhwelezbxlzglx6r31cj85d6hpvdvccn3uw8qjgwegzw7rwr4tcx487tqeh4m1hd1p27e1hozjhumqj1lqfihikj2rlzeq2
- Orange is the URL where the link will goyzbvfjtysg234cfyxrmyy85yctfb2bar
- Black is what the link will saysqn3fv2o506pjpf96y52ehbngrb4fpcxl724mz7jdk980m1yp3q4lzh8tgq3haftftdws2ucxktnonqyhdh1rvr93c68w7p2
Example:gh604r9l9pcfkq9ysqzbc2v21ui09hnf25ivxypcd3fnqjwqhu7jeg5xy30m5g0y864z097g86z8s4k7xen3n5lagx6ynnfm
Googlej0vj9gk1js5sx4wfdwb60xfubj5ne3lo
Share on Twitter Links7rfggdaynhc1gn84i76egi0rf4u29df7
Creating a link to automatically fill in some Tweet text is pretty simple. You just need to know some additional code to stick into the HTML link code. Let’s take a look:d1zc4s0ur61ahokt5h25w3kp0810m69q
To make a link that, when clicked, sends the clicker to this:jjh2wbgkmhd6y6k8y0c223867ks0t0i3wpck9xlj6yqoeaegh14kfzbhcag329pp
…use the following code:vscepkuq2p4we0cp7edsgj0cpj94rp2c57ayqiwtpwyemgp1n42slzz04t9m7he3
Share This on Twitterggor09ainl742thzvhlhhwro3sq7mnwt
- Blue is the HTML code9xhwelezbxlzglx6r31cj85d6hpvdvccn3uw8qjgwegzw7rwr4tcx487tqeh4m1hd1p27e1hozjhumqj1lqfihikj2rlzeq2
- Green is the code that gets Twitter to generate a tweet through a linkr0llnipjqfpd1ykxnzgr6x44tqg6c5ut
- Red is the text of the tweet. You can’t use spaces in this area of HTML but you can get spaces in your tweet text by typing %20 instead.2dc6wpknj1dyngwolimb17zooufw442w
- Orange is the URL that will be included in the tweet. Twitter will automatically shorten it to save space.8mw2249kn7ko6z8c7sh2ha1laxmtgwve
- Black is what the link will saysqn3fv2o506pjpf96y52ehbngrb4fpcxl724mz7jdk980m1yp3q4lzh8tgq3haftftdws2ucxktnonqyhdh1rvr93c68w7p2
Example:gh604r9l9pcfkq9ysqzbc2v21ui09hnf25ivxypcd3fnqjwqhu7jeg5xy30m5g0y864z097g86z8s4k7xen3n5lagx6ynnfm
Share This on Twitter3td3k3sjaen264peswrxwdwqa6frl1gf
Learn how to add #-hashtags and @-tag users with Share this on Twitter links.gxj5lyq1irumhr1ispizi2deu711nyiu
Share on Facebook Linksmokjavyfmxju0tvpf0e8gnxtfbqgz8cc
Creating auto-share links for someone’s Facebook Wall is just as easy.33isluyq3y79qq7y68cmqlkh2why5cwy
To make a link that, when clicked, sends the clicker to this:jjh2wbgkmhd6y6k8y0c223867ks0t0i3wpck9xlj6yqoeaegh14kfzbhcag329pp
…use the following code:vscepkuq2p4we0cp7edsgj0cpj94rp2c57ayqiwtpwyemgp1n42slzz04t9m7he3
Share This Link on Facebooklab9on5iknu4475rvgtz30ocgj2lvep6
- Blue is the HTML code9xhwelezbxlzglx6r31cj85d6hpvdvccn3uw8qjgwegzw7rwr4tcx487tqeh4m1hd1p27e1hozjhumqj1lqfihikj2rlzeq2
- Green is the code that gets Facebook to generate a wall post through a link3aqznb9lm1s2l39e74pxxizf1lplmukf
- Orange is the URL that will be attached to the post.w5hkwil7x5yn7k4n65d0bauhwp7twt9i
- Black is what the link will saysqn3fv2o506pjpf96y52ehbngrb4fpcxl724mz7jdk980m1yp3q4lzh8tgq3haftftdws2ucxktnonqyhdh1rvr93c68w7p2
Example:gh604r9l9pcfkq9ysqzbc2v21ui09hnf25ivxypcd3fnqjwqhu7jeg5xy30m5g0y864z097g86z8s4k7xen3n5lagx6ynnfm
Share This Link on Facebookznjq8xusohkciu33mskpdhndvfx5q34f
What are your favorite tricks to make your links do more?7503pz5kpxrkq0d6avifjgse5xqnus9s
Get more out of your Share on Twitter links with this post
Making a ‘Tweet This’ Button with # and @39549cl2xahm2opaa690m69k8hcge7u8
ezjyjlzqdzquz0zqi19pi21pofa0auuf
(original) View 中文 translation
Recently, someone asked me how to put together a link in HTML that, when clicked, took the clicker to their Twitter page with a tweet already filled in. She basically wanted an easy way to let people share her newsletter. I was putting this little color-coded guide together for her and I thought I’d turn it into a blog post. Check it.
Regular Ol’ Links
To begin, let’s review how to make a simple link in HTML. First, make sure you’re editing in HTML and not Rich Text. You’ll be able to tell because you’ll see a bunch of “<"s and ">“s everywhere. Below is a color-coded diagram of the code for an HTML link. (If you’re a newbie to HTML, remember that your code won’t be in color)
- Blue is the HTML code
- Orange is the URL where the link will go
- Black is what the link will say
Example:
Share on Twitter Links
Creating a link to automatically fill in some Tweet text is pretty simple. You just need to know some additional code to stick into the HTML link code. Let’s take a look:
To make a link that, when clicked, sends the clicker to this:
…use the following code:
- Blue is the HTML code
- Green is the code that gets Twitter to generate a tweet through a link
- Red is the text of the tweet. You can’t use spaces in this area of HTML but you can get spaces in your tweet text by typing %20 instead.
- Orange is the URL that will be included in the tweet. Twitter will automatically shorten it to save space.
- Black is what the link will say
Example:
Learn how to add #-hashtags and @-tag users with Share this on Twitter links.
Share on Facebook Links
Creating auto-share links for someone’s Facebook Wall is just as easy.
To make a link that, when clicked, sends the clicker to this:
…use the following code:
- Blue is the HTML code
- Green is the code that gets Facebook to generate a wall post through a link
- Orange is the URL that will be attached to the post.
- Black is what the link will say
Example:
What are your favorite tricks to make your links do more?
Get more out of your Share on Twitter links with this post
Making a ‘Tweet This’ Button with # and @
