{"id":20825832,"url":"https://github.com/upstatement/quickshare","last_synced_at":"2025-05-07T20:35:16.578Z","repository":{"id":16171522,"uuid":"18917792","full_name":"Upstatement/quickshare","owner":"Upstatement","description":"Simple way of implementing social media share buttons","archived":false,"fork":false,"pushed_at":"2017-06-08T20:39:34.000Z","size":331,"stargazers_count":26,"open_issues_count":8,"forks_count":2,"subscribers_count":37,"default_branch":"master","last_synced_at":"2024-11-09T23:52:50.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Upstatement.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-18T15:59:43.000Z","updated_at":"2019-09-19T20:52:41.000Z","dependencies_parsed_at":"2022-09-03T00:01:59.929Z","dependency_job_id":null,"html_url":"https://github.com/Upstatement/quickshare","commit_stats":null,"previous_names":[],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fquickshare","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fquickshare/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fquickshare/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Upstatement%2Fquickshare/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Upstatement","download_url":"https://codeload.github.com/Upstatement/quickshare/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225101897,"owners_count":17421082,"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":[],"created_at":"2024-11-17T23:06:54.346Z","updated_at":"2024-11-17T23:06:55.382Z","avatar_url":"https://github.com/Upstatement.png","language":"JavaScript","readme":"QuickShare\n==========\n\nQuickShare is a simple and quick JS library to share content through social media services with near full control on style and content **without any (real) JavaScript needing to be written**.\n\nServices Supported\n------------------\n\n* Twitter\n* Facebook (sharing)\n* Google Plus (sharing)\n* Email (through native desktop mail client)\n* Reddit\n* Hacker News\n* LinkedIn\n* Pinterest\n\nHow to Use\n----------\n\nThe goal of QuickShare is to have as much of the customisation and mark-up left in the HTML, free to manipulate without navigating JavaScript APIs. It shares content using simple `\u003ca\u003e` anchor tags, with different levels of customisation available depending on the social media plug-in.\n\n### Installation (Copy \u0026 Paste)\n\nTo install QuickShare, simply download the script `/dist/quickshare.js` (or for the minified version `/dist/quickshare.min.js`) from this repository, copy it to an appropriate directory and include it with your script tag **after** including jQuery\n\n```html\n\u003cscript src=\"path_to_directory/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path_to_directory/quickshare.js\"\u003e\u003c/script\u003e\n```\n\n### Installation (Bower)\n\nQuickShare is now registered with Bower! [Bower](http://bower.io/) is a package management tool which makes it easier to install and keep up to date your project dependencies (aka third party libraries such as QuickShare).\n\nTo install Bower, run\n\n```sh\nnpm install -g bower\n```\n\nIf you don't have a `bower.json`, which makes it really easy to manage your Bower dependencies, run\n\n```sh\nbower init\n```\n\nAnd answer the questions when prompted.\n\nTo install QuickShare with Bower, use the command\n\n```sh\nbower install --save QuickShare\n```\n\nThis should create a folder called `bower_components` (if you don't like this directory, you can use a [.bowerrc](https://github.com/bower/bower#custom-install-directory) to define your own directory to install the package in to), with the `quickshare.js` file located in the `QuickShare/dist` directory (It will also download jQuery, if you didn't have it already installed).\n\nThen, include it with your script tag **after** including jQuery\n\n```html\n\u003cscript src=\"path_to_bower_directory/bower_components/jquery/dist/jquery.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"path_to_bower_directory/bower_components/QuickShare/dist/quickshare.js\"\u003e\u003c/script\u003e\n```\n\n### Running QuickShare on your website\n\nTo actually use QuickShare, once you've included the file, in a `\u003cscript\u003e` tag or in a separate JavaScript file include the lines\n\n```javascript\nquickShare();\n```\n\nQuickShare goes through your HTML and adds or updates the `href` attribute to the correct share endpoint URL. Technically, the user does not have to write anything outside of a HTML file to use all of its features as the above snippet is the only JavaScript that is needed.\n\n\nTo define a link as a share link, add the class attribute `qs-link` to the anchor tag with the appropriate `data-qs-service` attribute (see the [reference](https://github.com/Upstatement/quickshare/wiki/Service-Attributes-Reference) for more details).\n\nHere's the simplest example\n\n```html\n\u003ca class=\"qs-link\" data-qs-service=\"twitter\"\u003eTwitter\u003c/a\u003e\n```\n\n[Boom](https://twitter.com/intent/tweet?url=https%3A//github.com/Upstatement/quickshare\u0026text=Sharing%3A%20). This will open up Twitter with a ready-to-publish tweet saying\n\n\tSharing: *current-url-of-the-page*\n\nIf you want to share a specific URL, you can define the `data-qs-url` attribute on the anchor tag\n\n```html\n\u003ca class=\"qs-link\" data-qs-service=\"twitter\" data-qs-url=\"http://specific-url.com\"\u003eTwitter\u003c/a\u003e\n```\n\nThere are more customisible data attributes listed in the [Service Attributes Reference](https://github.com/Upstatement/quickshare/wiki/Service-Attributes-Reference), including social media dependent attributes.\n\nAdvanced Usage\n--------------\n\n###Share Containers\n\nIf you want to share a specific URL with an array of different social media options, you can avoid duplicated data attribute tags by using a share container, a parent HTML element with the class attribute `qs-container`.\n\nHere's a simple example\n\n```html\n\u003cdiv class=\"qs-container\" data-qs-url=\"http://specific-url.com\"\u003e\n\t\u003ca class=\"qs-link\" data-qs-service=\"twitter\"\u003eTwitter\u003c/a\u003e\n\t\u003ca class=\"qs-link\" data-qs-service=\"facebook-share\"\u003eFacebook\u003c/a\u003e\n\u003c/div\u003e\n```\n\nBoth the Twitter and the Facebook share links will share the link `http://specific-url.com`.\n\nYou can use multiple share containers on the same page, but the chain of command is closest to the link has preference. The anchor tag has ultimate authority and can override any of its container's settings.\n\nFor example the following will share the link `http://share-url.com`\n\n```html\n\u003cdiv class=\"qs-container\" data-qs-url=\"http://container-url.com\"\u003e\n\t\u003ca class=\"qs-link\" data-qs-service=\"twitter\" data-qs-url=\"http://share-url.com\"\u003eTwitter\u003c/a\u003e\n\u003c/div\u003e\n```\n\nAnd the following will share the link `http://container-url.com`\n\n```html\n\u003cdiv class=\"qs-container\" data-qs-url=\"http://another-container-url.com\"\u003e\n\t\u003cdiv class=\"qs-container\" data-qs-url=\"http://container-url.com\"\u003e\n\t\t\u003ca class=\"qs-link\" data-qs-service=\"twitter\"\u003eTwitter\u003c/a\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nQuickShare supports nested share containers. When trying to find out the value of a customisable field, QuickShare looks for the closest parent container with that data attribute defined.\n\nIn the example below, the link will share the url `http://container-url.com` with the title `Example Title`, even though they are defined on different container elements:\n\n```html\n\u003cdiv class=\"qs-container\" data-qs-url=\"http://container-url.com\" data-qs-title=\"Unused Title\"\u003e\n\t\u003cdiv class=\"qs-container\" data-qs-title=\"Example Title\"\u003e\n\t\t\u003ca class=\"qs-link\" data-qs-service=\"twitter\"\u003eTwitter\u003c/a\u003e\n\t\u003c/div\u003e\n\u003c/div\u003e\n```\n\nShare containers currently only have three attributes: `data-qs-url`, `data-qs-suffix` and `data-qs-title`\n\n###Count\n\nQuickShare also plugs into exisiting APIs to find out how many times a URL has been shared on a certain social media service. Not all social media services are supported, currently the list is\n\n* Twitter\n* Facebook (sharing)\n* Reddit (upvotes)\n* Hacker News (points)\n\nThere is more specific details about implementation in the [Attributes Reference](https://github.com/Upstatement/quickshare/wiki/Service-Attributes-Reference) for each service, but what QuickShare will do is asynchronously fetch the count value, and put it in a HTML element of your choice.\n\nThe corresponding data attribute takes the form `data-qs-count-selector=\"selector\"`. If the attribute is specified, only then will it try and fetch the count value (meaning if you don't want it, there won't be any unnecessary data-fetching). The value passed in as `selector` is the CSS selector. This is used in the same way as it is used in jQuery, so they can take the form of\n\n* HTML elements like `\"p\"`\n* Class selectors like `\".css-class\"`\n* ID selectors like `\"#css-id\"`\n* pseudo classes etc - see the [jQuery guide](http://api.jquery.com/category/selectors/)\n\nAlways remember to be careful when specifying the selector - QuickShare could overwrite some other important value if it also has the same selector.\n\nThe count value is passed in as the text of the specified HTML element - therefore it will not work on `\u003cinput\u003e` elements.\n\n###Icons\n\n*Note: Font Awesome Icons are not supported yet for Hacker News and Reddit*\n\nAs an additional feature of QuickShare, there is direct integration with [Font Awesome's](http://fortawesome.github.io/Font-Awesome/) social media icons, so that you can easily add the icon to the anchor tag. In order to do this, you have to include Font-Awesome, which can be as simple as adding this tag to your `\u003chead\u003e` element of your HTML document.\n\n```html\n\u003clink href=\"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css\" rel=\"stylesheet\"\u003e\n```\n\nFor other or better ways to include Font-Awesome's stylesheets, check out their ['Get Started' guide](http://fortawesome.github.io/Font-Awesome/get-started/).\n\nIn terms of QuickShare, the appropriate social media icon will appear if you add a child `\u003ci\u003e` element to your anchor tag, with the class attribute `qs-icon`.\n\nHere's a simple example to get a share to Twitter anchor to include the icon\n\n```html\n\u003ca class=\"qs-link\" data-qs-service=\"twitter\"\u003e\n\t\u003ci class=\"qs-icon\"\u003e\n\t\u003c/i\u003e\n\tTwitter\n\u003c/a\u003e\n```\n\nVersion History\n--------------\n* 09/21/15 - 1.3.7 - Code cleanup\n* 09/18/15 - 1.3.6 - Test revisions\n* 09/15/15 - 1.3.5 - Encoding fixes\n* 08/03/15 - 1.3.4 - Twitter character escaping\n* 07/06/15 - 1.3.3 - Added window fix for IE9\n* 02/16/15 - 1.3.0 - Added sizes to\n* 05/06/14 - 1.2.0 - Added LinkedIn Support\n* 05/05/14 - 1.1.2 - Fixed Nested Containers\n* 05/05/14 - 1.1.1 - Remove debug statements\n* 02/05/14 - 1.1.0 - Added Support for Hacker News and Reddit\n* 01/05/14 - 1.0.1 - Bower Release\n* 30/04/14 - 0.0.1\n\nAnything else?\n--------------\n\nCheck out the [wiki](https://github.com/Upstatement/quickshare/wiki)!\n\n*Copyright of Upstatement 2014*\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fquickshare","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fupstatement%2Fquickshare","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fupstatement%2Fquickshare/lists"}