Here is how you can share social media sharing URL when we can't use Non-alphanumeric characters.
So to include a colon (:), slash (/), ampersand (&), question mark (?), etc., we have to use (gulp) the HTML numeric code for that character.
To use this inside of one of the social networking site’s URL’s, we’re going to need to change all of those non-letter characters to HTML codes. Here’s that cheat sheet I was talking about.
Change the colon (:) to %3A
Change all slashes (/) to %2F
Change all question marks (?) to %3F
Change all ampersands (&) to %26
Change all spaces ( ) to %20
When you make those substitutions, your URL will look like this:
Ugly, but browsers will read them just fine. To create those social links just replace the bit that matches our dummy address above with your own.
Facebook: For this link, we’re going to replace the web page URL, which goes after the “u=” attribute, and we’re also going to pre-enter some text (the author’s name and the book’s title, in this example) after the “t=” attribute. For that text, instead of using %20 for spaces, use the plus symbol (+).
Twitter: This link is easy; just paste our doctored URL after the “url=” attribute:
Pinterest: For this link, we’re going to use your web page’s actual, undoctored URL, and we’re again going to pre-enter some text—your name, the book’s title, and more text (the short description, for example) after the “description=” attribute.
This time, we’re using %20 for spaces. We are also going to need a web address for your cover art (here called “cover.jpg”) which goes after the “media=” attribute.
http://www.yoursite.com/yourbookpage/?detail&buy
To use this inside of one of the social networking site’s URL’s, we’re going to need to change all of those non-letter characters to HTML codes. Here’s that cheat sheet I was talking about.
Change the colon (:) to %3A
Change all slashes (/) to %2F
Change all question marks (?) to %3F
Change all ampersands (&) to %26
Change all spaces ( ) to %20
When you make those substitutions, your URL will look like this:
http%3A%2F% 2Fwww.yoursite.com%2Fyourbookpage%2F%3Fdetail&buy
Ugly, but browsers will read them just fine. To create those social links just replace the bit that matches our dummy address above with your own.
Facebook: For this link, we’re going to replace the web page URL, which goes after the “u=” attribute, and we’re also going to pre-enter some text (the author’s name and the book’s title, in this example) after the “t=” attribute. For that text, instead of using %20 for spaces, use the plus symbol (+).
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.yoursite.com%2Fyourbookpage%2F%3Fdetail&26;buy&t=Your+Name+-+Your+Title&display=popup
Twitter: This link is easy; just paste our doctored URL after the “url=” attribute:
https://twitter.com/intent/tweet?url=http%3A%2F%2Fwww.yoursite.com%2Fyourbookpage%2F%3Fdetail&26;buy
Pinterest: For this link, we’re going to use your web page’s actual, undoctored URL, and we’re again going to pre-enter some text—your name, the book’s title, and more text (the short description, for example) after the “description=” attribute.
This time, we’re using %20 for spaces. We are also going to need a web address for your cover art (here called “cover.jpg”) which goes after the “media=” attribute.