social links
A CodePen plugin to easily display links to your social profiles within a Pen - see bottom right.
Usage
-
In your JavaScript Pen settings add the external js file:
https://codepen.io/woodwork/pen/XXZaGQ.js
-
Call the
social()
function and pass through your social profiles in the format"WebsiteIndicator/YourUsername"
You can pass through as few or as many as you like - but not too many, you don't want to look desperate.For personal websites: drop the
WebsiteIndicator
and just pass through"/anywebsite.com".
social("twitter/username", "codepen/username", "linkedin/personal-url", "/yourwebsite.com"); -
Customise:
The default theme is dark, positioned at the bottom with no message. You can change these by passing through"light", "top"
and"Any message you like!":
social("codepen/woodwork", "top", "light", "Made with ♡ by Joe Harry");Oh, and if you like discos, you'll also want to pass through
"disco".
- Optionally: save your Pen as a template to easily include your social signature in future Pens.
Links
Feel free to request more...
social(...);
- "codepen/username",
- "twitter/username",
- "dribbble/username",
- "github/username",
- "instagram/username"
- "/yourwebsite.com"
- "facebook/personal-url",
- "linkedin/personal-url",
note: don't include /in/
Customise
Optionally pass through these config settings with your links
"light"
- light theme
"top"
- position top
"disco"
- disco hover mode
"Follow me!"
- display a message below your links
You can override the message font by targeting
#social-message{}
in your CSS.
Let's be pals