Membuat Kicauan Twitter Tampil Di Website Dengan Slideshow Carousel Bootstrap Dengan Php

Ditulis oleh Danni Moring 07 Juni 2014

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 :

konek-twitter.php
index.php
kicauanku.css

#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.