Pages

Tuesday, January 7, 2014

BBBB Social Media Buttons

Welcome to Shalunya & Boyet, a happy little blog in the great big world of blogs. I talk a lot about how using beauty products help me maintain my complicated neurological condition. Every now and then I write a post to help new bloggers improve or personalize their blogs. This post will be about social media buttons.

As a blogger we would like our readers to follow us across multiple platforms. We would like our readers to follow our blog, our Facebook page, our Twitter, our Google+ and more. With today's ever changing social media we need to have the flexibility to quickly change our social media buttons. The easiest way to do so is to create the buttons yourself and to change them as you need to.  First let me explain what a follow me button is. In short a social media button is a clickable icon that leads to the like, follow, or subscribe page on another form of social media.

googleplus facebook twitter instagra pinterest LinkedIn bloglovin Feedly rss tumblr Bellashoot youtube vine She Said Beauty

You can easily find social media buttons for the most popular forms of social media, such as Facebook, Twitter, Google+, Instagram, Pinterest, LinkedIn, YouTube and Tumblr. However, today's social media is changing at an unbelievably fast pace and we need to be able to stay current with these trends. Let's find out how I created all of the social media buttons above. 

I first downloaded a set of plain social media icons and a free .jpg frame designed for digital scrapbooking. These are easy to find with a quick Google search. There are plenty of options and its really about finding one that suits your blog's personality. You will just want a frame that is either round or square. Rectangles don't work as well. All of the icons above are 32 pixels by 32 pixels which is a decent size for an icon. Please remember that if you would like a transparent background instead of a white or colored background please remember to save your image as a .png rather than a .jpg. 

Once you have built all your desired icons you will need to upload them to Photobucket, Flickr, or other photo sharing website. Then you will need to write the simple HTML coding to direct each icon to the appropriate website. Let me breakdown the HTML for you. 

<a href="http://shalunya.tumblr.com/" target="_blank" title="Follow Shalunya &amp; Boyet on tumblr"><img alt="tumblr" height="32" src="http://i1020.photobucket.com/albums/af325/shalunya211/TumblrIcon_zps06484922.png" width="32" /></a>

a href="http://shalunya.tumblr.com/" Use the link to the social media follow me page here. 
target="_blank" This will open the social media page in a new tab.
title="Follow Shalunya &amp; Boyet on tumblr" Text that appears on mouse hover.
img alt="tumblr" This is the image alternate title. 
height="32" This is the height of the image and why using a square or round image is best.
src="http://i1020.photobucket.com/albums/af325/shalunya211/TumblrIcon_zps06484922.png" This is the link of the image from the photo sharing site. 
width="32" This is the width of the image. 
/a This says close this image information. 

In case you didn't know you can type in the symbol & and it will automatically change to &amp; which is the correct HTML coding for the & symbol. 

Lets run through each of these buttons and where they are linked to. For each button you will change the link in red to your specific information for each of the following websites. 

googleplushttps://plus.google.com/u/0/111881417346696719913/posts - this goes in the href line
111881417346696719913 is my personal Google+ identifier

facebookhttp://www.facebook.com/ShalunyaBoyet
ShalunyaBoyet is my blog page not my personal Facebook account

twitterhttp://twitter.com/shalunya
Shalunya is the only Twitter account I have

instagrahttp://instagram.com/shalunya
Shalunya is also the only Instagram account I have

pinteresthttp://pinterest.com/shalunya
Shalunya is also the only Pinterest account I have

LinkedInhttp://www.linkedin.com/profile/view?id=305521961&trk=nav_responsive_tab_profile
This is directed to my blog LinkedIn account

bloglovinhttp://www.bloglovin.com/en/blog/3953994
This is directed to my Bloglovin blog account

Feedlyhttp://www.feedly.com/home#subscription/feed/http://shalunyaboyet.blogspot.com/
feeds/posts/default - This is my blog link on Feedly which is a blog reader. 

rsshttp://fusion.google.com/add?feedurl=http://feeds.feedburner.com/ShalunyaBoyet
This is my blog's rss feed which can be used for several feed readers. 

tumblrhttp://shalunya.tumblr.com/
This is my Tumblr account which I use to promote my blog. 

Bellashoothttp://bellashoot.com/u/shalunya
Bellashoot is a newer website for beauty lovers which I use to promote my blog. 

youtubehttp://www.youtube.com/user/shalunya21/feed?view_as=public
This is link to my YouTube channel 

vinevine://user/956768679348039680 - you can find this by asking to invite others via text msg.
This link will only work on a mobile device. It will not work on a computer. 

She Said Beautyhttp://www.shesaidbeauty.com/shalunya
This is the link to my She Said Beauty profile.
You can build one of these for any form of social media for which you would like followers. The hardest part is determining the appearance of your social media buttons. I searched high and low for Bellashoot and She Said buttons with no luck. That is when I decided I needed to determine how to create my own buttons. 
I hope this post has inspired you to be adventurous enough to create your own Social Media buttons for your blog. There are so many possibilities and such a broad base for creativity. Thanks for reading and let me know if you make your own social media buttons as I would love to come over and see what you've made. 

No comments:

Post a Comment

I'd love to hear from you.