TwitterDeveloper不要でTwitterのタイムラインを埋め込む

2020年11月28日
創作物
Twitter

Twitterのタイムライン埋め込みはダサい上にcssのカスタマイズが出来ないですがこのライブラリを使えば簡単に埋め込むことが出来ます

また付属しているオプションのプログラムを使えば非プログラマのデザイナーでも簡単に埋め込むことが出来ます

目次

ダウンロード

githubからダウンロードしてください

github

インポート

jquery と get_twitter_timeline をロードします

<script src="assets//jquery-3.5.1.min.js"></script>
<script src="assets/get_twitter_timeline.js"></script>

オプションを使用する場合はeasy_get_twitter_timelineもロードしてください

<script src="assets//jquery-3.5.1.min.js"></script>
<script src="assets/get_twitter_timeline.js"></script>
<script src="assets/easy_get_twitter_timeline.js"></script>

使い方

第 1 引数に取得したいユーザー id を指定してください(必須)
第 2 引数にロードが完了したあとの処理を指定してください(任意)
第 3 引数に jquery のインスタンスを指定してください(任意) この要素の最後(append)に埋め込みリンクを展開します

var twitter = new twitter_timeline_get("faa0311", function () {
  console.log(twitter.tweet);
});

ロードの時間が考慮されていないため下記の例だとエラーになる可能性があります

var twitter = new twitter_timeline_get("faa0311");
console.log(twitter.tweet);

一度に20件しか読み込まないのでそれ以上読み込む場合はloadmore関数を使ってください
第 1 引数にロードが完了したあとの処理を指定してください(任意)

var twitter = new twitter_timeline_get("faa0311", function () {
    twitter.loadmore(function () {
        console.log(twitter.tweet);
    });
});

オプションの使い方

オプションを使用する場合は下記の書き方ができます

<get-twitter-timeline user="faa0311">
  <t-article number="1">
    <p><t-div>code</t-div></p>
  </t-article>
</get-twitter-timeline>

get-twitter-timelineのuserに取得したいユーザーのTwitterIdを入力してください
t-articleのnumberに取得したいツイートの番号入力してください 新しいツイートほど番号は小さくなります
t-divの中の文字によって表示される内容が変わります 例えばcodeの場合はツイートのhtmlソースがそのまま出力されます
t-articleは必ずget-twitter-timelineの子要素に記述してください t-divはt-articleの子孫要素であればどこでも良いです

下記のように書くことでimg要素やa要素の属性に出力することも出来ます

<get-twitter-timeline user="faa0311">
  <t-article number="1">
    <p><img t-div="src" src="user_img" /><t-div>name</t-div></p>
    <p><a t-div="href" href="share_like_link">いいね</a></p>
  </t-article>
</get-twitter-timeline>

属性として出力したい要素のt-div属性に出力先の属性を指定します
上記の場合img要素の中のt-div属性にsrcと指定されているのでsrc属性に指定されているによって表示される内容が変わります user_imgが指定されているためユーザーのプロフィール画像が表示されます

下記のように書くことでエラーが発生した場合とロードするまでの間に要素を非表示にすることが出来ます

.t-error {
  display: none;
}

t-article {
  display: none;
}

t-article.t-loaded {
  display: block;
}

エラーが発生した場合や内容がなかった場合、t-div要素またはt-div属性にt-errorクラスが与えられます
また、ロードが完了したt-article要素にt-loadedクラスが与えられます

置き換えリスト

jsライブラリを使うときは左の変数にデータが代入されます
オプションを使用するときは真ん中の置き換えタグを使用します

new twitter_timeline_get(“xxx”).tweet[0]オプションの置き換えタグ解説
retweetCreditretweetCreditリツイート情報
inReplyToinReplyToリプライ情報
user.namenameツイート主の名前
user.iduser_idツイート主のid
user.imguser_imgツイート主のプロフィール画像
user.linkuser_linkツイート主のリンク
linklinkツイートのリンク
time.labeltime_labelツイートされた時間
time.datetimetime_datetimeツイートされた時間(ISO8601)
time.titletime_titleツイートされた時間(日付と時間)
labellabelラベル
tweet.texttextツイートの内容
tweet.textemojitweetツイートの内容(Emojiあり)
tweet.codecodeツイートの内容(htmlソース)
tweet.list使用不可ツイートの内容(配列/下記に詳細)
share.like.linkshare_like_linkいいねリンク
share.like.datascribeshare_like_datascribe種類
share.Twitter.linkshare_Twitter_linkリツイートリンク
share.Twitter.datascribeshare_Twitter_datascribe種類
share.Facebook.linkshare_Facebook_linkFacebook共有リンク
share.Facebook.datascribeshare_Facebook_datascribe種類
share.LinkedIn.linkshare_LinkedIn_linkLinkedIn共有リンク
share.LinkedIn.datascribeshare_LinkedIn_datascribe種類
share.Tumblr.linkshare_Tumblr_linkTumblr共有リンク
share.Tumblr.datascribeshare_Tumblr_datascribe種類
img[0].altimg_1_alt代替テキスト
img[0].srcimg_1_src画像リンク
img[0].titleimg_1_titleタイトル
img[1].altimg_2_alt代替テキスト
img[1].srcimg_2_src画像リンク
img[1].titleimg_2_titleタイトル
img[2].altimg_3_alt代替テキスト
img[2].srcimg_3_src画像リンク
img[2].titleimg_3_titleタイトル
img[3].altimg_4_alt代替テキスト
img[3].srcimg_4_src画像リンク
img[3].titleimg_4_titleタイトル

tweet.listの詳細 オプションでは取得不可

tweet.list[i].type解説tweet.list解説
text文字text通常のテキスト
img絵文字alt絵文字
img絵文字title絵文字の名前
img絵文字arialabel絵文字のラベル
img絵文字src絵文字の画像URL
br改行null改行
tagハッシュタグ/メンションdataデータのタイプ
tagハッシュタグ/メンションvalue文字
tagハッシュタグ/メンションlinkリンク
linkURLlinkURL

モバイルバージョンを終了