نمایش توییتر های اخیر

نمایش توییتر های اخیر

ما در این آموزش قصد داریم تا به شما با استفاده از جی کوئری،CSSوPHP نحوه ساخت یک پلاگین رو بدهیم که به شما توییترهای نوشته شده اخیر را به شما نمایش می دهند.ما برای انجام این کار از API مخصوص توییتر استفاده خواهیم کرد.

برای مشاهده لینک وارد شود

برای شروع کار ما ابتدا اپیلیکیشن توییتر را ایجاد می کنیم.

تمام درخواست ها از APIتوییتر توسط کلیدها تایید خواهند شد.تنها راه بدست آوردن آنها این است که اپیلیکیشن را از سایت گسترش دهنده های توییتر(Twitter’s developers’ site) ایجاد کنید.مراحل زیر را دنبال کنید:

۱-به سایت گسترش دهنده های توییتر رفته و با نام کاربری و رمز عبور خودوارد سایت بشوید.

۲-در بالا گوشه راست روی دکمه”Create new application“کلیک کنید.

۳-فیلدهای اجباری را پر کرده و روی Create کلیک کنید.اکنون اپیلیکیشن ایجاد شده است.

۴-در صفحه اپیلیکیشن روی “Create my access token” کلیک کنید.این به app شما این اجازه را می دهد تا از اکانت شما اطلاعات را خوانده و نمایش دهد.

خوب حالا به سراغ نوشتن کدهای اصلی پلاگین می رویم.

در قدم اول ما کدهای مربوط به HTML را می نویسیم.این کدها بسیار سر راست هستند.

demo.html

<div id="twitter-ticker">
<!-- Twitter container, hidden by CSS and shown if JS is present -->

	<div id="top-bar">
	<!-- This contains the title and icon -->

	<div id="twitIcon"><img src="img/twitter_64.png" width="64" height="64" alt="Twitter icon" /></div>
	<!-- The twitter icon -->

	<h2 class="tut">My tweets</h2>
	<!-- Title -->

	</div>

	<div id="tweet-container"><img id="loading" src="img/loading.gif" width="16" height="11" alt="Loading.." /></div>
	<!-- The loading gif animation - hidden once the tweets are loaded -->

	<div id="scroll"></div>
	<!-- Container for the tweets -->

</div>

توییترهای اخیر زمانی اجرا و نمایش داده خواهند شد که جاوااسکریپت موجود و فعال باشند.به همین علت ما آنها را با استفاده از CSS مخفی می کنیم و توسط Jquery نمایش می دهیم،این کار باعث میشوند تا در صورتی که آنها درست کار کنند نمایش داده بشوند.

i2

خوب در زیر به سراغ نوشتن استایل ها می رویم.

demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
    /* Resetting some of the page elements */
    margin:0px;
    padding:0px;
}

h2.tut{
    /* This is the "MY TWEETS" title */
    color:white;
    font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
    font-size:16px;
    padding:12px 0 0 58px;
    text-transform:uppercase;

    /* The CSS3 text-shadow property */
    text-shadow:2px 1px 6px #333;
}

#twitter-ticker{
    /* Styling the ticker */
    width:200px;
    height:300px;
    background:url(img/slickbg.png) no-repeat #f5f5f5;
    color:#666666;
    display:none;

    /* Rounded corners */
    -moz-border-radius:10px 10px 6px 6px;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius:6px;

    text-align:left;
}

#tweet-container{
    /* This is where the tweets are inserted */
    height:230px;
    width:auto;
    overflow:hidden;
}

#twitIcon{
    /* Positioning the icon holder absolutely and moving it to the upper-left */
    position:absolute;
    top:-25px;
    left:-10px;
    width:64px;
    height:64px;
}

#top-bar{
    height:45px;
    background:url(img/top_bar.png) repeat-x;
    border-bottom:1px solid white;
    position:relative;
    margin-bottom:8px;

    /* Rounding the top part of the ticker, works only in Firefox unfortunately */
    -moz-border-radius:6px 6px 0 0;
}

