{"action":"created","issue":{"url":"https://api.github.com/repos/ampproject/amphtml/issues/1201","labels_url":"https://api.github.com/repos/ampproject/amphtml/issues/1201/labels{/name}","comments_url":"https://api.github.com/repos/ampproject/amphtml/issues/1201/comments","events_url":"https://api.github.com/repos/ampproject/amphtml/issues/1201/events","html_url":"https://github.com/ampproject/amphtml/issues/1201","id":123039019,"number":1201,"title":"amp-social-share template components for social sharing buttons","user":{"login":"niallkennedy","id":1100,"avatar_url":"https://avatars.githubusercontent.com/u/1100?v=3","gravatar_id":"","url":"https://api.github.com/users/niallkennedy","html_url":"https://github.com/niallkennedy","followers_url":"https://api.github.com/users/niallkennedy/followers","following_url":"https://api.github.com/users/niallkennedy/following{/other_user}","gists_url":"https://api.github.com/users/niallkennedy/gists{/gist_id}","starred_url":"https://api.github.com/users/niallkennedy/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/niallkennedy/subscriptions","organizations_url":"https://api.github.com/users/niallkennedy/orgs","repos_url":"https://api.github.com/users/niallkennedy/repos","events_url":"https://api.github.com/users/niallkennedy/events{/privacy}","received_events_url":"https://api.github.com/users/niallkennedy/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/ampproject/amphtml/labels/Related%20to:%20Content","name":"Related to: Content","color":"d4c5f9"},{"url":"https://api.github.com/repos/ampproject/amphtml/labels/Request","name":"Request","color":"207de5"},{"url":"https://api.github.com/repos/ampproject/amphtml/labels/Type:%20Feature","name":"Type: Feature","color":"bfe5bf"}],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-18T22:47:33Z","updated_at":"2016-01-21T22:34:02Z","closed_at":null,"body":"Social sharing buttons commonly appear alongside article content to assist a viewer interested in sharing a page or article to a social network or messaging service. Publishers place buttons on their page to encourage sharing by reducing friction with specified precomposed share template components.\r\n\r\nShare buttons often appear in a shared content unit with multiple buttons displayed in a consistent template or official buttons from each social network. An individual share button should be easily recognizable to the audience of a social network.\r\n\r\n# Common options\r\n\r\n## Custom share button\r\n\r\n![custom-share-buttons](https://cloud.githubusercontent.com/assets/1100/11908925/d1849e34-a595-11e5-9d59-4a0e6621f551.png)\r\n\r\nA custom button places a social network logo on a background color solidifying the brand identity of the sharing site (light blue for Twitter, light red for Google+, etc.). A share verb specific to the social network might be included as visible inner text or a title attribute, localized to the language of expected viewers. A custom button creates a link to a share form on the social network site with precomposed share template components.\r\n\r\nCustom share button styling would live inside the framework with share parameters provided in the AMP HTML document.\r\n\r\n### Supported parameters\r\n\r\n|Site|text|url|image|attribution|\r\n|----|----|---|-----|-----------|\r\n|[Twitter](https://dev.twitter.com/web/tweet-button/web-intent)|`text`|`url`||`via`|\r\n|[Pinterest](https://developers.pinterest.com/docs/widgets/pin-it/)|`description`|`url`|`media`||\r\n|[Facebook](https://developers.facebook.com/docs/sharing/reference/share-dialog)||`href`||`app_id`|\r\n|[Google+](https://developers.google.com/+/web/share/#share-link)||`url`|||\r\n|[LinkedIn](https://developer.linkedin.com/docs/share-on-linkedin)|`title`|`url`||`source`|\r\n|[Weibo](http://open.weibo.com/wiki/ShareCode)|`title`|`url`|`pic`|`appkey`|\r\n\r\n## Official share button\r\n\r\n![official-share-buttons](https://cloud.githubusercontent.com/assets/1100/11908934/e501e796-a595-11e5-8e30-3acb2dd2df5d.png)\r\n\r\nAn official share button adds an externally-hosted JavaScript file or iframed button content. The button is instantly recognizable as a consistent share graphic across the Web. The button JavaScript may populate share template components based on the existing markup of the page, such as a link canonical href attribute or title element inner text. Share button JavaScript may dynamically load an always updated translated share verb to improve sharing. Share button JavaScript may manage share dialog child windows depending on the size of the display area (less common on mobile).\r\n\r\nAn official share button may include additional remote analytics requests to log use of the product, audience profiling, etc.\r\n\r\n\r\n# Proposal\r\n\r\n## Social sharing provider\r\n\r\nA social sharing provider specifies a background color and vector graphic to be used to style a social sharing button in a displayed AMP page.\r\n\r\nA share URL endpoint and expected query parameters are provided by the sharing provider to build the needed sharing URL. Required, optional, and non-supported common share object properties may be defined. Input validations may be defined similarly to an HTML <input> element (`type=text`, `maxlength=140`; `type=number`, `min=1`, `max=5`; etc.).\r\n\r\n```json\r\n{\r\n  \"text\": {\r\n    \"param\": \"text\",\r\n    \"required\": false,\r\n    \"type\": \"text\",\r\n    \"maxlength\": 140,\r\n  },\r\n  \"attribution\": {\r\n    \"param\": \"via\",\r\n    \"required\": false,\r\n    \"type\": \"text\",\r\n    \"maxlength\": 20,\r\n  }\r\n}\r\n```\r\n\r\nA provided configuration object without the required parameters will result in the omission of the social sharing button.\r\n\r\nA shared text element exceeding a maxlength will be truncated to maxlength - 1 with an inserted horizontal ellipsis (U+2026).\r\n\r\n## Publisher\r\n\r\nA publisher specifies a custom element with a social sharing provider identifier and a JSON object containing configuration parameters.\r\n\r\n```xml\r\n<amp-social-share type=\"twitter\">\r\n{\r\n  \"text\": \"Hello world\",\r\n  \"url\": \"https://example.com/\",\r\n  \"attribution\": \"AMPhtml\"\r\n}\r\n</amp-social-share>\r\n```\r\n\r\nIf omitted, the url property will be populated by the link canonical of the page."},"comment":{"url":"https://api.github.com/repos/ampproject/amphtml/issues/comments/173737068","html_url":"https://github.com/ampproject/amphtml/issues/1201#issuecomment-173737068","issue_url":"https://api.github.com/repos/ampproject/amphtml/issues/1201","id":173737068,"user":{"login":"paul-matthews","id":208304,"avatar_url":"https://avatars.githubusercontent.com/u/208304?v=3","gravatar_id":"","url":"https://api.github.com/users/paul-matthews","html_url":"https://github.com/paul-matthews","followers_url":"https://api.github.com/users/paul-matthews/followers","following_url":"https://api.github.com/users/paul-matthews/following{/other_user}","gists_url":"https://api.github.com/users/paul-matthews/gists{/gist_id}","starred_url":"https://api.github.com/users/paul-matthews/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/paul-matthews/subscriptions","organizations_url":"https://api.github.com/users/paul-matthews/orgs","repos_url":"https://api.github.com/users/paul-matthews/repos","events_url":"https://api.github.com/users/paul-matthews/events{/privacy}","received_events_url":"https://api.github.com/users/paul-matthews/received_events","type":"User","site_admin":false},"created_at":"2016-01-21T22:34:02Z","updated_at":"2016-01-21T22:34:02Z","body":"In the implementation, I use SVGs for the share icons. For consistency I plan to use the following MIT licensed implementation of the SVGs in the codebase:\r\nhttp://codepen.io/anon/pen/KVZNGp\r\n\r\nI'll be checking them into 3p, then use the generators to import them inline at build time."}}