Chris Bigelow

Disparate thoughts and musings…

Tutorial: VisualCV Social Media Buttons

VisualCV Social Media LinksLast week a friend of mine (we’ll call him David) asked me how I did the social media buttons on my VisualCV (click the VisualCV button to the right and look in the top, right corner), so I thought I’d put together a little tutorial.  I’m assuming you already have a VisualCV.  If not, go to http://www.visualcv.com, sign up for a free account, and follow the prompts to import your LinkedIn profile.  This is the fastest way to get up and running with all of your basic data.  From here you can tweak to your hearts content.  Don’t have a LinkedIn profile yet?  Shame on you.  My recommendation would be to create that first.

Once you have a VisualCV go into edit mode.  Your VisualCV consists of a “Main Column” and a “Sidebar”.  The edit menu area is split into two parts – one for each of these areas.  There are various sections you can add to the main column and sidebar.  We’re interested in adding a section to the sidebar called a “Portfolio”.  I put mine at the top of the sidebar where it is visible and convenient for folks to click through, but it can be located anywhere in either area (main or side).  Once you’ve added this section and positioned it (drag and drop to rearrange) we can start adding buttons.

Let me give a brief background note here: the portfolio section is intended to showcase things in your portfolio (duh!).  If you’re a graphic artist this makes sense.  But the area can be put to other uses.  I know a guy who has a photo of one of his patents shown in the portfolio area of his VisualCV.  The key feature of the images you place in your portfolio is that they are clickable hot links.   Typically, they link to a larger copy of the image so that folks can see it in more detail.  But they can just as easily link to external web sites, which is how the social media buttons work.

So now you have an empty portfolio section.  First things first: you need images to use for your buttons.  The easy way would be to right-click and “save image as” on mine.  The “My Website” button was created by my son, the Photoshop wizard, and then edited by me.  Buried deep in the LinkedIn site is a place to get buttons; you can find it at https://www.linkedin.com/profile?promoteProfile=.   My Twitter button came from http://www.twitbuttons.com/ where they have quite a collection so, if you don’t like mine, pick another.   I created my Google button by typing my name in the Google search box and then doing a rectangular screen grab in a roughly button shape (I may have had to do a little cropping afterwards to get it the way I wanted it).  I found the Facebook button by searching around via Google.

Once you have your buttons you need to upload them to VisualCV.  It may be easiest to do this one by one as you add each portfolio item to your new section.  Click the “Add a Portfolio Item” button at the bottom of the section.  I did not title each button as I think it looks cleaner, but that’s a personal taste thing (all I have is a single title for the section, and this you add by clicking on the title area of the overall portfolio section).  Add an individual item title or not as you see fit.

Next, click on the “Choose Portfolio Item” box with the “X” through it.VisualCV Choose Portfolio Item This will open a window with two tabs: “Upload” and “Portfolio”.  Your portfolio will most likely be empty save for the photo headshot you may have uploaded for the main column.  Click on the “Upload” tab, browse to your button image location and select it, add a descriptive title in the box, and hit the “Upload” button.  Only certain image formats, such as JPG, are supported – if you get an error your image is either too large or in an incompatible format.

Now that you’ve uploaded your button image you must select it in the “Portfolio” tab.  When you do, you are presented with some choices for the image’s “Click-Through Behavior.”  Click on “Link Image to a Website”, enter the URL address of your matching social media page, and click the “Add to Section” button.  If everything looks okay, click the “Save” button below your new portfolio item.

That’s it.  Repeat for any other buttons that you wish to add.

Advertisements

5 Comments»

  Greg Taylor wrote @

Chris, great contribution. I will be linking it to my blog.

  Karl Wolfe wrote @

Chris,
Thanks for posting this tutorial! I was scratching my head trying to figure out how you did it. This was very helpful – appreciate the links.

  Chris Bigelow wrote @

Karl –

Glad you found the tutorial helpful. Stay tuned for more.

  Tim Fisher wrote @

Social media button worked like a charm. Thanks to David Coons for turning me onto this and Chris for doing all the hard work. Thanks Guys!

  Chris Bigelow wrote @

Thanks, Tim – glad I could help! Say “Hi” to my good friend David for me.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: