Memasang Tweet Box Di Postingan Blog Dengan Javascript

Twitter seperti yang kita ketahui bersama adalah salah satu Platform Media Sosial share yang sering juga dipakai untuk mendatangkan trafik bagi Blog, peran serta Media Sosial sekarang ini luar biasa cepatnya dari Informasi yang dibagikan dengan cepat mudah di akses dan dibaca oleh penggunan Media Sosial. 

Nah di postingan kali ini akan dibahas Cara Memasang Tweet Box Di Postingan Blog Dengan Javascript sebagai alat tambahan untuk mendatangkan trafik bagi Blog yang sedang kita kelola. Pemasangan Tweet Box ini pada dasarnya sangat mudah di Platform tersebut pun sudah disediakan dan bahkan bagi sobat yang Ngeblog menggunakan Wordpress cara ini tentu bukan hal yang sulit karena sobat cukup tinggal Instal saja plugin Tweet Box di Wordpress dan selesai. 

Namun bagaimana jika sobat yang menggunakan Platform Blogger sebagai media Ngeblog, tentu hal ini sedikit menambahkan kode untuk memasang Tweet Box ini Di Postingan. Apalagi sangat disayangkan dari Twitter sudah menghilangkan alat Tweet Anywhere mungkin berbagai pertimbangan keamanan akhirnya Twitter sudah tidak menampilkannya.

Bagi sobat yang mau mencoba memasang Tweet Box ini di postingan Blogger nya silahkan di simak cara berikut ini.

Langkah Awal

Silahkan sobat salin kode CSS dibawah ini lalu letakkan di atas kode ]]></b:skin> atau di </style>

.tweet-box{
    background:#55acee;
    padding:20px;
    margin:20px auto;
    color:#fff;
    font-family:Georgia;
    border-radius:5px;
    border:1px solid transparent;
}
.tweet-box p{
    font-size:130%;
    font-style:italic;
    margin:0!important;
    line-height:1.3em;
}
a.tweet-this{
    display:block;
    float:right;
    margin-top:10px;
    color:#fff;
    text-decoration:none;
    transition:all .4s ease-in-out;
}
a.tweet-this:hover{
    color:#002039
}

Langkah Ke Dua
Silahkan sobat salin kode dibawah ini dan letakkan dalam Postingan di Mode HTML

<div class="tweet-box">
<p id="p1">Memasang tweet box di dalam postingan</p> 
<script>
var twurl = window.location.href;
var twcontent= document.getElementById("p1").textContent;
var twesc=escape(twcontent);
document.write('<a class="tweet-this" href="https://twitter.com/intent/tweet?text='+twesc+'&url='+twurl+'&via=dibalikseo&related=dibalikseo" target="_blank" title="Tweet This">\
<i class="fa fa-twitter"></i> Tweet This</a> \
<div style="clear:both"></div> \
');
</script>
</div>

Perhatikan kode yang ditandai Silahkan rubah dengan Konten Tweet lalu untuk kode dibalikseo silahkan sobat ganti dengan user name twitter sobat. Nah ada pertanyaan bagaimana kalau tidak ingin menampilkan URL postingan, caranya silahkan sobat hapus saja kode var twurl=window.location.href; setelah itu hapus juga kode &url='+twurl+'.

Lalu perhatikan juga kode p1 yang ditandai silahkan sobat ganti jika ingin menampilkan lebih dari satu tweet box di postingan menjadai p2, p3 dan seterusnya. Cara diatas menggunakan FontAwesome jadi sebelumnya pastikan sobat sudah memasangnya. Dan Selesai selamat mencoba