I'm taking a Social Media Marketing class right now, and they are suggesting that I start using my facebook and twitter accounts for marketing. Is there a way to take the Nav Bar I have and add a couple icons to it so they click on a Facebook icon and go to my facebook page?

Where do you all put the "Follow us on Facebook" link? Can I see what you all have done on your pages?

I have mine on my footer and I also have a FB Share/Like button on my header (along with Google+).

Mike,

Can you tell me how you did that? I tried in every spot I could think of and I can't get it to show up.

Fred

Originally Posted by fredjclaus Mike, Can you tell me how you did that? I tried in every spot I could think of and I can't get it to show up. Fred

For my Footer icons, I first had to make all of the buttons: http://www.imagesinthebackcountry.co...al-buttons.png

Add this to your custom CSS: Remove the stuff you don't need. Change the stuff in red.

	/*Small Social Buttons*/
#social-buttons-sm  {
	list-style:none;
	padding:10px 0 15px 10px;
	margin:0;
	width:auto;
	}
#social-buttons-sm  li {
	float:left;
	margin-right:10px;
	}
#social-buttons-sm  li a {
	display:block;
	width:16px;
	height:16px;
	float:left;
	text-indent:-900000px;
	background-image:url('http://www.imagesinthebackcountry.com/images/all-social-buttons.png');
	outline:none;
	}
#facebook-sm a {background-position:-160px 0px;}
#facebook-sm a:hover {background-position:-176px 0px;}
#twitter-sm a {background-position:-160px -16px;}
#twitter-sm a:hover {background-position:-176px -16px;}
#flickr-sm a {background-position:-160px -32px;}
#flickr-sm a:hover {background-position:-176px -32px;}
#rss-sm a {background-position:-160px -48px;}
#rss-sm a:hover {background-position:-176px -48px;}
#google-plus-sm a {background-position:-192px 0px;}
#google-plus-sm a:hover {background-position:-192px -16px;}

Add this to your Footer:

<div id="myFooter">
		<ul id="social-buttons-sm">
			<li id="facebook-sm"><a rel="me" class="url fb" href="http://www.facebook.com/YourFacebookPage" title="Facebook"><span>Facebook</span></a></li>
			<li id="twitter-sm"><a rel="me" class="url twitter" href="http://twitter.com/YourTwitterPage" title="Twitter"><span>Twitter</span></a></li>
			<li id="flickr-sm"><a rel="me" class="url flickr" href="http://www.flickr.com/people/YourFlickrPage" title="Flickr"><span>Flickr</span></a></li>
			<li id="rss-sm"><a href="YourRSSFeed" class="rcc" title="RSS"><span>RSS</span></a></li>
			<li id="google-plus-sm"><a rel="author" href="https://plus.google.com/YourGoogle+Account/plusones?hl=en" class="url google-plus" title="Google+"><span>Google+</span></a></li>
		</ul>
</div>

That should get you started. PM me if you need help or to add the Share/Like button.

One more thing, I don't mind you using the stock buttons, but please don't use the brown hover buttons on your site. I made those to fit my site. :)

Thanks Mike, I'll have to take a look when the kids go to bed and I have more time. I appreciate you sending me the information, and I won't use the ones you asked me not to.

Originally Posted by fredjclaus Thanks Mike, I'll have to take a look when the kids go to bed and I have more time. I appreciate you sending me the information, and I won't use the ones you asked me not to.

Don't mind if you use it just to (as it is) make sure it works, then just change the hover color to suit your color scheme.

Got it to work. Now what do you all think? Left, Right, or Center?

www.fredJClaus.com

Looks great and I would leave it centered. You have a underline between your Twitter and your You-Tube logo.

yes, I do, Can't seem to figure out where it is but I'm looking into it.

Thanks for posting this, I've been wondering for a while now. I was able to get this implemented on my site, however I am trying to remove your custom tinted icons with grayscale ones that I'm creating. The only place I see that links to an image location is in the CSS field that goes to: background-image:url('http://www.imagesinthebackcountry.com/images/all-social-buttons.png');

