Adding social media icons to link to your linkedin, rss, twitter, facebook, ...

[Stefaan Boel]

(This is a very basic tutorial of putting good use of a textbox to attract people to your social media pages...I know you have a lot of those! So maybe this could be of good use to you too. It doesn't take much programming skills)

A few months ago a found a great resource of social media icons. Here are the links to start:

• http://www.evohosting.co.uk/blog/web-development/design/more-free-social-media-icons
• http://www.evohosting.co.uk/blog/web-development/design/14-free-social-media-icon-sets/

I used the extended social media icons (number 36) and putted the ones I use in a text box and linked to my pages of linkedin, rss, twitter, facebook, ...

The only thing you need to be able to do is upload the icons somewhere, for instance on your ning photo's, picasa, or your own web space if you have any. Not that hard.

Then use this code to create the links, add as many links as you like:

<img src="http://link to icon.png" /> <a href="http://feeds.feedburner.com/your feed" target="_blank">RSS feed</a>

replace the "link to icon" with the url of your icons
replace the "http://feeds.feedburner.com/your feed" with the link you would like to refer to

This is the result in my page (click to enlarge):

[Brian]

Nice work Stefaan. Thank you for sharing!

[Stefaan Boel]

Thank you for the nice comment :)

[Rev. O.M. Bastet]

Am I correct that one wouldn't want to be making this available on a Network in which nonmembers cannot see past the Main Page??

[Stefaan Boel]

why not?

[Rev. O.M. Bastet]

Because what's the use of directing people from FB etc. to our Network if they can't see any of the pages except the main page? Our network members would be encouraged to share our page URLs of their profiles, or blogs, or whatever, and none of those links back to our network pages would work.....

This is a real question, from a Dummy....

Thanks,
Rev. Alia

[Stefaan Boel]

If they can see the main page, you can make nonmembers curious enough to join your network because friends of them are a member (as they noticed this on there Facebook).
If they can't see the pages, that's up to you, at my network, all is visible to everyone.
If they land on a login page of you, make sure it's been nicely done, you can customize that. (still have to do mine). If they really what the info, they will join you.
Then again, I prefer not forcing them to join and keep everything open. If they really would like to contribute (and those are the only people you need!), they will join anyway...

Also, the more links you have to your community, the higher the google ranking will be.

It's all a mater of how you see it for yourself...once you have enough content, I would open it up. If you force them to login, maybe they will just look for it elsewhere. If at the end it was not what they where looking for at your site, they will not come back or even remove there membership. But if the info was what they were looking for, then maybe they will join, or maybe even reply to the topic or so...

just my 2 cents...

[Rev. O.M. Bastet]

Ah, thanks, that is a very helpful discussion, much appreciated. I will be better able to evaluate our policy and situation now.

Many thanks,
Rev. Alia

[Stefaan Boel]

Hey Jazzy,

Can you drop the code in here?

The facebook page link should look something like this: http://www.facebook.com/pages/Autodesk-Inventor-Wizard/379123482358
When you edit your page settings, on the top there is the link: "check page" that's the url you need...

Are there spaces in the filename of the uploaded picture? If so, remove those, that might do the trick in most cases...

[Stefaan Boel]

pleasure! maybe drop a picture when you got it finished!

[Speed Racer]

Hey Stefaan, thanks for posting this, i almost have it.....the facebook button is there, it just isn't clickable. Here is the code i used

{img src="http://i114.photobucket.com/albums/n259/TheIntruder/facebook.png" /} {a href="http://www.facebook.com/pages/NASCAR-NATION-Where-NASCAR-Fans-Unite/354012104464" target="_blank"{/a}
(replace {} with <> of course, it's the only way i could get the CODE to show and not the image.......im still learning!)


also, i would like to place the twitter button NEXT TO the facebook one.....can you tell me how to do that? here is a screenshot