Help Guides/Using Viewbook/Pages & Websites

How do I add an Icon and link to my Twitter, Facebook, etc pages?

Rien
posted this on June 23, 2010 02:52 PM

1. Simply copy the (textile) code from the text boxes below and add it to the Text of your Pages.
2. Replace the link at the end of the code with the real link to your Facebook, Twitter or LinkedIn page.

Facebook

Twitter

LinkedIn

Vimeo

Tumblr

Flickr

Wordpress

Blogger

Google

 


Need more icons?

Just because you don't see the icon you are looking for in the list doesn't mean we don't have it. Check if we support it by changing the first part of the icon's filename to the service you're looking for, for example:

16 pixels version:

"!http://static.viewbook.com/images/social_icons/lastfm_16.png!":http://link_to_your_lastfm_page

"!http://static.viewbook.com/images/social_icons/pinterest_16.png!":http://link_to_your_pinterest_page

 

32 pixels version:

"!http://static.viewbook.com/images/social_icons/lastfm_32.png!":http://link_to_your_lastfm_page

"!http://static.viewbook.com/images/social_icons/pinterest_32.png!":http://link_to_your_pinterest_page

 

Open link in new tab.

The textile code suggested on this page will not open your page in a new browser window or tab. If you would like to open your links in a new tab you need to use HTML. The HTML for a Facebook button that opens in a new browser window looks like this:

<a href="http://link_to_your_facebook_page" target="_blank"><img
src="http://static.viewbook.com/images/social_icons/facebook_32.png"/></a>

Change the URLs to your page and the icon depending on which service you are using.

 

Alignment.

For horizontally aligned icons leave a single space between the code for each button. You must be precise with the code and the spacing. For vertically aligned icons paste the code for each button on its own line.

 

The complete list (and donate to the designer)
You can find the complete list of all the supported icons here: http://www.komodomedia.com/blog/2009/06/social-network-icon-pack/. You can also find the license and donate here.

 

Comments

User photo
Jean L

Thanks!

Also, I would love the Flickr icon !

Amazing work Rien !!  Viewbook is so awesome !!

July 26, 2010 02:06 PM
User photo
Rien
Viewbook.com

Flickr icons are there!

July 26, 2010 02:21 PM
User photo
Brian Rolfe

a blogger icon would be cool!

September 20, 2010 10:42 AM
User photo
Pete Springer

Wordpress and Google profile icons would be nice.  Helps with SEO too!

September 30, 2010 06:31 AM
User photo
Rien
Viewbook.com

There you go, check icons above.

October 01, 2010 03:17 PM
User photo
Pete Springer

Cool, thanks Rien!

October 01, 2010 05:52 PM
User photo
Brian Rolfe

Rien, you're a star! Thank you!

October 04, 2010 03:19 PM
User photo
Alexandre Ayer

Hi, could you please let me know how to open in a new page when someone clicks on the facebook logo please ?

I'd prefer if people weren't taken out of my website...

Thank you !

October 07, 2010 12:06 PM
User photo
Rien
Viewbook.com

You can't with the code above. 

October 07, 2010 03:10 PM
User photo
Alexandre Ayer

Thanks for your quick answer. Ok so if i get my own facebook icon and create a link from the image, can I make it open in a new window then ?

October 07, 2010 03:29 PM
User photo
Rien
Viewbook.com

Yes if you create an HTML link yourself: http://www.w3schools.com/html/html_links.asp Use the target="_blank" attribute to open your link in a new window.

October 07, 2010 04:26 PM
User photo
Andrew Paterson

Rien,

Could you add: LastFM, Goodreads, Delicious, Tripit, Dopplr, Gowalla, Foursquare & Changents ?

I'm sure that would greatly please other users too.

Great app , bravo to the team !

Andrew

October 13, 2010 04:02 PM
User photo
Andrew Paterson

Rien,

 

Great job of adding the extra icons, super easy !

Thanks again ;-)

November 04, 2010 10:17 PM
User photo
John Hope

This is brilliant - great work guys! Is it possible create a tile to 'like' your facebook page directly from viewbook? I have seen this done on other sites eg http://www.barrumbadisco.co.uk/

Cheers,

John

http://www.johnhopephotography.com

November 22, 2010 03:43 PM
User photo
Jorge L. Campos

