xkcd+

Add buttons on xkcd.com to share on Twitter, Tumblr, Pinterest, etc. as well as add button for explainxkcd.com.

  1. /* This program is free software. It comes without any warranty, to
  2. * the extent permitted by applicable law. You can redistribute it
  3. * and/or modify it under the terms of the Do What The Fuck You Want
  4. * To Public License, Version 2, as published by Sam Hocevar. See
  5. * http://www.wtfpl.net/ for more details. */
  6.  
  7. // ==UserScript==
  8. // @id xkcd-plus@loucypher
  9. // @name xkcd+
  10. // @namespace http://userscripts.org/users/12
  11. // @description Add buttons on xkcd.com to share on Twitter, Tumblr, Pinterest, etc. as well as add button for explainxkcd.com.
  12. // @version 3.0.1
  13. // @author LouCypher
  14. // @license WTFPL http://www.wtfpl.net/
  15. // @homepageURL https://greasyfork.org/scripts/17
  16. // @supportURL https://greasyfork.org/scripts/17
  17. // @resource license https://raw.github.com/LouCypher/userscripts/master/licenses/WTFPL/LICENSE.txt
  18. // @include /^https?://(www\.)?xkcd\.com/.*/
  19. // @grant none
  20. // ==/UserScript==
  21.  
  22. function $(aSelector, aNode) {
  23. return (aNode || document).querySelector(aSelector);
  24. }
  25.  
  26. function $$(aSelector, aNode) {
  27. return (aNode || document).querySelectorAll(aSelector);
  28. }
  29.  
  30. function $esc(aString) {
  31. return encodeURIComponent(aString);
  32. }
  33.  
  34. function $create(aNodeName) {
  35. return document.createElement(aNodeName);
  36. }
  37.  
  38.  
  39. function $link(aURL, aText) {
  40. var link = $create("a");
  41. link.href = aURL;
  42. link.textContent = aText;
  43. return link;
  44. }
  45.  
  46. function addShareButton(aText, aURL, aClass, aBgColor, aColor) {
  47. var list = $create("li");
  48. var link = list.appendChild($link(aURL, aText));
  49. link.title = "Share on " + aText;
  50. //link.target = "_blank";
  51. aClass && link.classList.add(aClass);
  52. link.style.backgroundColor = aBgColor;
  53. link.style.color = aColor;
  54. link.style.fontVariant = "normal";
  55. return list;
  56. }
  57.  
  58. function $p(aString) {
  59. return $esc("<p>" + aString + "</p>");
  60. }
  61.  
  62. // FriendFeed, inject script.
  63. function shareOnFriendFeed(aEvent) {
  64. aEvent.preventDefault();
  65. var script = $create("script");
  66. script.setAttribute("type", "text/javascript");
  67. script.setAttribute("src", "//friendfeed.com/share/bookmarklet/javascript");
  68. document.body.appendChild(script)
  69. }
  70.  
  71. var title = $("#ctitle");
  72. var image = $("#comic img");
  73.  
  74. if ((title && image) && $(".comicNav a[rel='prev']")) {
  75. var isFrontPage = location.pathname == "/";
  76. var id;
  77. if (isFrontPage)
  78. id = parseInt($(".comicNav a[rel='prev']").href.match(/\d+/)) + 1;
  79. else
  80. id = location.href.match(/\d+/);
  81.  
  82. var transcription = $("#transcript").textContent;
  83. var noTranscript = transcription === "";
  84.  
  85. var infoButton = $("#middleContainer").insertBefore($create("ul"), title);
  86. infoButton.outerHTML = '<ul class="comicNav" style="position:absolute;'
  87. + 'right:1em;"><li><a href="#" class="transcribe"'
  88. + ' title="' + (noTranscript ? "Transcript not found!"
  89. : "Show transcript")
  90. + '" style="font-variant:normal">i</a></li>'
  91. + '<li><a href="http://www.explainxkcd.com/wiki/'
  92. + 'index.php/' + id + '" title="Explanation for'
  93. + ' this comic (via explainxkcd.com)">?</a></li></ul>';
  94.  
  95. $("a.transcribe").addEventListener("click", function(aEvent) {
  96. aEvent.preventDefault();
  97. if (!noTranscript)
  98. alert(transcription);
  99. });
  100.  
  101. var txt = $esc(document.title);
  102. var img = $esc(image.src);
  103. var alt = $esc(image.title);
  104. var url = $esc(location.href + (isFrontPage ? (id + "/") : ""));
  105.  
  106. var web = [
  107. { name: "Google+",
  108. url : "https://plus.google.com/share?url=" + url,
  109. bgcolor: "#dc4a36", color: "#fff" },
  110.  
  111. { name: "Facebook",
  112. url : "https://www.facebook.com/share.php?src=bm&v=4&u=" + url,
  113. bgcolor: "#3b5998", color: "#fff" },
  114.  
  115. { name: "LinkedIn",
  116. url : "http://www.linkedin.com/shareArticle?url=" + url +
  117. "&title=" + txt + "&summary=" + alt,
  118. bgcolor: "#52a9d4", color: "#fff" },
  119.  
  120. { name: "Twitter",
  121. url : "https://twitter.com/share?text=" + txt + "&url=" + url +
  122. "&related=irandallmunroe:Randall+Munroe&hashtags=xkcd,comic",
  123. bgcolor: "#019ad2", color: "#fff" },
  124.  
  125. { name: "Tumblr",
  126. url : "http://www.tumblr.com/share/photo?source=" + img +
  127. "&caption=" + $p("<strong>" + document.title +
  128. "</strong>") + $p(image.title) +
  129. "&click_thru=" + url + "&tags=xkcd,comic",
  130. bgcolor: "#2c4965", color: "#fff" },
  131.  
  132. { name: "Pinterest",
  133. url : "http://pinterest.com/pin/create/button/?url=" + url +
  134. "&media=" + img + "&description=" + txt,
  135. bgcolor: "#fff", color: "#e0242a" },
  136.  
  137. { name: "RebelMouse",
  138. url : "https://www.rebelmouse.com/core/stick/?image=" + img +
  139. "&image_size=" + image.width + "x" + image.height +
  140. "&headline=" + txt + "&original_url=" + url + "&type=image",
  141. bgcolor: "#145a7c", color: "#fff" },
  142.  
  143. { name: "StumbleUpon",
  144. url : "http://www.stumbleupon.com/submit?url=" + url,
  145. bgcolor: "#fc3d2f", color: "#fff" },
  146.  
  147. { name: "FriendFeed",
  148. url : "http://friendfeed.com/?url=" + url + "&title=" + txt,
  149. bgcolor: "#437ec7", color: "#c1d7f4" },
  150.  
  151. { name: "reddit",
  152. url : "http://www.reddit.com/submit?url=" + url + "&title=" + txt,
  153. bgcolor: "#cee3f8", color: "#000" }
  154. ]
  155.  
  156. var buttonContainer = $("#middleContainer").
  157. insertBefore($create("ul"), $("#middleContainer > br"));
  158. buttonContainer.className = "comicNav";
  159.  
  160. var list;
  161. for (var i in web) {
  162. list = addShareButton(web[i].name, web[i].url, web[i].name,
  163. web[i].bgcolor, web[i].color);
  164. buttonContainer.appendChild(list);
  165. if (i == parseInt((web.length / 2) - 1)) {
  166. var br = list.appendChild($create("br"));
  167. br.style.lineHeight = "3em";
  168. }
  169. }
  170.  
  171. $(".comicNav .FriendFeed").addEventListener("click", shareOnFriendFeed, false);
  172. }