Sweet Treat for Your Blog
Social media buttons are essential to blogs today, social media is one of the best ways for others to share ideas and promote their sites. Having the buttons on your site allows your readers to connect with you and follow you through RSS feeds, Facebook, Twitter, Pinterest, etc. Most bloggers have a strong presence on sites other than just their blog. Some people may not subscribe to your feed, but may follow you on Twitter. I like to share extra pics and other ideas on Facebook that might not always be on my blog. For example, I can snap a quick pic of a cake I just made and post to Instagram or Facebook a lot sooner than writing up a blog and posting it on here. There are definitely advantages to following a blogger in various social media ways.
The social media buttons were one of the aspects of my blog that were the least creative and unique to me. I ended up finding free buttons on a site and using those. They were pretty generic looking, something you'd see on a lot of blogs. I really wanted something different, and something that was personalized for a blog about baking and cake decorating. I found some free cupcake buttons, but nothing that really suited me. Then it hit me - if my blog is about cakes and fondant pieces I create, why not create pieces that have the social media symbols?
I had some other projects going on and didn't really have time to bake cupcakes just for this, so I decided to create mini fondant cupcakes and fondant social media symbols. I took pictures of these pieces and then edited them, resized them, and uploaded them for the buttons. I wasn't sure if this would work, but it did! The pics didn't come out quite as crisp as I wanted. I was having trouble with the lighting, and I needed to use a better camera. But, I can show you the step by step process I used to turn pics of yours into social media buttons! It's not too difficult and it creates one of a kind buttons that no one else will have. The possibilities are endless!
Here's a tutorial with a step by step instruction on how I made the Facebook social media button. This is also the same process I used when creating my blog button.
- Decide what you want to take a pic of for your buttons. I wanted the buttons to be the fondant cupcakes, I felt this represented the baking AND fondant work I have featured on my blog. Maybe your blog is about cooking and you want to take pics of some utensils. Or, maybe you have a crochet blog and you want to take pics of scents of yarn. This is a chance to express yourself. It needs to be something that will look good small, not too many details. You could also take a pic of something that is just a color you like and then add symbols and letters in the photo editing.
- Take your pic.
- Upload your pic to your computer.
- Open pic in editing software. I used PicMonkey to work on these buttons, so the tutorial will use the features on that site. You can create files through PicMonkey without having to pay or register. Some of the more advanced symbols and features do require a monthly fee and registration, but everything I did was free. You can use any editing software though, the basic principles should be the same.
- Crop your photo to the area you want to be the button. Not every button was perfectly zoomed out the same, so the crop size was a little different for each. But I knew I wanted them all to be square and have just a little area around the button.
- Resize your pic to be 50 x 50 pixels. 50x50 is the traditional size for the social media buttons, but you could make yours slightly larger or smaller depending on need and space on blog.
- Add text or any other symbols. A couple of my buttons weren't quite as crisp as I wanted, so I decided to add text to ensure the readers knew what each button was for. If you took a pic of a solid colored object, here is where you could add symbols, text, anything to customize the button.
- Save pic to your computer.
- Upload pic to website. You need the file saved to a site where it can be accessed. You can save the pic to your blog file manager, or to a photo sharing site like Photobucket or Flickr.
- Determine the location of your pic. This can be done in multiple ways. One way is to right click on the file and select "Open file in a new tab."Then the address in the address bar is the location of the file. Or, on sites like Flickr or Photobucket, there is usually code available that can be used to access the file. This code contains the location, it should end in .jpg, .png, or whatever your pic file extension was.
- Create a new gadget/widget for the buttons (or edit your existing one). Each blog platform is different, but you want to create a new widget/gadget for your blog. With Blogger, you can do this by creating a new HTML/Java Script gadget along the sidebar in the layout mode. If you already have social media buttons, you just want to edit the picture location with the new pic locations. Once doing that, you are finished and can enjoy your new buttons! If you don't already have buttons, or are needing to add new ones, follow the next step.
- Add code to your blog for the buttons. At the end of the tutorial, I will show my full code for all my buttons (Facebook, Pinterest, Twitter, Etsy, and RSS feed), but for now here is just the Facebook portion. The bold parts are what need to be customized, the rest can stay the same.
<a href="http://ww.facebook.com/SarahLynnsSweets" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_f" /></a
Here's a quick explanation of the components and what needs to be customized:
The blue portion below sets the address you want the button to go to when clicked. The bold portion is what needs to be changed, for Facebook, it is the address to my Facebook page. If you are unsure of the address, go to your page and copy the text in the address bar.
<a href="http://www.facebook.com/SarahLynnsSweets" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_f" /></a>
The red portion below sets the location of the file you want to use for the button. This is where you need the address of your pic location. The bold portion needs to be customized with your pic file. The italicized portion needs to be customized with the file name (not including extension). The underlined height and width only needs to change if you didn't use 50x50.
<a href="http://www.facebook.com/SarahLynnsSweets"> target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_f" /></a>
- Save new layout and update blog! Enjoy your new social media buttons!
See the bottom of the post for my full button code that I use (minus the pic locations). I am thinking about improving the buttons and then including them in my Etsy shop, contact me if you would be interested in similar type buttons. Hope this tutorial has been helpful, leave a comment or contact me with any questions or issues with the process or code!
Social Media button code:
Social Media button code:
<a href="http://ww.facebook.com/SarahLynnsSweets" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_f" /></a>
<a href="http://www.twitter.com/sarahlynn630" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_t" /></a>
<a href="http://sarahlynnssweets.blogspot.com/feeds/posts/default"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_r" /></a>
<a href="http://www.pinterest.com/sarahlynnwells" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_p" /></a>
<a href="http://www.etsy.com/SHOP/gumpasteboutique" target="_blank"><img src="http://piclocation.jpg" width="50" height="50" alt="bsocial_e" /></a>
