Add Social Media Icons To Your Pages

AUDIO VERSION

WELCOME

Welcome back to the User Experience podcast.  In this episode you'll learn how to add social media icons to your Pages, so people can easily click in and get in touch with you on the platform they like best.

Please enjoy the video tutorial, audio podcast, and transcript below.

The code snippets you need are right here in this post, along with instructions and links for followup information.

Got a question?  Drop it in the comments or tag Steve Knots in the Facebook collab.

Thanks for joining me!

INSTRUCTIONS

1. Choose the location where you want to add the icons, such as on a Page, in an MV Product, or within a Blog Post.
   
   
2. Copy the HTML Code snippet and paste it into the Source Code editor ("<>" button)
   
   
3. Add your own links for your social media profiles by editing the text that says "YOUR _____ LINK HERE"
   
   
4. Copy the CSS code snippet and paste it into your global MV Settings > Advanced > CSS
   
   
5. Save and Preview.

PLEASE NOTE: Don't rely on an image that's hosted on another site, where it could get taken down at any time and break your link.

The best practice for using online images is to download the social media icons to your own computer, and then upload them into your MV, so you can create your own links to the images. This will make sure they remain available anyplace you embed them.

For details on how to create an MV File Library where you store your images, please visit our help guide in the KnowledgeBase concerning How To Create a File Library.

CODE SNIPPETS

Copy the following code and paste it in your MV Admin Dashboard at Settings > General > Advanced > Custom CSS.

Remember first to make a backup copy of any CSS code you have in place already, to make sure you can retrieve your site design in case you make any mistakes.

CSS CODE

Now copy the following code and paste it into the HTML source code editor of the Page where you would like these social media icons to appear.  You will need to enter the URLs to your own social media sites, where it is noted in all-caps.  Do this in the source code editor after you paste the code in.

HTML CODE

LEARN FROM A PRO

If you find you would like to have a little more help with the programming side of things, please visit the "Summer of CSS Magic" program.

This is where you can get individual page design help to customize your own MV site, in an excellent program from our friend Juci.

GET HELP WITH YOUR CSS

TRANSCRIPT

Hey, I'm Steve Knots. Welcome to the User Experience podcast. Today I'm going to show you
how to add these really cool social media icons into your member vault site. So people can click
on them and get in contact with you. And what's really cool is these can be added to a page, a
blog post, or anywhere in a MemberVault text section, such as a lesson module product, or
promo text area when you want to start a conversation.

And before we go any farther, let me remind you, this is part of our summer series of page
design tips, which you can find all of them in order at these links in the episode list at
courses.vipmembervault.com/css-library, that's a MV blog, and all our past episodes are right
there waiting for you to find.

And if you need just a little bit of help with your code, and you're not too used to programming,
what you should do is check out the summer of CSS magic from our friend Juci, who has a
whole program to teach you how to customize your MemberVault with your branding your
colors, make it look just like you like it. And she's much better at this stuff than I am I can learn
a few things and design some tips and stuff. But she can really teach you how to get it done.

So what are we doing here? Let's see, this is a page that I built last time I controlled the page
width to make the video not go the full width. And then I paste it into Wikipedia text. Let's say
for example, this was my page and I said at the bottom, hey, if you've got a question about
your flowers, get in touch with me on the platform of your choice. And let's talk and I have
these big beautiful buttons. How did I get them to be there?

Well, let's go to our page editor. So I'm in the Pages section. My page is called adding social
icons. And here we have the page content. If you scroll down, you'll see at the bottom, whoa,
all right, we got some big icons, not sure if that's yeah, don't rely on what you see in the page
content editor, you always want to keep a second tab open and preview in a second tab. So to
get these buttons working, we're going to use a little CSS and I'll show you the two pieces. Let's
edit source code mode, enter source code mode. piece number one is a div class called logos
that goes all the way down to there. And there's the end div.

Okay, let me separate this a little bit. So this is a CSS class called logos. Anything inside this
division is going to be the content that goes in that division. And here we have the end div.
What is that class all about? Well, here is our main general settings. Okay, so go to your admin
panel, General Settings, Advanced Settings, we've got account social Advanced Settings, in
your custom CSS, this is a piece of code, you're going to paste in here, which you get from my
blog post. And that is called logos. And this basically tells your page, when you see the division
called logos, we're going to make it styled like this with this with this size, this shape. That's all
you need to know.

To take this stuff, paste it into your general settings, click Save, and keep going. Now
remember, before you edit any of your custom CSS, what you should do, select all make a
copy, paste it to a text document, save it and close it, then come back in and add the new stuff
so that if anything goes wrong on your site, you can easily restore what you had before without
having to rebuild it from the beginning. So that's a little reminder on good programming
practice.

Now in our page editor, remember, we're right here, we got to the bottom contact section, I
wrote some text in here. Now I took the second chunk of code and pasted it in. And I'm going to
break this up a little bit to make it just a little more clear what we're doing. So first up is the
div, the class called logos, which is telling the page or making a divider making a division. And
the class is going to call up the parameters of the Logos section. And now we have these
anchor tags, anchor hyperlink and end "div".

So when you paste these into your page, you need to change the links to make them fit your
site. You can see this Facebook link goes to groups slash mix the texture on the preview page,
click the Facebook F, it takes you to my Facebook page. That's what you want to have happen.

You want it to go to your page. So in this code that you're going to copy and paste, you want to
enter your own URL for your Facebook profile or group. What's the next system I see the word
Instagram and I see an image Okay, next Instagram, same thing. This is my Instagram profile.
So you're going to want to change this hyperlink to your own profile on whatever platform
you're using. Same thing telegram now for telegram I just used the generic telegram.org. Same
thing for WhatsApp, you need to change those to customize them to your profile.

And then when you get to the Preview section. Each one of these icons is going to go to your
specific profile. For example, Instagram goes to a mix of texture music, there's my profile, and
that all works fine. Now one thing for the advanced users among us, you may notice that I'm
referencing an image that's at an external site. This is not my WordPress content that is not my
site. If I copy this link right here Open a new tab and paste in that link. The cool thing is that
image exists online, you can go to this place and find it. And it's not always going to be there.
So what we're doing on our on our edit here is we're referencing that link and putting it into a
place that membervault can send people there and connect it with your site.

Okay, so that that F circle we're seeing right here, I don't own that one, I didn't make it, I didn't
download it, it's on that URL. And I'm just calling it up from MemberVault. So for really good
internet architecture, what you should do is something like go to this site, download the image,
and then upload it to your own MemberVault image library, and then call it up with the link to
your image library in your page.

Now, if that sounds like a mouthful, we have a tutorial on that in the knowledge base, about the
MemberVault image library. The basic point is, whoever owns this page, if they just decide to
delete it, or take it down or change it, then whatever you have in your post is going to
disappear and you have a broken image, you don't want that to happen, you always want the
image to be there as long as you want it to be there. So the best practice is to get this
Facebook icon, download it, put it into your MemberVault image library, and then upload it
again. So that when you call it up, it's going to be there. So that's a little bit more advanced.
For the purposes of this tutorial, I just want to show you it's possible to use an image, link it to a
profile of your own, and get them on your page using some CSS styling.

Again, to review, we're calling up a division section called logos. We have entered that logos in
the Custom CSS, like master code and your advanced settings. And then we have a few
anchors for Facebook, Instagram, telegram and WhatsApp. And then we end with the end
division. To get the result of these icons at the bottom of your page or your blog post, or
anywhere you want to have them in your member vault so that people can click on them, get in touch with you join your Facebook group, start a conversation, possibly even go shopping at your Instagram shop. If you have it all hooked up. There's a lot you can do. That's a lot of fun. I want to show you how to get started.

And if you feel like you need a little more help get in touch with Juci at the summer of CSS
magic, her site is code and glitter. And the stuff that she can teach you in this program is
absolutely incredible. If you had to take these eight modules, and hire somebody to do all these
things, it would cost you a lot more than the price of her program. It's absolutely worth it
knowledge that's going to help you in anything you're doing not just MemberVault. So I really
recommend getting in touch with Juci. Plus, she's really funny and has a great sense of humor.
And that's why you should call her up or you know, get in touch.

So that's it for me in the User Experience podcast. Thank you so much for hanging out and
watching these. If you have any questions you can drop a comment under this post. And I'll see
you in the Facebook collab, and see you next week. Thanks a lot.