Hello guys. 

 

In http://www.iconfinder.com you can find nice icons with creative comons. I did use a icon taked there as base for icons on my website http://campos.viewbook.com

I Hosted my icons on a server ( i think, if you put on a album in viewbook works too, I never try but all you need is take the URL) 

 

the code on my website is:

<div align="left"><a href="http://br.linkedin.com/in/profilejorgelcampos" target="_blank"><img src="http://arquivos.socionautas.com.br/icons/linkedin_vb.png" border="0" height="30" width="30" /></a>  <a href="http://facebook.com/jorgelcampos" target="_blank"><img src="http://arquivos.socionautas.com.br/icons/facebook_vb.png" border="0" height="30" width="30" /></a>  <a href="http://twitter.com/jorgelcampos" target="_blank"><img src="http://arquivos.socionautas.com.br/icons/twitter_vb.png" border="0" height="30" width="30" /></a>  <a href="http://jorgelcampos.blogspot.com" target="_blank"><img src="http://arquivos.socionautas.com.br/icons/blogger_vb.png" border="0" height="30" width="30" /></a></div>

 

Good luck!

Abraço

March 12, 2011 08:56 PM
User photo
Alrik
Viewbook.com

Thanks for sharing Jorge! Cheers!

March 14, 2011 12:05 PM
User photo
Lee South Photography

anyone come across a icon for ModelMayhem.com for us photogs? thanks, loving this site!

April 01, 2011 02:41 AM
User photo
Pete Springer

Lee, MM doesn't really have an official icon.  On my blog, I took their web browser toolbar avatar and used that as an icon/link to my model mayhem site.  You can see that icon here on the right hand side under "connect".  http://petespringer.biz/blog/

April 01, 2011 07:38 AM
User photo
Jorge L. Campos

VB team,

 

would be good if you put a VB icon in creative commons too. and maybe a fav.ico for all websites.

 

=D 

April 01, 2011 07:46 AM
User photo
Lee South Photography

thanks pete, i contacted MM and requested an icon also. great work btw

April 01, 2011 08:40 AM
User photo
Sunny

Alrik,

Can you support a Pinterest icon? http://pinterest.com/

May 13, 2011 05:20 PM
User photo
helen ospina

ok i must be clueless can't figure out why the following aren't working 

"!http://static.viewbook.com/images/social_icons/facebook_32.png!":http:/pages/Helynn-Ospina-Photography/283350372458

"!http://static.viewbook.com/images/social_icons/twitter_32.png!":http:/snflwrsf


June 28, 2011 03:15 AM
User photo
Jameel Khaja

my twitter button link only works if I hold down command to open in a new tab -- if i just click the link -- nothing -- thoughts? -- j

June 30, 2011 05:03 AM
User photo
Jameel Khaja

Also, how about the twitter bird icon instead of the T?  The latter is confusingly similar to the Tumblr icon.

July 01, 2011 07:55 PM
User photo
Rien
Viewbook.com

Jameel, can you send a support request with the link to your page?

July 03, 2011 09:37 PM
User photo
Jameel Khaja

Hi Rien -- I think I solved the issue.  Thanks -- j

July 03, 2011 11:28 PM
User photo
Alrik
Viewbook.com

The code for opening in a new tab:

<a href="http://link_to_your_facebook_page" target="_blank"><img
src="http://static.viewbook.com/images/social_icons/facebook_32.png"/></a>

August 05, 2011 10:33 AM
User photo
Louise Munro

Hi Just wondered if you are going to get an icon or allow support for a béhance icon?  This is now a large growing site for creatives and would be excellent to link our websites to our accounts.  Thanks

October 18, 2011 04:32 PM
User photo
Mark Lillis

Jorge L. Campos Thanks a lot!... great icon advice. cheers

work in progress - www.architecture24.co.uk - but atleast ive got my icons up and running

October 26, 2011 11:59 PM
User photo
Frank Friedrichs

Is the Google+ icon available and/or the +1?

November 01, 2011 04:20 PM
User photo
Alrik
Viewbook.com

The Google+ button code uses Javascript that conflicts with our current page code. This will become easy in V3.

November 02, 2011 03:50 PM
User photo
SiewMei Caroline

It's not working for me! D: 

December 12, 2011 04:41 PM
User photo
meyly brosseit

