{"id":234,"date":"2018-09-06T23:34:41","date_gmt":"2018-09-07T04:34:41","guid":{"rendered":"http:\/\/www.offtherichterdesign.com\/Blog\/?p=234"},"modified":"2018-12-12T15:43:11","modified_gmt":"2018-12-12T21:43:11","slug":"click-to-tweet","status":"publish","type":"post","link":"https:\/\/offtherichterdesign.com\/Blog\/click-to-tweet\/","title":{"rendered":"Click-to-Tweet HTML Generator"},"content":{"rendered":"<p>While working at Office Sign Company, in Downtown Fargo North Dakota, the Marketing Department requested various clickable links to be placed on various pages of the company site (<a href=\"https:\/\/officesigncompany.com target=\">OfficeSignCompany.com<\/a>). To do this I would code up a link quick and pass it off:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n\r\n&lt;a alt=&quot;Tweet About Alzheimer's and Brain Awareness with Office Sign Company&quot; target=&quot;_blank&quot; href=&quot;https:\/\/twitter.com\/intent\/tweet?url=&amp;text=I%20%23KnowTheSigns%20of%20Alzheimer's%20thanks%20to%20%40officeSigns%2C%20Visit%20www.officesigncompany.com%2Falz%20for%20more%20information!&quot;&gt;#KnowTheSigns&lt;\/a&gt;\r\n\r\n<\/pre>\n<p>The above script when pasted into the HTML area of the website editor, displays: <a href=\"https:\/\/twitter.com\/intent\/tweet?url=&amp;text=I%20%23KnowTheSigns%20of%20Alzheimer's%20thanks%20to%20%40officeSigns%2C%20Visit%20www.officesigncompany.com%2Falz%20for%20more%20information!\" target=\"_blank\" rel=\"noopener\">#KnowTheSigns<\/a><\/p>\n<p>When clicked the user is taken to a twitter hosted page with a pre-filled tweet.<\/p>\n<p>To code these links over and over can be a tedious process and lead to mistakes. To lessen the possibility of human error and make the process more efficient, I&#8217;ve built the following tool:<\/p>\n<p><iframe style=\"width: 100%;\" title=\"Twitter HTML Generator\" src=\"\/\/codepen.io\/trichter90\/embed\/jvGXXz\/?height=265&amp;theme-id=dark&amp;default-tab=result&amp;embed-version=2\" height=\"565\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\">See the Pen <a href=\"https:\/\/codepen.io\/trichter90\/pen\/jvGXXz\/\">Social Media Sharing: HTML Links Generator<\/a> by Travis (<a href=\"https:\/\/codepen.io\/trichter90\">@trichter90<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p><!--\n\n\n<h1>Click-to-Tweet HTML Generator<\/h1>\n\n\n\n\n<table>\n\n\n<tbody>\n\n\n<tr>\n\n\n<td><label for=\"url\">URL:<\/label><\/td>\n\n\n\n\n<td><input id=\"url\" type=\"text\" placeholder=\"http:\/\/offtherichterdesign.com\/\" \/><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr>\n\n\n<td><label for=\"link\">Link Text:<\/label><\/td>\n\n\n\n\n<td><input id=\"link\" type=\"text\" placeholder=\"The Clickable Text\" \/><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr>\n\n\n<td><label for=\"alt\">Alt Text:<\/label><\/td>\n\n\n\n\n<td><input id=\"alt\" type=\"text\" placeholder=\"For Link SEO\" \/><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr>\n\n\n<td><label for=\"tweet\">Tweet:<\/label><\/td>\n\n\n\n\n<td><input id=\"tweet\" type=\"text\" placeholder=\"Tweet...Duh!\" \/><\/td>\n\n\n<\/tr>\n\n\n\n\n<tr>\n\n\n<td><label for=\"tweet\">Hashtags:<\/label><\/td>\n\n\n\n\n<td><input id=\"hashtags\" type=\"text\" placeholder=\"Enter comma-separated hashtags\" \/><\/td>\n\n\n<\/tr>\n\n\n<\/tbody>\n\n\n<\/table>\n\n\nGenerated HTML\n\n<textarea id=\"share-links\"><\/textarea>\n<button>Copy to Clipboard<\/button>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"><\/script>\n\n<script src=\"js\/clickTweet.js\"><\/script>--><\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>While working at Office Sign Company, in Downtown Fargo North Dakota, the Marketing Department requested various clickable links to be placed on various pages of the company site (OfficeSignCompany.com). To do this I would code up a link quick and pass it off: The above script when pasted into the HTML area of the website&#8230;<\/p>\n<p class=\"more-link\"><a href=\"https:\/\/offtherichterdesign.com\/Blog\/click-to-tweet\/\" class=\"themebutton3\">Read More<\/a><\/p>\n<p><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,106],"tags":[60,56,57,32,31,61,62,59,58],"class_list":["post-234","post","type-post","status-publish","format-standard","hentry","category-coding-with-coffee","category-html","tag-click-to-tweet","tag-code","tag-coffee-code","tag-css","tag-html","tag-hyperlink-with-prefilled-tweet","tag-jquery","tag-tweet","tag-twitter"],"_links":{"self":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/comments?post=234"}],"version-history":[{"count":1,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/234\/revisions"}],"predecessor-version":[{"id":567,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/posts\/234\/revisions\/567"}],"wp:attachment":[{"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/media?parent=234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/categories?post=234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/offtherichterdesign.com\/Blog\/wp-json\/wp\/v2\/tags?post=234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}