TUTORIAL: How to load social buttons to your web pages

[Genesis]

Thought this may be useful information for those who are loading social buttons for the first time. I got my basics from Google blogger, but there is plenty of literature on the Web of course. A quickie tutorial is the following. It is for placing the icons in the upper right hand corner of your Website page like so:



Step one: Log into cPanel or your preferred FTP Manager

Step two: I use my trusted pal cPanel File Manager, however you can use FTP or FileZilla as well to get into the directory where your Webpage is located. Once you are in there, you then upload the social icon images into that particular directory:

twitter.png
facebook.png
rss.png
google_plus.png
etc

Step 3: Click on the Webpage folder in your cPanel File Manager or preferred FTP. Click on edit and open the page to edit the html code.

Step 4: Navigate to <header> in the code and directly under <header> paste the following code (don't include spoiler tags ):

Spoiler

<div class='social-media-icons' id='social-icons'>
<ul>

<li class='media_icon'><a href='http://facebook.com/username'><img border='0' src='http://yourwebsitename.com/facebook.png'/></a></li>

<li class='media_icon'><a href='https://twitter.com/username'><img border='0' src='http://websitename.com/twitter.png'/></a></li>

etc

</ul></div>

Step 5: Save the code

Step 6: Get back into your file directory where your Web page is. Look for your css stylesheet, select it and click on edit. Open the page.

Step 7: Navigate to under the "header" section of the stylesheet until after the header section's last "}" and paste the following CSS (again don't paste the spoiler tags)

Spoiler

#social-icons {
margin-bottom:-30px;
height:50px;
width:100%;
clear:both;
z-index: 2;
position: relative;
}
.social-media-icons {
display:table
}
.social-media-icons ul {
text-align:right;
padding:5px 5px 0 0
list-style-image:none;
list-style-positionutside;
list-style-type:none;
}
.social-media-icons ul {
margin-bottom:0;
padding:0;
float:right;
}
.social-media-icons li.media_icon {
margin-left:6px;
padding-left:0 !important;
background:none !important;
display:inline;
float:left;
}

Check the social icons and tweak the CSS if necessary.

 

[eagleieric]

Cool. Thanks so much.

 

[PrOsAnGeLz]

This is really useful for my blog.

 

[Snowflake]

Thanks for another good tutorial!

Perhaps you could add something like [Tutorial] on every tutorial title thread, or a sub-forums for tuts, that would be better imo.

 

[Genesis]

I'm not too much in favour of sub-forums, as if people are as lazy as I am, that is one click too many. The Tutorial in the heading is a great idea however and have added it to the title of the thread. We could also make it a sticky thread.

 

[medicinatic]

Nice, very nice.

Thank you for sharing this, was looking for something like that to load to my future coming site.

:give_rose:

 

[Snowflake]

I'm not too much in favour of sub-forums, as if people are as lazy as I am, that is one click too many. The Tutorial in the heading is a great idea however and have added it to the title of the thread. We could also make it a sticky thread.

I understand. sticky and the word tutorial works good too, people know it's something informative and not someone asking a question instead. =)

 

[dardan]

if you use boostrap you have gluphicons, otherwise you van do some hardcore images of your own then use <img> and a hrefs :search:

 

[GigaGreg]

if you use boostrap you have gluphicons, otherwise you van do some hardcore images of your own then use <img> and a hrefs :search:

True, but glyphicons are out of use for many years. As soon as people created Fort-Awesome, every one uses Font-Awesome icons, because they are cooler and there a lot of useful icons to use.

 

[Hazem]

Thanks for Sharing :smile: