Sharing links without a social image can turn powerful content into a flop. How can we take advantage of the real estate social media gives us when sharing our hard work on Github?
Want to skip ahead of the “what” and “why”? Jump to the “how”!
Impact of images in social media
Any social media feed is a flurry of content that can be difficult to completely digest. As you swipe or scroll through the feeds, you’ll be met with some text-based content and a ton of media.
And this is for a good reason! As you scan the example above, what stands out? Not the Dust Particle retweet from CodePen on the left, but the AWS in the middle, dog nose in the top left, and Al Pacino in the top right among the other large media posts.
Images, gifs, and videos are a good way to provide eye-catching content. As a bonus, they typically take up much more space in the feed, making it even more likely you’ll get a chance to see it.
The bare minimum on Github
When sharing your Github projects to social media, the default option is pretty bland. Take this tweet as an example:
need to import emojis from another Slack workspace? fret not, there is now a script! https://t.co/cNKihZyCMP
— Colby Fayock (@colbyfayock) February 8, 2020
Github gives us a simple social media card that’s comprised of our Github avatar, the path of our project, and the short description from the top of the page.
Now it’s great they even show a card to begin with and to be fair, what would they show? But this tweet is going to get skipped pretty easily in people’s feeds between big, shiny images.
Github social media images
Luckily, Github provides us with a nice and easy way to add an image to each repo that can help the content we share work for itself a little more.
With a little creative work, we can upload an image that will that will take advantage of the space on people’s feeds and get your work the attention it deserves.
Before we dive in, it should be noted that you must have the appropriate access to be able to modify the settings of the repository in order to change the image. If you created the repo, chances are you have this access.
Finding or creating an image
Before we upload an image, we need an image in the first place. You can go one of two routes: finding an image or creating a new one.
If you want to go the simple route, you can look around for free to use images that are pretty easy to find on the web. A favorite of mine is Unsplash, as you’ll typically find high quality images, but there are a ton of others you can find with a simple search. However, adding photos is usually better served for blog posts and content-based posts.
JAMstack sites are all the rage right now, and for good reason – they’re fast, and it’s pretty easy to get started building one.
If you want to learn more, this article by @colbyfayock will show you what the JAMstack is and how to dive right in.https://t.co/7NaiUUsAou
— freeCodeCamp.org (@freeCodeCamp) February 19, 2020
The better route is to create your own. The advantage of creating an image is you can customize it with large text to catch some extra attention in the feed.
There are a ton of free tools that are available that allow you to create an image starting with a social media specific template, so you don’t need to spend the money on Photoshop to get there.
The only requirement for your image is that its size must be at least 640×320px. If possible, strive for at least 1280×640px to make sure the image is showing at a high resolution in feeds.
Adding an image to your Github repo
Once we have our image, we’re just left with adding the image to our repo, which is arguably the simpler part.
First, navigate to the Settings of your Repo using the tab navigation towards the top of the page. As a reminder, you need to be able to modify the settings to change the image.
Next, scroll down to the Social Preview section, where if you don’t currently have an image set, you’ll find a big empty rectangle with an edit button in the bottom left corner.
Click the Edit button, select Upload an image, then find your image on your computer and select the file.
Once selected, your image file will be uploaded to Github and set as your social image!
Previewing your new image
When you’re done uploading your image, you can make your way to your favorite social platform and give it a try. Posting to Twitter for example will now show a nice big image instead of your small Github avatar!
Easily spin up a @reactjs mapping app with this @gatsbyjs starter https://t.co/x0YJUuAzvz
— Colby Fayock (@colbyfayock) February 20, 2020
As you can see, this tweet is maximizing the space available and getting the point across about what the project is about.
A few tips when creating images
Large, simple text
It can be easy to get caught up in over-designing a graphic or not paying enough attention to the font size. Make sure you use big letters with a font that’s easy to read, so when someone scrolls past your post, they can understand it and not just skip it.
Add a logo
Do you have a logo for your project? Or is it a plugin for a specific tool? Try adding a logo to immediately give context about what the project is about!
Maximize resolution
No one likes looking at poor quality images. Take advantage of all of those precious pixels and upload an image that will translate to high quality in a feed. Github particularly recommends an image size of at least 1280×640px.
Have any other tricks to maximize sharing on social?
Share your favorite tips with me on Twitter!