what about a icon for etsy?

January 23, 2012 03:38 AM
User photo
Jim
Viewbook.com

You could try using the same code as above with one of these.  Upload one (or both of them) to an album.  Get the URL for the image, and paste it in.

Like this >>> "!http://crazy_long_link_from_my_album_etsy32.png!":http://link_to_yo...

We'll update this page soon. 

etsy16.pngetsy32.png

January 27, 2012 08:52 PM
User photo
Miguel Doreta

I tried adding a Google+ icon so people can +1 directly from the site using the code that i found on google's website, but nothing shows up on my page. What am i doing wrong here?

 

The code i used is:

<!-- Place this tag where you want the +1 button to render -->
<g:plusone annotation="none"></g:plusone>

<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>

March 20, 2012 12:46 PM
User photo
Rien
Viewbook.com

The Google+ button contains Javascript which is not allowed at Viewbook. We will allow this in the next version of Viewbook, when we've implemented security measures.

March 21, 2012 01:32 PM
User photo
Leslie Plaza Johnson

Is there code to connect my website to my FB fan page, not my profile?

May 31, 2012 05:38 PM
User photo
James Carrick

How do I display my social icons side-by-side instead of on top of each other?

Cheers

June 04, 2012 03:01 AM
User photo
Jim
Viewbook.com

Hi James, 

You need to place the code very close together in the text box. 
For example, if you want Facebook and Linkedin Right next to each other, you need to paste it in like this:

"!http://static.viewbook.com/images/social_icons/facebook_16.png!":ht... "!http://static.viewbook.com/images/social_icons/linkedin_16.png!":ht...

Leave precisely one space between each item. 

 

Best, 
Jim 

June 04, 2012 03:38 PM
User photo
Jim
Viewbook.com

Hi Leslie, 

Unfortunately it's only possible to post and export to personal profiles. Well be looking for possibilities in the future.

Best, 
Jim 

June 04, 2012 03:58 PM
User photo
maria lankina

Jim for some reason my icons are still on top of each other. I rather them be all i one line with small space between them. How do I accomplish this ? thank you 

July 31, 2012 06:26 PM
User photo
Jim
Viewbook.com

Hi Maria, 

Paste the code into your page and leave a small space between each snippet of code. You have to be fairly precise with this. It's really easy to mess it up, but it's also really easy to get it right. 
Check your account now. I think that is what you are looking for. 

Best, 
Jim 

August 02, 2012 06:54 PM
User photo
BRUNO BARATTI

Please, FANCY too! Thank you.

October 12, 2012 08:30 AM
User photo
Cindy Carvajal

I know I am doing something wrong but I cant figure it out. I am trying to add the button to my site but all I get is the Facebook icon and my url written next to it. Can anyone help?

October 25, 2012 10:32 AM
User photo
Jim
Viewbook.com

Hi Cindy, 

I just checked your account, and I didn't see any social media links. Send me the URLs to your social accounts in support, and I'll check it out for you. 

support@viewbook.com

Best, 
Jim 

October 27, 2012 01:13 PM
User photo
Angel Williams

How long will it be before we can have an Instagram icon?

November 05, 2012 07:16 PM
User photo
Sarah Sanchez
yes that would be amazing to have an instagram icon =)
November 06, 2012 08:37 AM
User photo
Tara Fallaux

Hi, Is there a Behance icon?

cheers, Tara

November 09, 2012 02:01 PM
User photo
Jim
Viewbook.com

Hi Sarah and Angel, 

It took a few days, but we have added the Instagram icons. 

This one is for the bigger icon:
"!http://static.viewbook.com/images/social_icons/instagram_32.png!":h...

This is for the smaller:
"!http://static.viewbook.com/images/social_icons/instagram_16.png!":h...

Best,
Jim 

I just realized that my link examples above look crappy. Just use the code from any of the icons from the above article, but replace the image links with:

http://static.viewbook.com/images/social_icons/instagram_16.png
or
http://static.viewbook.com/images/social_icons/instagram_32.png

 

November 15, 2012 10:41 PM
User photo
Jim
Viewbook.com

Hi Tara, 

We'll see what we can do about getting a Behance logo. Hang in there. 

Best,
Jim 

November 15, 2012 10:51 PM
User photo
Jim
Viewbook.com

Hi Tara, 

