Website and social media badges go a long way in showing one’s support and credentials in a fun and customizable way. Whether you use them to highlight a cause or to just display something to show your support of a content creator, there’s no wrong reason to make one or to learn how to make one.
What is a social media/website badge?
A social media badge should be a PNG image (transparent background) that you can embed on your website, or add to your social media banner itself. They come in many shapes and sizes, but they will be present to denote that your listeners are part of a group, someone has received an online award/certification, or you are raising awareness for a cause. For example, Podbean created badges to celebrate our users’ downloads.
Some will use the badges on their own website to include links as well, to direct their followers to where they can learn more about a certain topic or cause. This would include buttons that lead to donation sites like PayPal or Ko-Fi, to your patron page, or even to external information available for charities and events. [gotta find a good example here]
Why should you make one?
By giving your followers and listeners a social media badge, you’re giving them a fun way to show their support for you and your content. It’s also a stationary fixture, meaning that whoever goes to their account will see the badge and that it’s connected to your content. This, in turn, acts as a way to promote your podcast to an audience you may not have reached yet.
What are things to make badges for?
The list is limitless! Make badges for:
- Patrons
- General fans
- Convention/event participation
- Holidays
- Fundraiser or charity event participation
- Release of a long-awaited episode
- Awareness campaigns (charity, fundraisers, petitions, etc)
- Your personal shop
How do I make a social media badge?
There are multiple ways to create a social media badge, and we’ll highlight a few of them here:
1. Use a site like Accredible’s Badge Builder
Accredible has a whole site built around building a social media/website badge. Their badge builder comes with a wide variety of shapes, ribbons, and other various add-ons in every customizable color.
Once you finish making the badge, you can download it as a PNG or an SVG file, perfect for putting on the side of your website or putting in a social media banner.
The badge-building site even allows you to upload your own images, allowing you to utilize your podcast cover or logo in whatever badge you create.
The badges exported from this badge builder are 400×400 pixels. It can be resized with some success in photo-editing software like GNU or Photoshop and retain its transparency. While it’s good to create badges in multiple sizes for multiple uses, the 400×400 pixels should be about the larger you go. And once you go smaller, the text does become harder to read.
All in all, Accredible’s Badge Builder is a great site to start with to get some custom badges made for you and your audience!
2. Make it yourself in your preferred editing software
You can use various graphic editing software such as Adobe Photoshop, Pixelmator, and others to further create and customize your social media badge. Here are some tips to start with:
- When starting the new project, remember to set the background fill as “Transparency” to ensure that your badge background is transparent.
- Save your files as a .PNG file type. Saving a .JPG file will keep the background color from the project (or if no background color was used, will default to a white background).
- Keep your word usage to a minimum, and keep the font large and readable
- Much like the above badge, remember that 400×400 pixels is the recommended size for posting on your website. However, you can create a larger size social media badge (our Head Of Marketing John actually makes his badges at 1500×1500 pixels) then shrink them down as needed.
We’ve created some social media badge templates for use and customize for your own content and offer to your listeners!
Embedding An Image
When it comes to adding an image on a site that allows custom code but doesn’t offer a feature to upload an image, you can use HTML coding to embed the image. This will allow you to further customize your site and allow your users to know more about what you’ve accomplished.
Remember that your image needs to be hosted online somewhere, with a URL that can be clicked to view the image in a new tab. Podbean’s media manager is a great palace to upload your image for this purpose. To get the URL, simply go into the media manager screen and click on the name of the file you’d want to embed, and a new window will appear with the file’s URL.
The embed code is going to look something like this:
<img src=”[image url]” width=”[x]” height=”[y]” alt=”[alt text of image]” />
So for example, let’s say I want to embed this image:
To do so, I’d have to have the URL and the dimensions of this image, and plug them into the above HTML code. Doing that would create this:
<img src=”https://mcdn.podbean.com/mf/web/mppx7d/stickerback_1.jpeg” width=”1794″ height=”617″ alt=”Podbean Stickers” />
This will make the above image embeddable and sized at 1794 pixels by 617 pixels. You can resize the image to be smaller and it will automatically fit those constraints.
So to embed the above blank green-and-black badge, I would use the code:
<img src=”https://mcdn.podbean.com/mf/web/uimtaw/23ed04bd-1ec2-4415-b6d3-4627033d2c97.png” width=”400″ height=”400″ alt=”blank badge” />
This would embed the blank badge at 400 pixels by 400 pixels.
To test your badge to see if the code comes through correct, you can use the W3School’s HTML tester!
–
Embeddable social media and website badges are a great way to bring attention to accomplishments, participation, events, and enjoyment of topics and causes. By creating them for your listeners and followers, they can show their open support in a way that allows others to learn more about your content as well.
To learn more about promoting your podcast, check out our free webinar on podcast promotion!
Awesomeness!