Image for post
Image for post
Inject some HTML into your dribbble shots!

Simple HTML in Your Dribbble Shot

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.

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.

Image for post
Image for post

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.

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=””> 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.

Image for post
Image for post
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.
Image for post
Image for post
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="" rel="nofollow noreferrer">Instagram</a> | <a href="" rel="nofollow noreferrer">Facebook</a> | <a href="" rel="nofollow noreferrer">Twitter</a> | <a href="" rel="nofollow noreferrer">Twitch</a> | <a href="" rel="nofollow noreferrer">YouTube</a> | <a href="" 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

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store