.tweet{
    /* Affects the tweets */
    padding:5px;
    margin:0 8px 8px;

    border:1px solid #F0F0F0;
    background:url(img/transparent.png);

    width:auto;
    overflow:hidden;
}

.tweet .avatar,
.tweet .user,
.tweet .time{
    float:left;
}

.tweet .time{
    text-transform:uppercase;
    font-size:10px;
    color:#AAAAAA;
    white-space:nowrap;
}

.tweet .avatar img{
    width:36px;
    height:36px;
    border:2px solid #eeeeee;
    margin:0 5px 5px 0;
}

.tweet .txt{
    /* Using the text container to clear the floats */
    clear:both;
}

.tweet .user{
    font-weight:bold;
}

a, a:visited {
    /* Styling the links */
    color:#00BBFF;
    text-decoration:none;
    outline:none;
}

a:hover{
    text-decoration:underline;
}

#loading{
    /* The loading gif animation */
    margin:100px 95px;
}

در عکس زیر ما عملکرد کدهای CSS را روی عکس یه زبان انگلیسی توضیح دادیم

i1

خوب حالا به سراغ توضیح کدهای jQuery می رویم.

بخش ابتدایی جی کوئری با اسکریپت proxy.php ارتباط برقرار خواهد کرد.زیرا PHP ارتباط با API توییتر را برعهده دارد.کدهای جی کوئری بسیار سرراست و راحت هستند.

در زیر نحوه عملکرد را توضیح داده ایم:

۱-توییت ها بارگذاری میشوند.

۲-JS درخواست را به proxy.php می فرستد و با استفاده از یک آرایه که شامل نام کاربری توییتر  است نمایش داده میشود.

۳-تابع پاسخ توییترهای اخیر را نمایش خواهد داد.(با ارسال پاسخ به  ()post.$)

برای روشن شدن بحث به کدهای زیر توجه کنید.

demo.html

<!-- In the head section: -->
<link rel="stylesheet" type="text/css" href="demo.css" />
<link rel="stylesheet" type="text/css" href="jScrollPane/jScrollPane.css" />

<!-- Before the closing body tag: -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="jScrollPane/jquery.mousewheel.js"></script>
<script type="text/javascript" src="jScrollPane/jScrollPane.min.js"></script>
<script type="text/javascript" src="script.js"></script>

ما در ابتدا demo.css و jScrollPane.css را که ساختار و شکل اسکریپت هستند را وارد کردیم.

سپس ما کتابخانه جی کوئری را از CDNگوگل وارد کردیم.(پلاگین های mousewheel و jScrollPane)

و در آخر script.js را که در زیر کدهایش را مشاهده می کنید وارد کردیم.

script.js

