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 :

  1. konek-twitter.php
  2. index.php
  3. 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.

Nb : CURL nya harus aktif agar bisa jalan / ambil twitnya

Maaf kalau catatan ini acak-acakan dan sulit dimengerti dari penjelasannya

Ditumpuk didalam berkas : Catatan Belajar , PHP , Bootstrap , Sosial Media / Dunia Maya
Yang berkomentar (6)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Membuat Kicauan Twitter Tampil Di Website Dengan Slideshow Carousel Bootstrap Dengan Php"

Nico
12-12-2015 07:59

kayanya demonya masih ngga jalan nih.

Komentar via web

Balas
Sun
23-10-2014 09:40

waktu saya liat demonya, aplikasinya ga jalan ?
coba di cek lagi
trims

Komentar via web

Balas
Danni Moring
23-10-2014 11:00

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

Komentar via web

Balas
Nico
12-12-2015 08:05

sepertinya masih belum jalan demonya

Komentar via web

Balas
Danni Moring
12-12-2015 22:15

engga jalan karena akun twitter saya sudah non aktif, jadu twitnya otomatis ga ada...

Komentar via web

Balas
Danni Moring
19-12-2015 08:12

engga jalan, karena akun twitternya sudah non aktif

Komentar via web

Balas