I've uploaded the pictures to my own host, however I can't find where to link the individual icons too.

As a side note, I can't figure out how to center them...

Originally Posted by geoff5093 Thanks for posting this, I've been wondering for a while now. I was able to get this implemented on my site, however I am trying to remove your custom tinted icons with grayscale ones that I'm creating. The only place I see that links to an image location is in the CSS field that goes to: background-image:url('http://www.imagesinthebackcountry.com/images/all-social-buttons.png'); I've uploaded the pictures to my own host, however I can't find where to link the individual icons too. As a side note, I can't figure out how to center them...

You don't have to make them individual, like separate images. Just due what I did and upload them to your Smugmug site. My Smugmug site is set up as a sub-domain, so I use my regular domain to do the uploads. If you need help, we need a link to your site...

Originally Posted by Hikin' Mike You don't have to make them individual, like separate images. Just due what I did and upload them to your Smugmug site. My Smugmug site is set up as a sub-domain, so I use my regular domain to do the uploads. If you need help, we need a link to your site...

I uploaded a tweaked version of the picture you linked to earlier to my SM gallery here: http://www.actionphotosnh.com/Other/...9236&k=HJKrfGk

This is my site: http://geoffjohnson.smugmug.com

I know you said not to use your custom icons, so I'm trying to get them changed when I ran into this issue. I also can't align them in the center, I can change it from float:left to float:right, but if I do center I get 3 icons on top of each other, still aligned left.

Thanks for your help!

Originally Posted by geoff5093 I uploaded a tweaked version of the picture you linked to earlier to my SM gallery here: http://www.actionphotosnh.com/Other/...9236&k=HJKrfGk This is my site: http://geoffjohnson.smugmug.com I know you said not to use your custom icons, so I'm trying to get them changed when I ran into this issue. I also can't align them in the center, I can change it from float:left to float:right, but if I do center I get 3 icons on top of each other, still aligned left. Thanks for your help!

I don't mind using them to get it in place.

Try this (add in red):

#social-buttons-sm {
list-style: none;
padding: 10px 0 15px 10px;
margin: 0 auto;
width: 80px;
}

If you make the icons bigger, you may have to adjust the 'width:80px' to suit.

Thanks Mike! That worked great for getting them centered. Am I missing anything obvious to use the new grayscale icons I uploaded to my gallery? Can that gallery still be unlisted, or should I host the image somewhere else?

Originally Posted by geoff5093 Thanks Mike! That worked great for getting them centered. Am I missing anything obvious to use the new grayscale icons I uploaded to my gallery? Can that gallery still be unlisted, or should I host the image somewhere else?

I think it should work. My Smugmug contact page shows a photo that is an unlisted gallery.

Wow! Thanks guys! This has been really helpful! I'm a total newbie when it comes to CSS and every kind of web creation codes, that's why SMugmug works so well for me. I've managed to add in the buttons as described so clearly by your guys. One question though, how do I get the buttons to be bigger?

Do check out my site.

www.paprisphotography.com

Thanks!
paul

It looks like with hom you have the background position set you are using the smaller versions of the thumbnails. To use the larger ones you will need to adjust the background positions for each of those and increase the height/width to accommodate the larger sized thumbs.

Also on a completely random side note. I pulled up your site in firefox and the page title is getting cut off in an odd place:

Originally Posted by Smug Eric It looks like with hom you have the background position set you are using the smaller versions of the thumbnails. To use the larger ones you will need to adjust the background positions for each of those and increase the height/width to accommodate the larger sized thumbs. Also on a completely random side note. I pulled up your site in firefox and the page title is getting cut off in an odd place:

Thanks Eric! Ha! Didn't quite expect my website to talk about anyone's mom!

Anyway, I'm totally clueless as to how to adjust the position and all that. Do you think you can help me with it, please?

thanks!