Inject some HTML into your dribbble shots!
Brant Day
Brant Day
May 23, 2016 · 3 min read

Trust me, its easier than you think. I’ll take a recent shot of mine and walk you through the steps and give you a couple ideas for how other people are using it on Dribbble. I’m a designer not a developer, so there’s probably a lot more you can do when adding a shot but we’ll start with the basics for now.

Who Is Doing It and Why?

As someone who wants more followers on dribbble (it’s a drug, I wrote about my insecurities and dribbble here) I’d like to use it to its fullest. I realized that one of the best ways to allow people to consume content that I was creating was to make sure I was linking to the places where I create content. I noticed that many of the people I respected and admired on dribbble were using text links regularly.

Take a moment or two and think about what you want to promote and why. I chose the social media channels that I use to promote my work the most. These are the links that the audience on dribbble will be the most interested in and therefore want to access it.

Embedding an HTML Link in Your Shot

The HTML is simple and easy and can be embedded at the beginning, end, or in the middle of a sentence. Depending on where and how you us it will determine how you put it together.

The code snippet is simple:

<a href="your web url" rel="nofollow noreferrer">Instagram</a>

Here’s the basic breakdown of whats happening.

<> = These brackets will contain one section of the code. One starts it and one ends it but the code string wont close out until you use a special closing bracket. You can start a bracket with a piece of HTML for example, if you wanted to add a paragraph to a page you would start with <p>

</> = this is a closing bracket. If you wanted to close the paragraph once you’ve added your content you would enter </p>

a href= This is your link tag. After this tag you should enter the URL in quotation marks of the site you are linking to. The <a> is the HTML component but you add in the href after which looks like <a href=”www.url.com”> and then close it with </a>

To give your link a name you enter the text inbetween the opening and closing bracket. <a> Name of link </a>. Easy peasy.

For my dribbble I put my links at the end of every shot to make sure people can get to my other social media accounts.
The finished product.

Thats its! There’s some other simple HTML you can add in your snippets but for the simple links thats all you have to do. See below for my social media code snippet.

*please note that dribbble adds the rel=“nofollow noreferrer” part and that you should also make sure you are using hash marks not quote marks…

<a href="https://www.instagram.com/wattlendaub/" rel="nofollow noreferrer">Instagram</a> | <a href="https://www.facebook.com/wattlendaub/" rel="nofollow noreferrer">Facebook</a> | <a href="https://twitter.com/Wattle_n_Daub/" rel="nofollow noreferrer">Twitter</a> | <a href="https://www.twitch.tv/wattlendaub" rel="nofollow noreferrer">Twitch</a> | <a href="https://www.youtube.com/channel/UCUInV_hcIU_H6GODpmAZ2-g" rel="nofollow noreferrer">YouTube</a> | <a href="https://medium.com/@wattlendaub" rel="nofollow noreferrer">Medium</a>

You’ll notice inbetween the links <a href></a> I add a vertical line
( shift \ ) in order to separate the links.

Good luck everyone!

Dribbble | Twitter | Instagram

Brant Day

Written by

Brant Day

Experience Designer @slalom. Founder, designer, and Illustrator @wattle_n_daub. Boring people to death with UX, illustration, typography, and identity design.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade