Nav Bar

Home Project Gallery Contact About Facebook Google+ Pinterest Twitter Bloglovin' Image Map

Sunday, May 12, 2013

How to add a Social Buttons Widget (Part 2)


Update 6/3/2013: You might be wondering, "how did a blogspot blog do a tutorial for wordpress.com?" I originally wrote this while on wordpress.com. I have since moved to blogspot.com. You can read more about the move here

In Part 1, we took a look at the many social widgets available to WordPress.com bloggers. In Part 2, I am going to step you through how I made my custom social buttons widget without HTML coding. {Yep! We will not be writing any HTML!}

Although I am writing these steps specifically from a WordPress.com hosted site perspective, you may be able to follow along with an alternative blogging platform. Let's get started!


Step 1 - Get Your Social Buttons


The hardest part was finding my buttons. I am not a Photoshop expert, so I relied on finding buttons out there in the intertubes. There are a ton of social button packs out there offered for free (did I ever tell you free is my friend?). Do a Google search and be prepared to go for a hunt.

Back when I made my follow widget, Pinterest and Bloglovin' were often missing from theme packs. Now that Bloglovin' is picking up momentum, thanks to Google Reader being on its last legs, I bet you will find it included in more packs.

I got my social icon pack from Free Social Media Icons by Carrie Loves. She had all the social sites I wanted to include in lots of fun colors. I was happy to find that she had a color that was pretty close to my theme.

Carrie Loves Free Social Media Buttons for Bloggers
Carrie Loves - Free Social Media Icons - Currently offering 19 buttons in 30 colors! Click image for link.

Another great icon pack is Free Social Media Icons by A Typical English Home. She has 13 different icons in 13 different colors! Not only is she adding buttons by popular request, but she offers a blank one. This gives you the option to create your own button(s) if you so choose. This is actually quite tempting to me.

Free Social Media Icons by A Typical English Home
Free Social Media Icons by A Typical English Home - Currently offering 13 buttons in 13 colors! Click image for link.

One last icon pack I thought I would showcase is Free Rainbow Social Media Icons by Diana Rambles. She is offering 8 buttons in 7 colors. I like how they are primary colors, which is very different from your typical icon packs.

Free Rainbow Social Media Icon Set by Diana Rambles
Free Rainbow Social Media Icon Set by Diana Rambles - Currently offering 8 buttons in 7 colors! Click image for link.

Step 2 - Start A New Post


So once you find and download your social icons, the next step is to start a new post. This will be just a scratch post that you never publish. We are going to use it as a WYSIWYG (What You See Is What You Get) editor.

Step 3 - Insert Your Buttons


Click the "Add Media" button, select the upload tab, navigate to the buttons you want, select them and insert the buttons you pick into your new post. Go ahead and leave the default settings, we will fix them shortly. I like them in alphabetical order except for RSS feed. Now is the time to rearrange them in the order you want (before we start editing their links).

Insert Buttons
Insert Buttons - Click "Add Media" button, upload tab, navigate to your buttons, select buttons and insert into post. All of the buttons you selected will be inserted. Rearrange in the order you desire. Click image to enlarge!

Once you have inserted your buttons, click on the first button and click the edit icon. Set the alignment to none. Add your title to the button (they should already be titled, but I like to adjust the case). Alternatively, you can have the title be a call to action, like "Follow me via Bloglovin'!" The title will pop up when someone hovers over the image. Leave the caption and alt tag blank. Set the link url to go to your social media page.

Edit Image
Edit Image - Click on the first button and click the edit button. In the "Edit Image" tab, set alignment to "None," rename the title and set the URL to your social page.

Next, click over to the "Advanced Settings" Tab. This is where you can size your buttons with a specific size, instead of a percentage of the original image size. This is really handy if you are mixing and matching icons from different social icon theme packs (because they may default to different sizes). You can also set a border thickness here, if you want a border around the images. If your WordPress.com theme auto adds a border (which mine does), you can disable it by putting a 0 in the border option.

For each image, while in the advanced settings tab, I like to check the box that makes the link open in a new tab. This way your reader comes back to your blog after they close the window/tab from your social site.

Advanced Image Settings
Advanced Image Settings - Click on the "Advanced Settings" tab. This is where you can set the size of the image. The first time through I left the size the default, which turned out to be too big. I reset each image to be 50 by 50 later. Set the border to 0 and check the box "open in a new window."

Repeat for each button.

While you are updating your buttons, you will want to visit each of your sites to grab the page address. The weirdest one, in my opinion, is Google+. I usually click over to the "post" tab on my G+ page and grab that address. Instead of your user name, it is going to be a string of numbers.

For WordPress.com users, your RSS feed address should be yoursite.wordpress.com/feed. Just change "yoursite" to your actual address. To double-check this, you can add the Meta Data widget to your blog. Bring up your blog. Right click the RSS link and copy the link address. Then remove the Meta Data widget (unless you like to have it - I don't). Paste in a new tab/window and it should match what I have given you.

Here is how your buttons should now look in your scratch post:

Editted Buttons in Scratch Post
Edited Buttons in Scratch Post - After editing your buttons per above directions, this is how your buttons should now look in the scratch post.

Step 4 - Grab the HTML Code


Once you have your images formatted exactly the way you want them, it is time to grab the html code. Click the "Text" tab. The "Text" tab is where you can edit the html code for your post. We don't need to do anything here, just select all and copy this code.

Grab HTML Code
Grab HTML Code - Click the "Text" tab, select all and copy.

Don't forget to save your post but do not publish! Notice that I changed my date to 100 years into the future. This is because I have accidentally hit Publish once before, so I like to set up a date in the future to help prevent myself from doing this. Save this post, because you may want to come back to this scratch post later to make edits.

Step 5 - Create a Text Widget


Go to your appearance menu, then widgets. Click and drag the Text widget into the widget area you want it to appear in. Name the Text Widget. I named mine "Connect with Me," but you can name it anything you want.

In the second box, paste your html code. Click Save.

Text Widget
Create a Text Widget - Under Appearance > Widgets, drag a Text Widget into your widget area. Give it a title and then paste your html code in the second box. Click save.

Step 6 - Your Widget is LIVE!


That's it! Once you have saved your Text Widget, you can see your widget live on your blog. Go over there and make sure everything looks right and check that all the links are functioning correctly.

My buttons turned out too big the first time around:

Too Big Buttons
Too Big Buttons - Check your widget after it is live. Make sure it looks the way you want it and each of the links work. Mine turned out too big the first time around.

So I went back to my scratch post and resized them until they fit exactly how I wanted them. Use the "Advanced Settings" tab to set a specific size instead of a percentage of the original size. I set mine to 50 pixels.

Smaller Buttons
Smaller Buttons - Much better! These buttons are 50 pixels by 50 pixels.

After I made green buttons, I went back and made turquoise buttons. I think I like the turquoise ones better.

Green or Blue?
Green or Blue? - After making the green buttons, I went back and made turquoise ones.

What do you think of my social icons? What do you think of using a scratch post as a WYSIWYG editor for creating custom html code?

Questions? Ask in the comments section below and I will follow-up with you.

Resources


Social Media Button Packs:

Alternative Tutorials:


Want to add your resource here? Add your link in the comments below and I will check it out! :)

DISCLAIMER:  Social media buttons used in banner and tutorial are by Carrie Loves.

LINKING TO:  Give me the Goods | Creatively Tuesday | From Dream To Reality | Live Laugh {Linky} | Sharing with Domestic Superhero | Freedom Friday | Weekend Wonders | What to do Weekends | Create & Inspire Party | No Rules Weekend

19 comments:

  1. This is so smart, Bethany! I can see myself using a scratch post for other things too so I can figure out the html more easily! Thanks so much for the easy-to-follow tutorial! Hope you had a wonderful weekend!!

    ~Abby =)

    ReplyDelete
  2. Great tute! Thank you for sharing at Give Me The Goods!
    Dimples & Pig Tales

    ReplyDelete
  3. I'll never forget how much it rocked my world when you shared this trick with me so many months back...and I've used it many times since then. You're a genius, Bethany. And don't you forget it!

    ReplyDelete
  4. Awww!!! You are too kind! <3 I'm so glad you use that trick now! That makes me happy. :)

    ReplyDelete
  5. I use scratch posts all the time to test stuff out. When I was younger, I got really into making websites. I started teaching myself html by doing stuff in a WYSIWYG editor and then clicking the tab to take a look at the html. It really is pretty straight forward once you start playing around with it. I hope this helps you out! Hope you are having a great week!

    ReplyDelete
  6. Thanks! I am glad you liked it. Thank you for dropping by! :)

    ReplyDelete
  7. This is a really great tutorial! I remember struggling for a long time trying to figure out how to insert these, and it was soooo frustrating! Thanks for sharing this at Domestic Superhero today, I am sure it will be very useful!

    ReplyDelete
  8. Thank you! I hope it helps others out. No need to fear html when you can use a scratch post for an editor. :D

    ReplyDelete
  9. Just what I need! Pinned! Thanks SO much for the tutorial! Diana Rambles' Pin Me Party. :)

    Christine :)

    ReplyDelete
  10. […] everyone gets those cute little social media icons on their blogs thanks to another helpful blogger Bethany the ngnrdgrl! SO easy that even an un-savvy new blogger like myself could follow along and figure it out! How […]

    ReplyDelete
  11. This is wonderful Bethany! It will come in handy to so many people! Thanks for putting it together :)

    Thanks so much for sharing this at The DIY Dreamer... From Dream To Reality! I can't wait to see what you link up tomorrow evening!

    ReplyDelete
  12. Thats a great workaround for the existing free wordpress.com users...its time consuming but to customize my blog i'm gonna refer to your post :)

    ReplyDelete
  13. I am glad my post can be of help! Let me know if you have any questions. :)

    ReplyDelete
  14. Great tutorial! Thanks for featuring my Rainbow Icons! Pinned!

    ReplyDelete
  15. Students Are you Searching for CG Board 10th Question Paper 2023 Get them All Subject Pdf Format, Students Must Prepare well by happily using the CG Board 10th Class Model Paper 2023 which will give the Complete Details about the Marking Scheme and the Blueprint, CGBSE 10th Model Paper Students This Webpage Provide Download Link Subject wise CG Board 10th Important Question Paper 2023 From the Direct Links Attached at the end of the page. Students can Download the CGBSE Matric Model Question Paper 2023 at Official website only, Students can use These Solved Paper as a Reference while Preparing for the Board Exam.

    ReplyDelete