{"id":17987360,"url":"https://github.com/do-know/easysocial","last_synced_at":"2025-04-04T03:13:44.377Z","repository":{"id":133358160,"uuid":"60097190","full_name":"do-know/easySocial","owner":"do-know","description":"Making Social Sharing super-easy with one simple function call. In JavaScript.","archived":false,"fork":false,"pushed_at":"2016-06-01T08:52:18.000Z","size":13,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-09T14:45:04.043Z","etag":null,"topics":["html","icons","javascript","social","social-network"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/do-know.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-31T14:35:47.000Z","updated_at":"2022-05-19T11:03:04.000Z","dependencies_parsed_at":null,"dependency_job_id":"564fa6bd-8e42-4a7b-b25b-16a9707f8513","html_url":"https://github.com/do-know/easySocial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-know%2FeasySocial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-know%2FeasySocial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-know%2FeasySocial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-know%2FeasySocial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/do-know","download_url":"https://codeload.github.com/do-know/easySocial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247112771,"owners_count":20885606,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","icons","javascript","social","social-network"],"created_at":"2024-10-29T19:08:36.448Z","updated_at":"2025-04-04T03:13:44.356Z","avatar_url":"https://github.com/do-know.png","language":null,"readme":"# easySocial\nMaking Social Sharing super-easy with one simple function call.\n\n### What's that?\nSimple - 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.\n\n### Why?\nI 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.\n\n### How?\nThe usage is pretty straigthforward. \n\n- Add it: \n\n  `\u003cscript src=\"/easySocial.min.js\"\u003e\u003c/script\u003e`\n\n- Call it:\n  ```\n  var buttons = easySocial({\n    url:          \"http://mysite.url/\",\n    caption:      \"Share this on\",\n    title:        \"Check this site!\",\n    description:  \"This is my site description\",\n    buttons:      [ \"facebook\", \"twitter\", \"linkedin\", \"vk\", \"email\", \"whatsapp\", \"telegram\" ],\n  });\n  ```\n- Use it: \n\n  `$('.share').html(buttons); // It doesn't have to be jQuery.`\n\n## Supported social sites or other sharing methods\n\n| Tag  | Official resource name | Type |\n| ------------- | ------------- | ------------- |\n| digg  | Digg  | Link to website |\n| email  | Email  | Mailto protocol link |\n| facebook  | Facebook  | Link to website |\n| googleplus  | Google+  | Link to website |\n| hackernews  | HackerNews  | Link to website |\n| linkedin  | LinkedIn  | Link to website |\n| reddit  | Reddit  | Link to website |\n| stumbleupon  | StumbleUpon  | Link to website |\n| telegram  | Telegram  | Telegram protocol link |\n| twitter  | Twitter  | Link to website |\n| vk  | VK  | Link to website |\n| whatsapp  | WhatsApp  | WhatsApp protocol link |\n\n## Parameters\n\n| Name  | Type | Meaning | Has default value |\n| ------------- | ------------- | ------------- | ------------- |\n| url  |  Str | Your site url | N |\n| title  |  Str | Your site title | N |\n| description  |  Str | Your site description | N |\n| caption  | Str | Prepended to \"Official resource name\" to use in template | Y |\n| tpl  | Str | Template for each button element | Y |\n| wrap  | Str | Template for all buttons or group of buttons | N |\n| after  | Int | How many buttons are considered a group | N |\n| buttons  | Array | Which social buttons to use | N |\n| icons  | Object | Allows overriding %icon% substitutions with custom values | N |\n\n## Templates\n\n### Button template\n\nHTML for each button is produced based on a template. By default the template value is:\n\n  `\u003ca href=\"%url%\" title=\"%caption%\" target=\"_blank\"\u003e%social-name%\u003c/a\u003e`\n\nYou can use the following substitutions in the button template:\n\n| Code  |  Meaning |\n| ------------- | ------------- |\n| %url% | Resulting URL for sharing |\n| %social% | Social tag ('facebook, 'twitter', 'linkedin', etc) |\n| %social-name% | Official resource name ('Facebook', 'Twitter', 'LinkedIn', etc) |\n| %icon% | Font Awesome icon name for the resource ('twitter', 'hacker-news', 'google-plus', etc)  |\n| %caption% | String that combines the value of a `caption` parameter and the social name |\n\nYou can provide a different template using the `tpl` parameter.\n\n### Wrapping template\n\nYou 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:\n\n| Value for `after` parameter  |  Meaning |\n| ------------- | ------------- |\n| Not set or set to 0 | All produced buttons are wrapped as one element |\n| Set to 1 | Each produced button is wrapped |\n| Set to any other value | That many buttons are wrapped as one element |\n\nThis can be handy if you are setting your bittons in rows for example. \n\n### Template usage examples\n\nSay you want to just create sharing links as `a` elements and you want every 2 buttons to be set in a row:\n\n  ```\n  var buttons = easySocial({\n    tpl:          '\u003ca href=\"%url%\"\u003e%social-name%\u003c/a\u003e',\n    wrap:         '\u003cdiv class=\"row\"\u003e%content%\u003c/div\u003e',\n    after:        2,\n    ...\n    buttons:      [ \"facebook\", \"twitter\", \"linkedin\", \"email\" ],\n  });\n  ```\nThis will produce a code like this (actual URLs are not given):\n  ```\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eFacebook\u003c/a\u003e\u003ca href=\"...\"\u003eTwitter\u003c/a\u003e\u003c/div\u003e\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eLinkedIn\u003c/a\u003e\u003ca href=\"...\"\u003eEmail\u003c/a\u003e\u003c/div\u003e\n  ```\n\nIf you change the `after` to 1, then HTML will be:\n  ```\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eFacebook\u003c/a\u003e\u003c/div\u003e\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eTwitter\u003c/a\u003e\u003c/div\u003e\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eLinkedIn\u003c/a\u003e\u003c/div\u003e\n  \u003cdiv class=\"row\"\u003e\u003ca href=\"...\"\u003eEmail\u003c/a\u003e\u003c/div\u003e\n  ```\n\nAnd finally if you change `after` to 0 or remove it (while keeping the `wrap` parameter), then HTML will be:\n  ```\n  \u003cdiv class=\"row\"\u003e\n  \u003ca href=\"...\"\u003eFacebook\u003c/a\u003e\n  \u003ca href=\"...\"\u003eTwitter\u003c/a\u003e\n  \u003ca href=\"...\"\u003eLinkedIn\u003c/a\u003e\n  \u003ca href=\"...\"\u003eEmail\u003c/a\u003e\n  \u003c/div\u003e\n  ```\n\n## Icons\n\nThe `%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:\n\n  `\u003ci class=\"icon fa-twitter\"\u003e\u003c/i\u003e`\n\nThen you could use something like below in your button template:\n\n  `\u003ci class=\"icon fa-%icon%\"\u003e\u003c/i\u003e`\n\nAs a result, appropriate icon will be displayed. You can override the substitutions for all or some icons, by using the `icon` parameter like below:\n  ```\n  var buttons = easySocial({\n    icons:        { facebook: 'myfbicon' },\n    ...\n    buttons:      [ \"facebook\", \"twitter\", \"linkedin\", \"email\" ],\n  });\n  ```\n\nThen, instead of getting `\u003ci class=\"icon fa-facebook\"\u003e\u003c/i\u003e` code, you will be getting `\u003ci class=\"icon fa-myfbicon\"\u003e\u003c/i\u003e`.\n\n## This is basically it.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-know%2Feasysocial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdo-know%2Feasysocial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-know%2Feasysocial/lists"}