How to Add Social Media Links to Your Website

• August 22, 2018
• Aleksey Weyman

If you have a blog or website, it's imperative that you have a way for visitors to share your content on social media networks..

Social media marketing is critical for generating leads, referring traffic to your web blog through funnels, and the ever-elusive chance of going viral. Companies put big dollars behind social media marketing campaigns for these very reasons, but not everyone uses the same social media networks. As a blogger, web developer, etc, you must provide a variety of sharing options for your viewers including Twitter, Facebook, Instagram, Email and more.

Below I've compiled HTML source code for many of the top social media sharing networks. Feel free to copy, paste and distribute as much as you like. If you’re new to building websites, here's a getting started guide with Amazon S3 that might help!

Twitter Share Button

<p> <!-- Twitter --> <a href="https://twitter.com/share?text=&url=urlofyourwebsite&hashtags=hashtag1,hashtag2,hashtag3" target="_blank" class="share-btn twitter"> <i class="fa fa-twitter"></i> </a> </p>

Replace the urlofyourwebsite with the actual URL of your website/blog post. Also replace the hashtag1, hashtag2, hashtag3 with whichever hashtags you want the user to post. Include the commas for separation. You can have more, or less than three hashtags. Keep things brief on Twitter!

Facebook Share Button

<p> <!-- Facebook --> <a href="https://www.facebook.com/sharer/sharer.php?u=urlofyourwebsite" target="_blank" class="share-btn facebook"> <i class="fa fa-facebook"></i> </a> </p>

Replace the urlofyourwebsite with the actual URL of your website/blog post. Facebook is all about community, so make sure your content is share-worthy!

Reddit Share Button

<p> <!-- Reddit --> <a href="https://reddit.com/submit?url=urlofyourwebsite&title=titleofyourblogpost" target="_blank" class="share-btn reddit"> <i class="fa fa-reddit"></i> </a> </p>

Replace the urlofyourwebsite with the actual URL of your website/blog post. Also replace the titleofyourblogpost with the title of your page/article. Reddit is a great place to land your first web design client!

LinkedIn Share Button

<p> <!-- LinkedIn --> <a href="https://www.linkedin.com/shareArticle?url=urlofyourwebsite&title=5 Tips for Getting Your Band Found Online&summary=summaryofyourarticle&source=sourcehomepage" target="_blank" class="share-btn linkedin"> <i class="fa fa-linkedin"></i> </a> </p>

Replace the urlofyourwebsite with the actual URL of your website/blog post. Replace the titleofyourblogpost with the title of your page/article, then replace summaryofyourarticle with a description and replace sourcehomepage with the home URL of you website. In our case, this would be https://millennialmoderator.com.

Email Share Button

<p> <!-- Email --> <a href="mailto:?subject=titleofyourblogpost&body=urlofyourwebsite" target="_blank" class="share-btn email"> <i class="fa fa-envelope"></i> </a> </p>

Replace the urlofyourwebsite with the actual URL of your website/blog post. Also replace the titleofyourblogpost with the title of your page/article. Emails are a great way to reach your readers directly- check out our mailing list!

NOTE: I wrapped all of the social sharing buttons in a p class so as to better fit the native CSS of your page. Of course, you can modify the style however you like.

If you found this Mod useful, you might enjoy learning about these five tips for getting a remote job. Please use the below links to share this article with others, and tweet us if you have any comments or questions!

Tagged in : TechHTML