{"id":720,"date":"2011-11-12T12:23:50","date_gmt":"2011-11-12T17:23:50","guid":{"rendered":"http:\/\/deliawilsondesign.com\/blog\/?p=720"},"modified":"2012-09-30T07:35:49","modified_gmt":"2012-09-30T12:35:49","slug":"corraling-those-social-media-icons-from-facebook-google","status":"publish","type":"post","link":"https:\/\/wiztech4zc.com\/blog\/corraling-those-social-media-icons-from-facebook-google\/","title":{"rendered":"Corraling those social media icons from Facebook, Google+…."},"content":{"rendered":"

It’s getting so that the group of social media icons one can have on a website is just a bit unwieldy – having to size them all the same. Getting up the new one to see if it looks okay, etc.<\/strong><\/p>\n

\"Social<\/a>

For example, zencartdelia.com<\/p><\/div>\n

There’s an easier way to do this work that I use on all the websites I work on.\u00a0 Instead of using the separate icon images, I create a background.<\/strong> The one to the left is 20 pixels high and 145 pixels wide.<\/p>\n

After adding the Google+ button in, I decided this blog post was necessary because I ran into problems with that icon.\u00a0 Google+ says to use this for the icon:<\/p>\n

 <\/p>\n

<a href=\"https:\/\/plus.google.com\/your number?prsrc=3\" style=\"text-decoration: none;\"><img src=\"https:\/\/ssl.gstatic.com\/images\/icons\/gplus-16.png\" width=\"16\" height=\"16\" style=\"border: 0;\"\/><\/a><\/code><\/p>\n

That rendered the icon the right height but for some unknown reason, the width was the entire width of the division. I don’t have a clue why but the easiest fix was to pull that image source out of the code – and then add the google+ button to the original background graphic. That worked.<\/p>\n

One big advantage I’ve found doing this is that I get all my icons in a single file (I use Fireworks for web work so it’s a png file).<\/strong> If I need to alter the color\/hues of the icons to make them work better together or with the website theme, then I can manipulate each one while being able to see them all at the same time.\u00a0 Having an image as a background always works well because the page doesn’t wait for it load – it loads behind the code instead.<\/p>\n

So Step 1:<\/h3>\n

Create a background graphic with each icon spaced equidistant apart – 5 pixels works well.<\/p>\n

Step 2:<\/h3>\n

Create a division such as socialMedia to put those icons into. It has to be the same width as the image plus those 5 pixels.\u00a0 In the example on the website, I have that division floated to the right.<\/p>\n

#socialMedia\u00a0 {
\nbackground-image: url(..\/data\/images\/socialmedia.gif); background-repeat: no-repeat;width: 150px; float: right;
\n}<\/code><\/p>\n

Step3:<\/h3>\n

Also, style the links for that division so that each a link is its own block the same size as each icon and with a margin to the right on each one.<\/p>\n

#socialMedia a {
\ndisplay:block; height: 20px; width: 20px; margin-right: 5px; float: left;
\n}<\/code><\/p>\n

Step4:<\/h3>\n

The html then is just the division for socialMedia and the links without anything that is visible.<\/p>\n

<div id=\"socialMedia\">
\n<a href=\"https:\/\/plus.google.com\/104193896260570553061?prsrc=3\" target=\"_blank\"><\/a>
\n<a href=\"http:\/\/twitter.com\/deliawl\" target=\"_blank\"><\/a>
\n<a href=\"http:\/\/www.facebook.com\/pages\/Delia-Wilson-Design\/92602374329\" title=\"Delia Wilson Design\" target=\"_blank\"><\/a>
\n<a href=\"http:\/\/www.linkedin.com\/company\/delia-wilson-design-llc\" title=\"Delia Wilson Design\" target=\"_blank\"><\/a> <a href=\"http:\/\/deliawilson.tumblr.com\/\" title=\"Tumblr Pictures\" target=\"_blank\"><\/a>
\n<a href=\"http:\/\/feedburner.google.com\/fb\/a\/mailverify?uri=FromTheGuru&loc=en_US\" title=\"Delia's Blog\" target=\"_blank\"><\/a>
\n<\/div><\/code><\/p>\n

That then reduces the amount of code in the source by using CSS instead of html for the images.<\/p>\n

Don’t forget to add in the target=”_blank” as well on these. Any link that goes off your website should open in a new window.<\/p>\n

Author: Delia Wilson Lunsford, Founder & CEO, WizTech, Inc. <\/em><\/div>\n","protected":false},"excerpt":{"rendered":"

It’s getting so that the group of social media icons one can have on a website is just a bit unwieldy – having to size them all the same. Getting up the new one to see if it looks okay, etc. There’s an easier way to do this work that I use on all the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-720","post","type-post","status-publish","format-standard","hentry","category-social-media"],"_links":{"self":[{"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/posts\/720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/comments?post=720"}],"version-history":[{"count":11,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/posts\/720\/revisions"}],"predecessor-version":[{"id":731,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/posts\/720\/revisions\/731"}],"wp:attachment":[{"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/media?parent=720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/categories?post=720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiztech4zc.com\/blog\/wp-json\/wp\/v2\/tags?post=720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}