Blog badges that provide a friendly and quick code for your visitors to grab (and embed elsewhere) are a great way for you to gain exposure across the internets.
From time to time Outdoor Bloggers have asked me how I created/coded the OBN sharing badge that is located down in the footer of this page, so today I wanted to share the exact way to make it happen! Ready? Here goes….
First you need a badge friendly image. Preferably your blog logo, but I’ve seen some people make appealing images that work just fine as well.
The majority of sidebars out there are between 150 & 300 pixels in width, so to be safe, I suggest keeping all blog badges around 150 pixels or smaller in width. If someone tries to embed your logo on their website and it’s huge or unappealing, well…they’ll just….not do it.
Once you’ve created the badge you want to use, you’ll need to upload it into your blogs media folder. Your image needs to be ‘hosted’ in one location and the internet will magically ‘pull’ that image from it’s source and display it wherever the code is embedded.
After uploading the image, you’ll need the file URL that the image is linked. Need help finding that URL? Well in WordPress, after you upload an image, to the far right you’ll see a box that looks like:
Copy & paste time:
As you know, I’m a big believer in using free software found on the Internet to make our lives easier. I used to write the code for the OBN badges, but recently I found the “Grab My Button” website that makes it all a cinch.
Just visit that link, fill in your blog name, your domain name and copy & paste the link to your image into the generator. Grab the code your information generates and you now have a way to offer your blog badge on your website. Just paste the code into your text widget or any HTML box.
You should be all set now! Thank you “Grab My Button” for taking the guesswork out of making a blog badge.
Let me know if you have any questions in the comment section below,
Here are some variations I made for the OBN Badge. Once you create this form of sharing, all a visitor needs to do is copy the code under your image and embed it on their website. Easy!
A Smaller Version of the original badge:
A Black & White version: