How to add or change the Social Icons

Social Media Bookmark Icons help visitors bookmark their favorite posts and articles in any social media platform such as Facebook, Twitter, Pinterest, Google+ and others, ensuring that they can get back to your site directly for future reference. Using these resources opens the possibility of getting your Joomla! page visible on the web and offers ways to get links back to your website.

We know that users can promote content by sharing to over 330 of the most popular social networking and bookmarking sites. Actually, social media icons are links which are illustrated with logos of social networks. However, it is not possible to show all icons on the same Joomla template, so generally we choose a few most popular, which, you can change using few lines of CSS and sometimes a graphic tool.

When it comes to social engagement you should understand the subject focus of every social network site that you want to use. For sure, entertainment social media icons (for example Pin It button) don’t fit on business websites.

Social Icons technique in Gavick Templates

• GK Creativity – in this modern template we used simple HTML, CSS3 content property used with the :before pseudo-elements to show content (social icon) in an element and Font Awesome (font vector icons) as a social icons. One reason why we decided to use it was because we wanted to cut down on the amount of images the page was loading.
• GK Magazine – we used the CSS Image Sprites technique – An image sprite is a collection of images put into a single image. So if you want to add new or replace an icon you need to use a graphic tool. All social icons are stored in this file: templates/gk_magazine/images/style1/icons.png (or style2 folder).
  Read more here: css-tricks.com/css-sprites/

  Note: Original image file has vertical orientation

• GK News – also here we used the CSS Image Sprites technique. All social icons are stored in this file: templates/gk_news/images/style1/social_icons.png (or style2 folder).

As you can see both templates GK Magazine and GK News uses this same technique, that’s why you can use same method. So if you want to add a new social button, you have to use a graphic tool. You can replace our icon with yours (this should be easy if you know the basics of image editing) or you can add a new one after g+ icon. If you choose the second solution you must also find a nice icon (for example on iconfinder.com) then add it at the end, with little a space before. Now you have to calculate how much you have to add to negative background position. Let’s try to add a youtube icon:

(1) Add a new HTML line with the “gkYouTube” class inside the CUSTOM HTML module:

(2) Use a graphic tool (also can be online) and add a new icon of dimensions 22×22 px (with two color options).

(3) Add a new line of css code (info how to), remember to add the full URL to image (social_icons.png) to be sure that link will works.

.gkYouTube {
background: url("FULL URL social_icons.png") no-repeat scroll -115px 0 transparent;
    display: block;
    float: left;
    height: 22px;
    line-height: 22px;
    padding: 0;
    text-indent: -9999px;
    transition: background 0.3s cubic-bezier(0.2, 0.7, 0.9, 1) 0s, color 0.2s linear 0s;
    width: 28px;
}

.gkYouTube:active,
.gkYouTube:focus,
.gkYouTube:hover {
background: transparent url('FULL URL social_icons.png') no-repeat -110px -22px;
}

Result (after mouse hover on YT icon)

Less Icons is better

We suggest: Don’t use too many social media sharing buttons on one page. Nobody will share your post via all of his/her social media accounts. An average user doesn’t even know what those icons are used for. Instead select the popular ones in your country or select the ones that are most related to the topic of the website. Read about the Paradox of Choice if you don’t believe us.

The more buttons you paste onto a template, the more KBs need to be loaded and the higher the website loading time is. Site visitors and Google like fast websites, so you shouldn’t disappoint them.

Alternatives

If you don’t have the patience to make changes on your own, you can also use ready social modules like our Social GK5 or use code from AddThis.com instead. Also on JED there are some others modules which allow you to choose small or big, colorful or monochrome social icons.