Social Links Plugin

Developer
Joe Harry
Size
5,307 Kb
Views
22,264
  1. Social Links Plugin Previews
  2. Social Links Plugin HTML Codes
  3. Social Links Plugin CSS Codes
  4. Social Links Plugin JS Codes

How do I make an social links plugin?

A CodePen plugin for spreading the social media love.Made to link to my Twitter and CodePen accounts but it may be handy for others too.. What is a social links plugin? How do you make a social links plugin? This script and codes were developed by Joe Harry on 25 October 2022, Tuesday.

Social Links Plugin Previews
IQ Test

Social Links Plugin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Social Links Plugin</title> <link href='https://fonts.googleapis.com/css?family=Inconsolata|Raleway|Comfortaa' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='container'> <div id='center'> <h1>social links</h1> <h2>A CodePen plugin to easily display links to your social profiles within a Pen - see bottom right.</h2> <h3>Usage</h3> <ol> <li> In your JavaScript Pen settings add the external js file: <div class='code-block'>https://codepen.io/woodwork/pen/XXZaGQ.js</div> </li> <li> Call the <code>social()</code> function and pass through your social profiles in the format <code>"WebsiteIndicator/YourUsername"</code> You can pass through as few or as many as you like - but not too many, you don't want to look desperate. <p> For personal websites: drop the <code>WebsiteIndicator</code> and just pass through <code>"/anywebsite.com".</code> </p> <div class='code-block'>social("twitter/username", "codepen/username", "linkedin/personal-url", "/yourwebsite.com");</div> </li> <li> Customise: <br> <br> The default theme is dark, positioned at the bottom with no message. You can change these by passing through <code>"light", "top"</code> and <code>"Any message you like!":</code> <div class='code-block'>social("codepen/woodwork", "top", "light", "Made with &#9825; by Joe Harry");</div> <p> Oh, and if you like discos, you'll also want to pass through <code>"disco".</code> </p> </li> <li> Optionally: save your Pen as a template to easily include your social signature in future Pens. </li> </ol> </div> <div id='side'> <h3>Links</h3> <h4>Feel free to request more...</h4> <p> <code>social(...);</code> </p> <p class='icon fa fa-codepen'> <code>- "codepen/username",</code> </p> <p class='icon fa fa-twitter'> <code>- "twitter/username",</code> </p> <p class='icon fa fa-dribbble'> <code>- "dribbble/username",</code> </p> <p class='icon fa fa-github'> <code>- "github/username",</code> </p> <p class='icon fa fa-instagram'> <code>- "instagram/username"</code> </p> <p class='icon fa fa-globe'> <code>- "/yourwebsite.com"</code> </p> <p class='icon fa fa-facebook-square'> <code>- "facebook/personal-url",</code> </p> <p class='icon fa fa-linkedin-square'> <code>- "linkedin/personal-url",</code> </p> <p class='note'>note: don't include /in/</p> <div class='line'></div> <h3>Customise</h3> <h4>Optionally pass through these config settings with your links</h4> <p> <code>"light"</code> - light theme </p> <p> <code>"top"</code> - position top </p> <p> <code>"disco"</code> - disco hover mode </p> <p> <code>"Follow me!"</code> - display a message below your links </p> <p> You can override the message font by targeting <code>#social-message{}</code> in your CSS. </p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://codepen.io/woodwork/pen/XXZaGQ.js'></script> <script src="js/index.js"></script>
</body>
</html>

Social Links Plugin - Script Codes CSS Codes

html,
body { font-family: "Raleway", Verdana, Helvetica, sans-serif; font-size: 16px; background: #4CA0DD; color: rgba(255, 255, 255, 0.7);
}
h1, h2, h3, h4 { font-family: "Comfortaa", Verdana, Helvetica, sans-serif; padding: 0; margin: 10px 0 0 0; text-align: center;
}
h1 { border-top: 3px solid rgba(255, 255, 255, 0.7); font-size: 6.5rem;
}
h2 { letter-spacing: 2px; font-size: 2rem; padding: 0 0 20px 0; border-bottom: 3px solid rgba(255, 255, 255, 0.7);
}
h3 { margin-top: 20px; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.3rem;
}
h4 { letter-spacing: 1px;
}
ol { text-align: left; padding-right: 20px;
}
#container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-flow: row wrap; flex-flow: row wrap; padding: 20px;
}
#center { width: 600px; text-align: center;
}
#side { width: 300px; border: 3px solid rgba(255, 255, 255, 0.7); padding: 0 20px; margin: 10px 20px;
}
.icon:before { font-size: 2rem;
}
.icon:before { line-height: 10px;
}
.note { padding-left: 60px; margin-top: 0; padding-top: 0;
}
code { font-family: "Inconsolata"; color: white;
}
.code-block { font-family: "Inconsolata"; color: white; line-height: 1.4rem; width: 80%; padding: 10px; margin: 10px auto; border-radius: 5px; background: rgba(0, 0, 0, 0.6);
}
.line { width: 100%; height: 0; border-bottom: solid 3px rgba(255, 255, 255, 0.7);
}

Social Links Plugin - Script Codes JS Codes

social("twitter/joeharry__", "codepen/woodwork", "instagram/joeharrysm", "light", "disco", "Let's be pals");
Social Links Plugin - Script Codes
Social Links Plugin - Script Codes
Home Page Home
Developer Joe Harry
Username woodwork
Uploaded October 25, 2022
Rating 4
Size 5,307 Kb
Views 22,264
Do you need developer help for Social Links Plugin?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joe Harry (woodwork) Script Codes
Name
Stronger Together
That Morning Coffee Feeling
Fake 3D
Long Live Ziggy Stardust
TTMM Pebble Clock
Video Loading
Step
Flower Spinner
Untranslatable
Typophile
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!