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.

  1. 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.
  2. 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.
  3. 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.
  4. Once you locate the icons of your choice, save them one at a time, to your hard drive.
  5. 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.
    6. _
  6. 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.
    7. _
  7. 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.
    8. _
  8. 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.

Join Our Facebook Fan Page Check Us Out On MySpace Follow Us On Twitter
Code For Example Above:

<style>.xg_module_body img {margin:0!important;}</style>

<div align="center"><table cellpadding="0" width="156" cellspacing="0"><tr>
<td><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://api.ning.com/files/yK4NcMrBlofWleqeABbNHR-JwhBMxMRlC7NRM0KCYhLk4i-pqoO0AYXzAp3bKHf0IYIP3Qjn0GVzm5V1Gv56dUqaq68hdmSW/facebooks1_60.png" alt="Join Our Facebook Fan Page" width="48" height="48" border="0"></a></td>


<td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://api.ning.com/files/wAuKxtsvHJwI1u2yJicBh2aJkOFs3BL79bkvGpW40UpCPv9pS7JwYNtTtNjNql8cRuqU-zGBZkC2NsCiM9T*dLbKRSlPML5b/myspaces1_60.png" alt="Check Us Out On MySpace" width="48" height="48" border="0"></a></td>


<td><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://api.ning.com/files/vwYvIcXARnCDb7rmTyv-ajyO2kvmHyKJ813N8CvFCImegtIaEvi9NeRhZ1RWCqojSEvAqmOzVNsoWX4HPus6Zwt-nMYOBXWU/twitters1_60.png" alt="Follow Us On Twitter" width="48" height="48" border="0"></a></td>
</tr>

</table></div>

  1. 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:
  1. 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.
  2. Be sure to save this code to a text file, and edit from there.
  3. 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:

Join Our Facebook Fan Page Check Us Out On MySpace Follow Us On Twitter

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://api.ning.com/files/MDqSwhCErxpAQCHv4V6BYNGSo6HZtPRtmdNol8nUrh*9kn1SnIvLjlpZd6Ko*QzkrV*cTHhej40aypylc9FNyuGQpVsVCJyS/facebooks3_128.png" 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://api.ning.com/files/DsEd0qFuUcwu-OqK9dBmlNVWoJnSrPzFfHychkrtcyfIjc3ClCHytCj7mN4-pm0ueyEsbXFWSsCmgbKKk87IKMBhWf9093Ba/myspaces3_128.png" 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://api.ning.com/files/DsEd0qFuUcyyy80lToFsf7IsEIyNbOEfUNaXKa1B3Jg6Oyf*PzQO3DZuQ3sltrfVqgifMzcq59A7ip8S0KYYtSYbsFhBFNrX/twitters3_128.png" alt="Follow Us On Twitter" width="128" height="128" border="0"></a></td>
</tr></table></div>



Tags: add facebook icon to ning, add twitter icon to ning, facebook, facebook for ning, facebook icon, myspace, myspace icon, twitter, twitter for ning, twitter icon

Views: 27107

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
Permalink Reply by JenSocial on September 7, 2010 at 3:12pm
Permalink Reply by Brian Fløe on January 9, 2011 at 12:01pm
Ning overrides my table cellspacing - I cannot get this trick to work. Has things changed with the new text box?
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.

<style>.xg_module_body img {margin:0!important;}</style>

<div align="center"><table cellpadding="0" width="156" cellspacing="0"><tr>
<td><a href="http://www.facebook.com/pages/yourfanpage/12345678" target="_blank"><img src="http://api.ning.com/files/yK4NcMrBlofWleqeABbNHR-JwhBMxMRlC7NRM0KCYhLk4i-pqoO0AYXzAp3bKHf0IYIP3Qjn0GVzm5V1Gv56dUqaq68hdmSW/facebooks1_60.png" alt="Join Our Facebook Fan Page" width="48" height="48" border="0"></a></td>


<td><a href="http://www.myspace.com/yourpage" target="_blank"><img src="http://api.ning.com/files/wAuKxtsvHJwI1u2yJicBh2aJkOFs3BL79bkvGpW40UpCPv9pS7JwYNtTtNjNql8cRuqU-zGBZkC2NsCiM9T*dLbKRSlPML5b/myspaces1_60.png" alt="Check Us Out On MySpace" width="48" height="48" border="0"></a></td>


<td><a href="http://twitter.com/yourtwitter" target="_blank"><img src="http://api.ning.com/files/vwYvIcXARnCDb7rmTyv-ajyO2kvmHyKJ813N8CvFCImegtIaEvi9NeRhZ1RWCqojSEvAqmOzVNsoWX4HPus6Zwt-nMYOBXWU/twitters1_60.png" alt="Follow Us On Twitter" width="48" height="48" border="0"></a></td>
</tr>

</table></div>

 

Best,

Jen

Permalink Reply by Brian Fløe on January 9, 2011 at 2:24pm

Thanks Jen

 

I've sent you a private message with an example of how it is not working on my site. Perhaps it can help the trouble shooting of this cellspacing issue.

RSS

© 2013   Created by JenSocial.   Powered by

Badges  |  Report an Issue  |  Terms of Service

Home
VIP Ning Tips