Click to Tweet Box

Fungsi : Memudahkan pengunjung untuk men-tweet kalimat-kalimat tertentu di halaman artikel.

Tingkat kesulitan : Mudah

Penggunaan : Semi-Manual

Bahasa Pemrograman : HTML, CSS, dan jQuery.

File External : Font Awesome dan jQuery Library.

Source code : Marie Mosley

HTML

<a class='timestamp-link' href='https://moccatory.blogspot.com/'></a>
<p class='tweetable'>Create a Click to Tweet box with jQuery and CSS. Using Material Scheme and its very easy to use! - @Afaea</p>

CSS

a.tweet-link{text-decoration:none}
.tweetable{background:#ddd;margin:2em auto;font-family:Google Sans,sans-serif;font-size:1em;padding:20px 20px 20px 65px;font-style:normal;border-radius:5px;color:#333;overflow:hidden;text-decoration:none;box-shadow:0 3px 10px rgba(0,0,0,.05);line-height:1.5}
.tweetable:before{margin:-25px -50px;content:'\201c';font-family:Georgia,serif;font-size:500%;position:absolute;color:#aaa;z-index:2}
.tweetable:after{text-decoration:none;content:'\f099';margin:25px 0 0 25px;font-size:85%;font-family:FontAwesome,sans-serif;background:#09c;padding:3px 13px;border-radius:3px;width:max-content;color:#fff;overflow:hidden;display:inline-block;float:right;box-shadow:0 3px 10px rgba(0,0,0,.05)}

jQuery

$(document).ready(function() {
  $('.tweetable').each(function() {
     var sentence = $(this);
     var permalink = sentence.parents('.post-outer').find('.timestamp-link').attr('href') || $(location).attr('href');
     var tweetable = sentence.text();
     var result = encodeURIComponent(tweetable);
     var link = encodeURIComponent(permalink);
     
sentence.wrap('<a class="tweet-link" href="https://twitter.com/intent/tweet?text=' + result + " " + link +'"></a>');
    });
});

Font Awesome

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
//]]>
</script>

jQuery Library

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Live Preview