$(function(){

	var tweetUsers = ['tutorialzine','TechCrunch','smashingmag','mashable'],
		container = $('#tweet-container');

	$('#twitter-ticker').slideDown('slow');

	$.post('proxy.php', {handles:tweetUsers}, function(response){

		// Empty the container
		container.html('');

		$.each(response.statuses, function(){

			var str = '	<div class="tweet">\
						<div class="avatar"><a href="http://twitter.com/'+this.user.screen_name+'" target="_blank"><img src="'+this.user.profile_image_url+'" alt="'+this.from_user+'" /></a></div>\
						<div class="user"><a href="http://twitter.com/'+this.user.screen_name+'" target="_blank">'+this.user.screen_name+'</a></div>\
						<div class="time">'+relativeTime(this.created_at)+'</div>\
						<div class="txt">'+formatTwitString(this.text)+'</div>\
						</div>';

			container.append(str);

		});

		// Initialize the jScrollPane plugin
		container.jScrollPane({
			mouseWheelSpeed:25
		});

	});

	// Helper functions

	function formatTwitString(str){
		str=' '+str;
		str = str.replace(/((ftp|https?):\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?)/gm,'<a href="$1" target="_blank">$1</a>');
		str = str.replace(/([^\w])\@([\w\-]+)/gm,'$1@<a href="http://twitter.com/$2" target="_blank">$2</a>');
		str = str.replace(/([^\w])\#([\w\-]+)/gm,'$1<a href="http://twitter.com/search?q=%23$2" target="_blank">#$2</a>');
		return str;
	}

	function relativeTime(pastTime){
		var origStamp = Date.parse(pastTime);
		var curDate = new Date();
		var currentStamp = curDate.getTime();

		var difference = parseInt((currentStamp - origStamp)/1000);

		if(difference < 0) return false;

		if(difference <= 5)				return "Just now";
		if(difference <= 20)			return "Seconds ago";
		if(difference <= 60)			return "A minute ago";
		if(difference < 3600)			return parseInt(difference/60)+" minutes ago";
		if(difference <= 1.5*3600) 		return "One hour ago";
		if(difference < 23.5*3600)		return Math.round(difference/3600)+" hours ago";
		if(difference < 1.5*24*3600)	return "One day ago";

		var dateArr = pastTime.split(' ');
		return dateArr[4].replace(/\:\d+$/,'')+' '+dateArr[2]+' '+dateArr[1]+(dateArr[3]!=curDate.getFullYear()?' '+dateArr[3]:'');
	}	

});

شما برای تغییر اکانت خود در توییتر باید آرایه tweetUsers را تغییر بدهید.

اگر شما چندین نام کاربری درذ توییتر داشته باشید فقط ۵۰ توییت اخیر را که در ۷ روز گذشته  باشند، نمایش داده خواهند شد.

خوب در آخر به بررسی proxy.php می پردازیم تا با نحوه ارتباط آن با توییتر آشنا بشوییم.

proxy.php

require_once ('codebird/codebird.php');

// Set a proper JSON header
header('Content-type: application/json');

/*----------------------------
	Twitter API settings
-----------------------------*/

// Consumer key
$twitter_consumer_key = '';

// Consumer secret. Don't share it with anybody!
$twitter_consumer_secret = '';

// Access token
$twitter_access_token = '';

// Access token secrent. Also don't share it!
$twitter_token_secret = '';

/*----------------------------
	Initialize codebird
-----------------------------*/

// Application settings
\Codebird\Codebird::setConsumerKey($twitter_consumer_key, $twitter_consumer_secret);

$cb = \Codebird\Codebird::getInstance();

// Your account settings
$cb->setToken($twitter_access_token, $twitter_token_secret);

/*----------------------------
	Handle the API request
-----------------------------*/

// Is the handle array passed?
if(!isset($_POST['handles']) || !is_array($_POST['handles'])){
	exit;
}

// Does a cache exist?

$cache = md5(implode($_POST['handles'])).'.cache';

if(file_exists($cache) && time() - filemtime($cache) < 15*60){
	// There is a cache file, and it is fresher than 15 minutes. Use it!

	echo file_get_contents($cache);
	exit;
}

// There is no cache file. Build it!

$twitter_names = array();

foreach($_POST['handles'] as $handle){

	if(!preg_match('/^[a-z0-9\_]+$/i', $handle)){
		// This twitter name is not valid. Skip it.
		continue;
	}

	$twitter_names[] = 'from:'.$handle;
}

$search_string = implode(' OR ', $twitter_names);

// Issue a request for the Twitter search API using the codebird library
$reply = (array) $cb->search_tweets("q=$search_string&count=50");
$result = json_encode($reply);

// Create/update the cache file
file_put_contents($cache, $result);

// Print the result
echo $result;

اسکریپت عناصری را که برایتغییر() توییتر نیاز دارد در داخل آرایه POST_$ جست وجو می کند.این فایل ها را به مدت ۱۵ دقیقه کش می کندتا درخواستهایی که از API توییتر میشود به کمترین مقدار برسد و در آخر نیز خروجی نمایش داده میشود.

+1
-1


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۴ دیدگاه ها

  1. میتونم از مقاله هاتون با ذکر منبع توی سایتم استفاده کنم؟
    اگه شما هم دوست داشتید به سایت ما سربزنید ratin.ir

  2. در مورد ایجاد پست در تویتر هم میتونید بنویسید؟

دیدگاه خود را بنویسید

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


4 + سه =

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>