The Behance icons are uploaded. Replace the image link in the above code with:

http://static.viewbook.com/images/social_icons/behance_16.png
or
http://static.viewbook.com/images/social_icons/behance_32.png

Best,
Jim 

November 16, 2012 09:18 PM
User photo
Vikki Asker

I'm struggling to get my instagram and twitter to open successful in a pop out window. 

 

thanks!

November 23, 2012 10:29 PM
User photo
Jim
Viewbook.com

Hi Vikki, 

The code on this page will not open your page in a new window. You need to use HTML for that. If you read through the above comments you will see that Alrik has already answered this question. Use this code:

<a href="http://link_to_your_facebook_page" target="_blank"><img
src="http://static.viewbook.com/images/social_icons/facebook_32.png"/></a>

and 

<a href="http://link_to_your_twitter_page" target="_blank"><img
src="http://static.viewbook.com/images/social_icons/twitter_32.png"/></a>

Best,
Jim 

November 23, 2012 10:50 PM
User photo
Vikki Asker

Yes, I have changed that around, but the instagram one goes to a google error page, and the twitter one changes my url so won't go through to my twitter. 

Thanks, Vikki!

November 23, 2012 10:52 PM
User photo
Jim
Viewbook.com

Hi Vikki, 

I just checked your account, and I saw that you had a few typos and extra spaces in the links to your pages. Everything must be precise. No extra spaces. No extra characters. You should be all set now. 

Best,
Jim 

November 23, 2012 10:57 PM
User photo
Vikki Asker

I've sorted that out, but now it's just written out as a link, rather than an icon to click on..

thanks, vikki

November 23, 2012 11:04 PM
User photo
Jim
Viewbook.com

Hi Vikki,

I just fixed it a few minutes ago. Stop editing it, and let me fix it please. I'll let you know when I'm done. 

Best,
Jim 

November 23, 2012 11:08 PM
User photo
Vikki Asker

Oh, sorryyyyy! 

thanks, vikki. 

November 23, 2012 11:08 PM
User photo
Jim
Viewbook.com

Hi Vikki, 

It's done. If you have further troubles, you should probably email support. Also, make sure you don't change the code at all. It stopped working before because there were spaces in the wrong places, and one necessary space was erased. It needs to be precise. 

Best,
Jim 

November 23, 2012 11:14 PM
User photo
Jim
Viewbook.com

Sorry if I sounded snappy. It was supposed to be a friendly snappy. 

November 23, 2012 11:16 PM
User photo
Vikki Asker

No it's fine, i didn't realise I wasn't meant to be changing it still. However the link to twitter isn't my twitter, and after putting my actual twitter name is, it goes to the error page again. 

thanks. vikki

November 23, 2012 11:21 PM
User photo
Jim
Viewbook.com

Hmmm... It looks like the problem has something to do with the _ in your twitter account. There is no logical reason why. The HTML looks good to me, so I assume it has to do something with how a Viewbook page sees an underscore in a link. It's almost midnight on a Friday (we're in Holland) so the guy who has the answers is not available. I'll send him an email, and one of us should get back to you on Monday. 
Hang in there.

Best,
Jim 

November 23, 2012 11:37 PM
User photo
Vikki Asker

That'd be brilliant, thankyou so much!

 

Vikki.

November 23, 2012 11:50 PM
User photo
Sara Bisulli

Hello,

I am copying the codes in the text widgets in Wordpress, but no image is displayed. Do you have an idea of what I am doing wrong? I am not an expert so I hope you can help me!

Thanks a lot,

Sara

December 06, 2012 09:48 AM
User photo
Lindsay Zubay

is there a pinterest icon anywhere that i can use?

February 03, 2013 11:25 PM
User photo
Jim
Viewbook.com

Hi Lindsay, 

If you read the bottom of the article, under the heading Need more icons? you will see instructions on how to find icons for other services. Our example is:

"!http://static.viewbook.com/images/social_icons/lastfm_16.png!":http://link_to_your_lastfm_page

If you swap out lastfm for pinterest, you will get a pinterest icon. Of course, you will need to use your Pinterest account URL for the link part of the code. 

Best,
Jim

February 04, 2013 10:57 AM
User photo
Jim
Viewbook.com

Hi Sara, 

I'm not sure if our textile links work in Wordpress. If they aren't working for you, it's a safe bet they don't work at all. 

