JenSocial: Social Web Directory and Ning Tips

Social Web Directory :: Social Network Directory :: Ning Tips and Ning Support

How To Add Professional Facebook & Twitter Icons/Links To Fit In Right Column

Many Network Creators ask how to add professional looking Facebook, Twitter, or other Social Media icons/links to their Ning Networks. There are several ways to do this, since it's just HTML. So, the code doesn't have to be the exact way I write it. This is not difficult, but tedious. If you don't have patience, and follow each step, this will not work for you.

I usually grab icons from:
http://www.iconfinder.net/
They offer fantastic Social Media icons, professional looking, great quality, and royalty free. The best size to use is 48 by 48, if you want to add 3 icons to the right column. In my examples, technically they are 64 by 64. I will add dimensions to our code, instead of resizing the images. It won't matter if you leave in the dimensions. It actually gives you the flexibility of using larger images, like 64 by 64, if your favorites are not offered in 48 by 48.

Since most people like adding the icons in the right column, that's the primary example I will give. But, even the best sized icons won't fit, if you don't add one special CSS style to remove the default Ning spacing for images, in a Ning text box. That too, will be added to the coding example.
Also, I will provide examples using a table. The "in" and proper way to code HTML these days is tableless. In other words, fancy coders, or, if you want to keep a CSS coding job, you won't use tables. I think it's the easiest way for you to be able to change the code. So, don't worry about it, if someone says don't use tables. In this case, it is just fine to use a table.
Go to http://www.iconfinder.net and locate the icons of your choice. Typically when you select a style of icon, all of the icons you will need, will be included in the same set.
Once you locate the icons of your choice, save them one at a time, to your hard drive.
Go to a blog on your Network, and upload the images (click on the camera/upload image icon), one at a time. Copy the image path that starts with src="http://api.ning.com/...png". Only copy the image path between the quotes, not the src=, or the other code.
You will need all 3 image paths for your HTML code block. If you want to add a LinkedIn icon/link, instead of MySpace, just change that set of code appropriately.
Your safest bet is to add all of your code to a text file, and save as you go. Then you can add the finished code to a Ning Text Box.
Add the following block of code, making the appropriate changes. Focus on the TD tag. Each icon image path / link URL / alt text - - will go between the start and end of the 3 TD tags. I will add a line break between the TDs for an easier visual. Remove those lines when you finish your code.

Code For Example Above:

</table></div>

What code will you change?

Change all of the image paths to your image paths.
Change the href= URL paths to your Twitter, Facebook and MySpace URLs.
Change the alt= text, to your alt text. This is good for Search Engine Optimization.

Final Steps:

Once your code is ready, add a text box to your right column, or one of the narrow columns. Paste all of the code, and click on SAVE.
Be sure to save this code to a text file, and edit from there.
If you want to add to the wide column, that's up to you. It just won't fill the area, unless you use the largest icons. And, once you get the hang of this, that will work for you too. Just select the largest icons for the wide column. BTW, if you use the larger icons for wide column, BE SURE to change the dimensions from 48 to 128, or the size you use.

Wide Box Example:

Code for Example Above:
<style>.xg_module_body img {margin:0!important;}</style>
<div align="center"><table cellpadding="0" width="400" cellspacing="0"><tr>
<td><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301625658?profile=original" alt="Join Our Facebook Fan Page" width="128" height="128" border="0"></a></td>

<td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301627289?profile=original" alt="Check Us Out On MySpace" width="128" height="128" border="0"></a></td>

<td><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://storage.ning.com/topology/rest/1.0/file/get/301628949?profile=original" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></td>
</tr></table></div>

1 member favorited this

Replies to This Discussion

Permalink Reply by the Pinoy Zone on March 20, 2010 at 2:37am

Am i doing this right? Click on the ink below to see
http://chillzoneph.ning.com/page/navigation-1

- The CZph-Team

Permalink Reply by JenSocial on March 20, 2010 at 9:54am

Very nice, great job. That cursor thingy would make me crazy though. ;-)

Permalink Reply by Mikes Designs on July 30, 2010 at 1:37am

awesome!

Permalink Reply by JenSocial on July 30, 2010 at 1:39am

Hi Mike!
Great to see you.
Happy you like the tip.
Best,
Jen

Permalink Reply by OregonShout _YoUNITY on September 7, 2010 at 12:35pm

Hi Jen I had this working and then accidentally deleted the code...so now It shows up at the footer of the pages How do I get it back up to the top like you have...?

Permalink Reply by JenSocial on September 7, 2010 at 2:33pm

This tip is for adding to text box in right column. My top icons on JenSocial are in a special js file inclusion.

You may be thinking about this tip:
http://jensocial.com/group/ningnetworktips/forum/topics/add-faceboo...

I'll try to write a generic tip soon, like the link above, that includes the icons instead of text.

Best,
Jen

Permalink Reply by JenSocial on September 7, 2010 at 2:57pm

http://jensocial.com/group/ningnetworktips/forum/topics/add-faceboo...

Permalink Reply by JenSocial on September 7, 2010 at 3:12pm

And above Hello Box/SignIn/SignUp Box:
http://jensocial.com/group/ningnetworktips/forum/topics/add-faceboo...

Permalink Reply by JenSocial on January 9, 2011 at 1:48pm

Brian,

This code worked perfectly for me on a test site - - just tested it. The style tag should override the ning table style padding. Do be sure to do the following:

1. Save your code to text file for future edits. The text editor is likely to change your code after you save.

2. Be sure to wait long enough for new text editor to completely load, and add your code to the HTML view, by clicking on HTML button.

I realize you probably know this, just reminding and for others who read this.

</table></div>

Best,

Jen

RSS

Welcome to
JenSocial: Social Web Directory and Ning Tips

Sign In