Tunggu Sebentar ...
Ini catatan iseng tentang membuat kicauan twitter tampil di website kita dengan slideshow carousel bootstrap. Tentu dengan bahasa pemrograman PHP. Kemarin saya sempat catatkan tentang membuat Apps Twitter, Slideshow dengan bootstrap php. Catatan - catatan itu dibutuhkan untuk catatan ini.
Mungkin ada yang bilang "kenapa ga pake widget bawaan twitter aja kalau hanya untuk menampilkan kicauan twitter kita di website kita?". Ya betul, di twitter sudah menyediakan widget untuk menampilkan kicauan twitter di website kita. Seperti gambar dibawah ini kan ?
Nah memang iya sih bisa, tapi jujur saya ga ngerti gimana cara ganti-ganti desainnya. Jadi, mau ga mau saya diharuskan pake desain bawaan si twitter. Bagaimana kalau mau jadi slideshow-kan ?. Bukannya banyak ya bertebaran di google plugin yang berhubungan twitter buat aksesoris di website ? iya memang banyak sih, tapi ini cuma iseng, sekalian otak-atik. Jadi ga pake plugin-plugin yang tinggal konek-konek langsung pasang di website — intinya saya kurang kerjaan.
Untuk membuat kicauan twitter tampil di website kita dengan slideshow carousel bootstrap, maka dibutuhkan adalah bootstrap itu sendiri. Gimana cara dapatinnya? download di bootstrapnya. Nah setelah itu kita butuh PHP Library nya, saya menggunakan PHP Library twitterouath si abraham. Bisa didapat disini.
Untuk catatan ini, saya buat 3 file — selain file-file bootstrap dan PHP Library twitterouath— yaitu :
#file konek-twitter.php
<?php /* twitter */ require_once("twitteroauth/twitteroauth/twitteroauth.php"); $dmtwitter = "dmnets"; //akun di twitternya $jmltweet = 10; // Jumlah kicauan ditwitter yg pengen di tampilkan /* lihat dicatatan cara buat apps twitter, disana bisa dapatkan APIKey, API Secret, Access Token, Access Token Secret */ $APIkey = "zzzxxxxxxxxxxxxxxx"; $APIsecret = "xxxxxxxxxxxxxxxxxxxxxxxxx"; $accesstoken = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; $accesstokensecret = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; $connection = new TwitterOAuth($APIkey, $APIsecret, $accesstoken, $accesstokensecret); $kicauanku = $connection->get("https://api.twitter.com/1.1/statuses/user_timeline.json?screen_name=".$dmtwitter."&count=".$jmltweet); $kicauanku = json_decode(json_encode($kicauanku), true); /* /end twitter */ function dmlink($data) { /* UNTUK LINK URL */ $polaurl = "/(?i)\b((?:https?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,4}\/)(?:[^\s()<>]+|\(([^\s()<>]+|(\([^\s()<>]+\)))*\))+(?:\(([^\s()<>]+|(\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'\".,<>?«»“”‘’]))/"; $data = preg_replace($polaurl, "<a href='$1' target='_blank'>$1</a>", $data); /* UNTU HASHTAG # */ $polahashtag = '/#([\w-]+)/i'; $data = preg_replace($polahashtag,"<a href='https://twitter.com/search?q=$1' style='font-weight:lighter' target='_blank'>#$1</a>",$data); return $data; } ?>
Dalam catatan ini, membuat kicauan twitter di website itu menggunakan API Twitter 1.1. Atau bisa dilihat disini https://dev.twitter.com/docs/api/1.1. Untuk menampilkan kicauan kita, sila dibaca-baca juga disini https://dev.twitter.com/docs/api/1.1/get/statuses/user_timeline.
#File index.php
<?php // menyisipkan file konek-twitter include "konek-twitter.php" ?> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../bootstrap-3.0.2/css/bootstrap.min.css"> <link rel="stylesheet" href="kicauanku.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="../bootstrap-3.0.2/js/bootstrap.min.js"></script> </head> <body> <!— kicauan di twitter gue —> <div class="container"> <div class="col-md-12 twitter-area"> <div id="dmtwithead" class="carousel slide" data-ride="carousel"> <div class="carousel-inner"> <?php $x = 0; foreach($kicauanku as $twitterku){ if($x==0) $kelas = "item active"; else $kelas = 'item'; ?> <div class="<?php echo $kelas ?>"> <p><?php echo dmlink($twitterku['text']) ?></p><!— keterangan slide —> </div> <?php $x++; } // kurung kurawa untuk tutup foreach ?> </div> </div> </div> </div> <!— /kicauan di twitter gue —> </body> </html>
#File kicauanku.css
.twitter-area{ background-color:transparent; min-height:50px; padding:15px 10px 5px 10px; font-size:15px; color: #405269 !important; font-family: 'Bitter'; border-left:6px solid #19a2de; border-right:4px solid #19a2de; margin: 0px auto 20px; position:relative; } .twitter-area a { color: #405269 !important; } .twitter-area p { margin:0 50px; } .twitter-area:before { color: #807f7f; content: "\201C"; display: block; font-size: 53px; font-size: 5.8rem; font-style: normal; font-family: Georgia, serif; font-weight: bold; line-height: 1; position: absolute; top: 0; left: 20px; }
Demonya bisa dilihat disini.
Nb : CURL nya harus aktif agar bisa jalan / ambil twitnya
Maaf kalau catatan ini acak-acakan dan sulit dimengerti dari penjelasannya
waktu saya liat demonya, aplikasinya ga jalan ?
coba di cek lagi
trims
terimakasih udah dikasih tahu,,
iya waktu itu sempat ganti APIKey dan secret tokennya,tapi di demo belum disesuaikan APIKey nya jadinya engga muncul..tp sekarang sudah saya ganti dengan APIKey yang sesuai..
terimakasih..
engga jalan karena akun twitter saya sudah non aktif, jadu twitnya otomatis ga ada...
engga jalan, karena akun twitternya sudah non aktif