Best,
Jim 

February 04, 2013 10:58 AM
User photo
Paul Webb

I would like to add an icon link to Pinterest and Model Mayhem.

March 10, 2013 01:31 AM
User photo
Jim
Viewbook.com

Hi Paul,

We don't have Model Mayhem, but Pinterest is in there. The answer is above your question. It is addressed to Lindsay. 

"If you read the bottom of the article, under the heading Need more icons? you will see instructions on how to find icons for other services. Our example is:

"!http://static.viewbook.com/images/social_icons/lastfm_16.png!":http://link_to_your_lastfm_page

If you swap out lastfm for pinterest, you will get a pinterest icon. Of course, you will need to use your Pinterest account URL for the link part of the code."

I will look into getting a Model Mayhem icon. 

Best, 
Jim 

March 11, 2013 02:58 PM
User photo
Paul Webb

Thank you for the help.

It would be nice if a ModelMayhem icon link could be set up.

ModelMayhem is much used by photographers.

Paul

March 15, 2013 04:44 PM
User photo
Jim
Viewbook.com

Hi Paul,

You could download these:

modelmayhem_16.pngmodelmayhem_32.png

Upload them to one of your albums, and then replace the link in this code with the link from your album.

"!http://link to your link.png!":http://link_to_your_facebook_page

Best,
Jim 

March 15, 2013 07:04 PM
User photo
Paul Webb

Sorry.

Tried everything but can't get the icon to appear. Must be doing something wrong but don't know what.

March 17, 2013 02:20 AM
User photo
Jim
Viewbook.com

Hi Paul,

I looked in your account, and I see that you uploaded the icons. To make them work you need to change the  "yourlink.png" to whatever the URL of the icons in your account is. In your case that URL is http://images.eu.viewbook.com/f52cbd7870f90155b588334f2a53ec1c.png

So, your code looks like this:

"!http://images.eu.viewbook.com/f52cbd7870f90155b588334f2a53ec1c.png!":http://www.modelmayhem.com/paulwebbphotography

I'm not sure what you tried, but this is how it is done. Next time you have trouble with something like this, it's probably better to just contact support. support@viewbook.com

Best,
Jim 

March 19, 2013 03:47 PM
User photo
Paul Webb

Many thanks Jim.

I couldn't figure out the URL to link to.

Best Regards

Paul

 

March 20, 2013 03:04 AM
User photo
Jim
Viewbook.com
March 20, 2013 01:31 PM
User photo
Sebastien RICHARD

Hi,

It would be awesome if a Elance icon link could be set up too...

Otherwise, I found an interesting Elance button here:

https://www.elance.com/samples/elance-button-logo-button-web-design-graphic/31317536/

Best,

-s-

May 05, 2013 10:46 PM
User photo
Esther Prinsze

Hi,

The pinterest icon isnt working. And i cannot seem to find it on the website you mentioned. 

Grtz, Esther

 

 

May 27, 2013 09:54 PM
User photo
Esther Prinsze

Hi Esther, 

The pinterest icon works.
See - http://www.esprifotografeert.nl/pinterest-test
You must be typing something wrong. I looked in your account, and I cannot find where you were trying to use the pinterest button. Contact support with more information. Include the code you are trying to paste in. Also, include your pinterest address. 

Best, 
Jim 

May 29, 2013 11:14 AM
User photo
Jim
Viewbook.com

Hi Sebastien, 

We probably won't be adding an Elance button soon, but we'll look into it. In the meanwhile, you should upload the Elance icon you wish to use to an album in your account. Once you upload it, get the link to the icon by following the instructions here - http://support.viewbook.com/entries/21283568-when-I-select-original...

Then make your own code, sort of like this:
"!http://link-to-your-image.png!":http://link-to-your-elance-account.com

Best,

Jim

May 29, 2013 11:30 AM
User photo
Jim
Viewbook.com

Hi again Esther, 

I'm not sure why my answer to your question was listed as being answered by you. The answer is valid, regardless of whom it is attributed to. 
Have a good one.

Best,
Jim

May 29, 2013 11:32 AM
User photo
Esther Prinsze

Hi Jim, 

Thanks for your answer. I will try and find out. 

Best, 

 

Esther

 

May 30, 2013 11:12 AM