https://github.com/do-know/easysocial
Making Social Sharing super-easy with one simple function call. In JavaScript.
https://github.com/do-know/easysocial
html icons javascript social social-network
Last synced: 10 months ago
JSON representation
Making Social Sharing super-easy with one simple function call. In JavaScript.
- Host: GitHub
- URL: https://github.com/do-know/easysocial
- Owner: do-know
- License: mit
- Created: 2016-05-31T14:35:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-06-01T08:52:18.000Z (over 9 years ago)
- Last Synced: 2025-02-09T14:45:04.043Z (about 1 year ago)
- Topics: html, icons, javascript, social, social-network
- Homepage:
- Size: 12.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# easySocial
Making Social Sharing super-easy with one simple function call.
### What's that?
Simple - this is a tiny JavaScript library (if we call it that), consisting of just one function - easySocial. It does not do anything fancy, it just gets you back the HTML code for the buttons with the URLs properly set. It is your choice how to style those and how to insert them into your page. There are no dependencies (jQuery or similar libraries are not used at all) and no CSS and custom styles to apply.
### Why?
I needed something very simple for my website to add social buttons, but I did not need the "extras" most libraries seemed to come with: CSS styles, images, animations, inserting buttons into page, etc. Basically I might just want a simple list of links sometimes. This is why.
### How?
The usage is pretty straigthforward.
- Add it:
``
- Call it:
```
var buttons = easySocial({
url: "http://mysite.url/",
caption: "Share this on",
title: "Check this site!",
description: "This is my site description",
buttons: [ "facebook", "twitter", "linkedin", "vk", "email", "whatsapp", "telegram" ],
});
```
- Use it:
`$('.share').html(buttons); // It doesn't have to be jQuery.`
## Supported social sites or other sharing methods
| Tag | Official resource name | Type |
| ------------- | ------------- | ------------- |
| digg | Digg | Link to website |
| email | Email | Mailto protocol link |
| facebook | Facebook | Link to website |
| googleplus | Google+ | Link to website |
| hackernews | HackerNews | Link to website |
| linkedin | LinkedIn | Link to website |
| reddit | Reddit | Link to website |
| stumbleupon | StumbleUpon | Link to website |
| telegram | Telegram | Telegram protocol link |
| twitter | Twitter | Link to website |
| vk | VK | Link to website |
| whatsapp | WhatsApp | WhatsApp protocol link |
## Parameters
| Name | Type | Meaning | Has default value |
| ------------- | ------------- | ------------- | ------------- |
| url | Str | Your site url | N |
| title | Str | Your site title | N |
| description | Str | Your site description | N |
| caption | Str | Prepended to "Official resource name" to use in template | Y |
| tpl | Str | Template for each button element | Y |
| wrap | Str | Template for all buttons or group of buttons | N |
| after | Int | How many buttons are considered a group | N |
| buttons | Array | Which social buttons to use | N |
| icons | Object | Allows overriding %icon% substitutions with custom values | N |
## Templates
### Button template
HTML for each button is produced based on a template. By default the template value is:
You can use the following substitutions in the button template:
| Code | Meaning |
| ------------- | ------------- |
| %url% | Resulting URL for sharing |
| %social% | Social tag ('facebook, 'twitter', 'linkedin', etc) |
| %social-name% | Official resource name ('Facebook', 'Twitter', 'LinkedIn', etc) |
| %icon% | Font Awesome icon name for the resource ('twitter', 'hacker-news', 'google-plus', etc) |
| %caption% | String that combines the value of a `caption` parameter and the social name |
You can provide a different template using the `tpl` parameter.
### Wrapping template
You can optionally wrap HTML code of each or all buttons (or even groups of buttons) into some other code, which you can define in `wrap` parameter. The only substitution that is accepted there is `%content%`. You choose how many elements at once should be wrapped by using the `after` parameter:
| Value for `after` parameter | Meaning |
| ------------- | ------------- |
| Not set or set to 0 | All produced buttons are wrapped as one element |
| Set to 1 | Each produced button is wrapped |
| Set to any other value | That many buttons are wrapped as one element |
This can be handy if you are setting your bittons in rows for example.
### Template usage examples
Say you want to just create sharing links as `a` elements and you want every 2 buttons to be set in a row:
```
var buttons = easySocial({
tpl: '%social-name%',
wrap: '
%content%',
after: 2,
...
buttons: [ "facebook", "twitter", "linkedin", "email" ],
});
```
This will produce a code like this (actual URLs are not given):
```
```
If you change the `after` to 1, then HTML will be:
```
```
And finally if you change `after` to 0 or remove it (while keeping the `wrap` parameter), then HTML will be:
```
```
## Icons
The `%icon%` substitution is useful if you want to add not only the name of the social sharing resource, but also an appropriate icon. By default is is set to be used with Font Awesome icons. For example, if you are normally displaying icons with a code similar to:
``
Then you could use something like below in your button template:
``
As a result, appropriate icon will be displayed. You can override the substitutions for all or some icons, by using the `icon` parameter like below:
```
var buttons = easySocial({
icons: { facebook: 'myfbicon' },
...
buttons: [ "facebook", "twitter", "linkedin", "email" ],
});
```
Then, instead of getting `` code, you will be getting ``.
## This is basically it.