Twitterのつぶやきをカスタマイズしてブログやホームページに埋め込む方法

読了時間:約 6秒
Twitterのつぶやきをカスタマイズしてブログやホームページに埋め込む方法

Twitter APIの変更により、現在この方法では表示することができません!(>_<)

新しいTwitterウィジェットのカスタマイズ方法は、こちらが参考になります。

新しくなったTwitterウィジェットをカスタマイズしよう | kudox.jp

 

ツイッターのつぶやきを自分のブログやWEBサイトに表示するとき、公式ウィジェットではなくサイトに合ったデザインにしたい方も多いのではないでしょうか?

 

難しいJavaScriptを書かなくても、コピペで簡単に実装できちゃう方法をご紹介します!

Twitter APIの仕様変更にやられた!

先日 TwitterのAPIポリシーが変更になり、各方面にいろいろと影響が出ていますが、このブログに表示していたTwitterのつぶやきも表示されなくなってしまいました…。

 

しょんぼりしていたら、@ts_3156さんがとっても素敵なソースを公開してくださっていたので、感謝を込めて紹介させていただきます!

(参照サイト:HTMLだけでツイッターを埋め込む方法 – Hive Color

 

手順1.JavaScriptファイルをアップする

手順はものすごく簡単です。

JavaScriptファイルをアップしたら、ツイートを表示したいところに2行のHTMLタグを書くだけです!

 

下記サイトのソースを参考にさせていただき、ちょっとだけ表示方法を変えたかったので、アレンジしています。

(参照サイト:HTMLだけでツイッターを埋め込む方法 – Hive Color

 

下記のJavaScriptを「twitter.js」というファイル名でサーバにアップします。

(7行目はご自分のユーザ名に置き換えてください。)

twdata =new Array();
var page = 0;
var fin = 0;
var end = 0;
var kazu = 5; // あらかじめ先読みしておくつぶやきの数
var dsp = 3; //1ページに表示する数
var user = "tsubasak"; // 自分のユーザ名

// 日付の書式を整える
function relative_time(time_value) {
	time_values = time_value.split(" ");
	time_value = time_values[1]+" "+time_values[2]+", "+time_values[5]+" "+time_values[3];
	var parsed_date = Date.parse(time_value);
	var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
	var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
	delta = delta + (relative_to.getTimezoneOffset()*60);
	var dt = new Date();
	dt.setTime(dt.getTime() - (delta*1000));
	yy = dt.getYear();
	mm = dt.getMonth() + 1;
	dd = dt.getDate();
	dy = dt.getDay();
	hh = dt.getHours();
	mi = dt.getMinutes();
	ss = dt.getSeconds();

	if (yy < 2000) yy += 1900;
	if (mm < 10) mm = "0" + mm;
	if (dd < 10) dd = "0" + dd;
	dy = new Array("Sun","Mon","Tue","Wed","Thu","Fri","Sat")[dy];
	if (hh < 10) hh = "0" + hh;
	if (mi < 10) mi = "0" + mi;
	if (ss < 10) ss = "0" + ss;
	return yy + "/" + mm + "/" + dd + "&nbsp;" + hh + ":" + mi ;
}

// ツイートの中にURLがあったら、自動でリンクにする
function create_link(tw_text) {
	return tw_text.replace(/((http|https):\/\/[\x21-\x7e]+)/gi, "<a href='$1' target='_blank'>$1</a>");
}

// ツイッターからデータを取得すると自動的に呼ばれる。「@」で始まるツイートは省く
function twitterCallback(obj) {
	var i = 0;
	var j = 0;
	while (i < obj.length && j < kazu ){
		if(obj[i].text.substr(0, 1) != '@'){
			twdata[j] = obj[i];
			j++;
		}
		i++;
	}
	fin = j;
	hyouji();
}

// idがtwitterのタグの中に、ツイートを挿入する
function hyouji(){
	var tw = document.getElementById('twitter');
	var cnt = 0;
	end = 0;

	for ( i= page * dsp ; cnt<dsp ; i++) {
		tw.innerHTML += '<li>'+create_link(twdata[i].text)+'<span>' + relative_time(twdata[i].created_at)+'</span></li>';
		cnt++;
		if(fin-1 == i)
			end = 1;
	}
}

document.write(
'<script type="text/javascript" ' +
'src="https://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + user + '&count=' + kazu + '&callback=twitterCallback"></script>'
);

 

手順2.HTMLタグを追加する

ツイートを表示したい部分に、下記のタグを書き込みます。

<ul id="twitter"></ul>
<script type="text/javascript" src="js/twitter.js"></script>

 

たったこれだけです!すばらしいですねー!

 

手順3.CSSで表示を整える

これだけでももう十分なのですが、CSSでちょっと表示を整えてあげると、見やすくきれいになります。

 

このブログの右側に表示しているツイートは、下記のCSSで表示を整えています。

#twitter li			{margin-bottom:10px; padding-bottom:10px; border-bottom:1px dashed #CCC;}
#twitter li span	{margin-left:15px; color:#999;}

 

これで、思い通りの表示ができるようになりました!

@ts_3156さん、ありがとうございます! m(_ _)m ペコリ

(参照サイト:HTMLだけでツイッターを埋め込む方法 – Hive Color

RSSフィードを購読する

ITポケットでは、ビジネスや生活が向上するTipsを発信しています。
よろしければRSSフィードをご購読ください。

シェアする

このエントリーをはてなブックマークに追加
Clip to Evernote

コメント

お仕事のご依頼について

コーポレートサイト、ECサイト、CMS、ブログなど、あらゆるWebサイトの制作をお手伝いいたします。

企画からデザイン、その後の運営や保守まで対応することが可能です。

自らECサイト運営を行っていることもあり、顧客目線でのサイトづくりが得意です。

得意なこと

HTML5 / CSS3 / JavaScript

WordPress

ECサイト(EC-CUBE / Zen Cart / カラーミーショップ)

各ブログのカスタマイズ

 

クライアントのご要望にお答えし、予算やケースにあった選択で、臨機応変に対応いたします。

ご相談・ご質問や、お見積もりのご依頼など、お気軽にお問い合わせください。

プロフィール

菊地翼

菊地翼(きくちつばさ)
WEBクリエイター。株式会社ウイングフォレスト代表取締役。マカー歴16年。IT・ガジェット・ライフハックと甘いものが大好き!

詳しくはこちら 

サイト内検索

Facebookページ

Twitter