fbpx

Making Your Own Custom Facebook and Twitter Share Links/Buttons for Beginners

by Nate Hoffelder

After a decade of running The Digital Reader, Nate is a veteran web publisher with experience in design, maintenance, recovery, and troubleshooting. What little he doesn't know, he can learn.

May 14, 2018

Share buttons for social media such as Facebook and Twitter are a great way to grow your audience organically and let your readers support your work by sharing it their social media networks. The buttons are so popular that dozens of companies like AddtoAny offer plugins that make it easy to add share buttons to a website (mailing list services like Mailchimp offer a similar feature in their campaign editors).

Those pre-made share buttons are useful, yes, but have you ever considered taking things to the next level by crafting your own custom share buttons?

I am currently developing a newsletter based on my Tech Tools for Authors post series (you can sign up here), and one thing I decided I wanted to do was add custom share links that referenced my website. Mailchimp doesn’t quite offer the feature I want, so I went looking for a solution, and found it.

Both Facebook and Twitter offer easy ways for you to make a shareable link for your readers to click, and Twitter even makes it easy for you to choose the text snippet and hashtags for your reader to share with their friends on the social network.

If you can format and edit a blog post and insert a link then you have the skills to use the trick I am about to show you.

Facebook

You can make your own share link for Facebook by taking the following URL, adding a different URL to the end, and then inserting the whole thing as a link.

Take this:

https://www.facebook.com/sharer/sharer.php?u=

And add a link like this to the end:

  https://the-digital-reader.com/2018/05/14/making-your-own-custom-facebook-and-twitter-share-links-buttons-for-beginners/

You’ll make something like this:

https://www.facebook.com/sharer/sharer.php?u=https://the-digital-reader.com/2018/05/14/making-your-own-custom-facebook-and-twitter-share-links-buttons-for-beginners/

Which you will insert as a link. Here’s an example:

Click to share on Facebook.

I know that looks messy at first, and that this could feel like more trouble than it’s worth, but I assure you that it does have its uses (which I will explain later in the post).

BTW, if you have some programming skill, you can specify the text snippet to be shared on FB in addition to the link. That is considerably more difficult, but also much more useful. (You can read more about this on StackOverflow.)

Twitter

Twitter lets you do so much more than Facebook does. It really only take a little work to make a share link that includes text, hashtags, and a URL.

Take this URL:

http://twitter.com/share?text=

And add a text snippet for your readers to share

Nate is a genius

Then add this to the end

&url=

And a URL like

  https://the-digital-reader.com/2018/05/14/making-your-own-custom-facebook-and-twitter-share-links-buttons-for-beginners/

And if you want to include hashtags, add this

&hashtags=hashtag1,hashtag2,hashtag3

When you are all done you will have a link like

http://twitter.com/share?text=@thDigitalReader Showed me this really cool trick for creating shareable links&url=https://the-digital-reader.com/2018/05/14/making-your-own-custom-facebook-and-twitter-share-links-buttons-for-beginners/&hashtags=socialmedia,marketing,ebook

Insert that long line of text as a link like so:

Click to share on Twitter.

What’s it good for?

I know this might seem like a lot of work for a feature that basically duplicates existing share buttons, but the cool thing about the above tricks is that they work where share buttons do not.

For example, if you are reading this post in an email newsletter or a feed reader like Feedly, please do me a favor and click on the above link.

Note how it took you to a new tab (or window) showing the sharing box on Twitter. That right there is why this is important; harnessed properly, this trick can drive a lot of traffic.

You can use this one simple trick to help your readers share any link you choose. If you want to ask your newsletter subscribers for their support for your latest Kickstarter campaign, you can use a link to the campaign page. Or if you want your blog readers to share a page on your site, you could use a link to that page.

And that’s just the beginning.

Once you have the basic trick down pat, you should try inserting the link into an image or graphic. Or, you might put the link in its own little sidebar with formatting that draws the eye and encourages readers to click.

The sky is the limit.

Hi, I'm Nate.

I build and fix websites for authors, and I am also a tech VA. I can build you a website that looks great and turns visitors into fans, and I can also fix your tech when it breaks. Let me fight with tech support so you don’t have to.

My blog has everything you need to know about websites and online services. Don’t see what you need. or want personalized help? Reach out.

You May Also Like…

7  Website SEO Tips for Authors

7 Website SEO Tips for Authors

Search Engine Optimization, or SEO, is a vast and complicated topic with ever changing best practices. Google changes...

5 Comments

  1. Felipe Adan Lerma

    Have bookmarked this for future (ie, a better) go-over; looks extremely useful, thanks!

    Reply
  2. Jo

    Thank you so much for this! It’s the only thing that has worked to add share buttons on Squarespace.

    Reply
  3. Thomas Diehl

    Excellent, thank you! I had removed those buttons when GDPR hit because I did not know reliably what the plugins I used did with user data. Now I have social media buttons again and with far more control of what they do, too.

    Reply
  4. Y2MATE

    Great post, Nate! I’ve always wanted to add custom share buttons to my blog but didn’t know where to start. Your step-by-step guide makes it so easy to follow. Can’t wait to try it out! Thanks for sharing!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Skip to content