How to Add Social Media Icons in HTML


Published: | By POWR

Adding free social media icons to your website pages can be a great way to direct visitors to your feeds, grow your audience, and provide social proof–but it's essential that your icons are formatted correctly and linked to the right pages.

The key is to provide a streamlined customer journey, so whether you're unsure how to add social media icons to Adobe Portfolio or embed social links on your landing pages, a plugin is your best bet.

Social media plugins allow you to display professional, recognizable icons without needing to fiddle with coding or worry about compatibility.

Adding Social Media Links Into HTML Coding

There are several ways to link your social media feed with your website, and the right solutions depend on your coding skills and what you'd like to achieve.

Creating HTML Social Media Icons

The first option is to download an icon relating to the social media feed you'd like to link to, such as LinkedIn, Instagram, Facebook, Twitter, or Pinterest.

Here's how it works:

  • Download a good quality icon—ensuring you have commercial permission to reuse the icon on your site.
  • Embed the icon onto the relevant page, using an a-tag at the start of your code snippet to make it a link rather than a static image.
  • Make sure you set the target like this: 'target="_blank"; otherwise, your icon will open over your landing page instead of in a new window.

If you're unfamiliar with HTML coding, it's well worth hiring a developer or using a no-code plugin because a mistake at this point could mean your icon is in the wrong place, doesn't link correctly, or simply doesn't work.

Most website owners need to resize icons to ensure they slot into the right field on their page, but you need to be careful not to exceed the resolution of the icon file since it'll result in a blurry image.

HTML vs. Plugins

Even if you are conversant in HTML, one of the challenges is that you'll need to repeat the process manually for every social media platform you want to add a button for.

A social media app or plugin makes it significantly faster and easier to maximize the visibility of your social media, boost your following, and use animated buttons that look professional.

Benefits of a social media icon plugin include:

  • Custom layouts, so your icons are stacked or laid out perfectly to match your web pages and other content
  • Tailored branding, with options to adjust each icon's color, size, and background for consistency
  • Sticky positioning means the icons remain on the page as each customer scrolls up or down

Animated icons can further improve engagement as an eye-catching feature–with mobile optimization as the standard–so you can invite visitors to your social media pages on any medium and through any device. 

Advantages of Adding Social Media Icons to Landing Pages

Why go to the effort of inserting social media icons on your website? The answer is about natural growth, social proof, and visitor interaction.

Social media is inevitably more relaxed than a business website. You can ask customers for feedback, preview new ideas, respond to questions, or promote your brand values.

User-Generated Content

Visitors are more likely to use social sharing when they have a one-click tool, such as retweeting a funny video, liking a Facebook promotion, or saving a post to rewatch or share later.

User-generated content is great for social proof, and the more likes, comments, interactions, or click-throughs you get, the more visible and credible your social feeds and your brand become.

Social Proof

Steering readers to your social media pages means they can follow your feeds to stay up to date, discover social proof by reading your reviews, and improve your follower numbers.

The more touch points you have, the more chances you have to interact, showcase your value proposition or connect with visitors to improve conversions. 

Improved Engagement

Younger generations are often more likely to click on a social media icon, follow a brand, and read their posts than to type an email address into a newsletter sign-up form manually.

Advertising your social media presence, and making it easy to find, is an excellent way to engage with your customers on their terms and make the most of every outlet you have.

Share this Article:

2 Comments