API を利用して作った Twitter をインラインフレームで埋め込んだよ

2020.11.30
2019.06.25

カテゴリー Web制作
タグ Mobile, WordPress

Comments
Edit

ページに埋め込める Twitter は、プラグインだとファイルが大きいし、API を利用して作った物を検索しても、気に入った物が無いし…という事で自作しました😅

趣味で作っている人間のレベルですけど、せっかくなので公開する事に💡

もくじ

ダウンロード
埋め込み Twitter

ダウンロード

twitter.php

丸々コピペして .php で保存するか、「Download ZIP」を押してダウンロードしたフォルダを解凍して、中にある twitter.php を使います

主な特徴

この様に表示された Twitter(デモページ) を、好きな場所にインラインフレームで埋め込みます😄(同じ物をトップページ開いてすぐの場所に埋め込んでいます)

サイズは、これを埋め込む ifreame タグやそれを囲むブロック要素に指定すれば OK です🤗
デモページはどこにも埋め込まれていない状態なので、画面いっぱいまで可変しています💡

ポイント

php が使えればどのサイトにも埋め込める
TwitterOAuth を除いて軽いファイルひとつで動作
インラインフレームで埋め込むと管理がしやすい
viewport に width=device-width
全てのサイズを vw で指定
Webフォントを遅延読み込み

ほぼ公式ツイッターと同じ様に

指定したユーザーのツイートを指定した件数表示
リンクをディスプレイ用 URL で表示
メンション、ハッシュタグにリンク
複数の画像を表示
動画はサムネイル付きの1つのみ表示
メディアを投稿した際に文末に入るメディアの URL を消す

ダメなところ

公式以外だと出来ない事がある(参考リンク：Twitter API 1.1 のできないこと)
個人的に埋め込みタイムラインには必要の無い物ばかりなので、問題は無いかと思います
制作者の趣味で作っている(改良点があった場合の変更は早いです)

設定

まずは Twitter API の利用を許可してもらう為の設定が必要です💡 少し面倒ですがこれさえ終われば後は楽勝です😄

それでは、セキュリティ強化で Twitter が導入した「OAuth(オーオース)認証」を通す為に Abraham さんが作ったファイルを、下記ページからダウンロードして下さい🎵(アウチ❗️認証だと思ってました)

twitteroauth

緑のボタン「Clone or download」→「Download ZIP」です😊

解凍したフォルダ名を twitteroauth に変え(任意ですがこのページの解説と同じにしました)、フォルダごと twitter.php と同じディレクトリに置きます💡

そして、twitter.php 内の以下の箇所に、twitteroauth フォルダ内にある autoload.php までの相対パスを指定します🙂(style がズラ〜っと書いてある部分を過ぎた辺り)

<?php
require 'twitteroauth/autoload.php';
use Abraham\TwitterOAuth\TwitterOAuth;

$consumerKey = 'コンシューマーAPIキー';
$consumerSecret = 'コンシューマーAPIシークレットキー';
$accessToken = 'アクセストークン';
$accessTokenSecret = 'アクセストークンシークレット';
$conn = new TwitterOAuth( $consumerKey, $consumerSecret, $accessToken, $accessTokenSecret );

次が少し面倒ですが、「コンシューマーAPIキー」以下4つのキーを、Twitter デベロッパーズで取得して入力して下さい🙂がんばろ〜❗️

取得の参考になるサイト：
【2019年1月最新版】新しくなったTwitterのAPIの登録方法と使い方。Developer登録をしてAPI keyを取得するまでの手順を公開！RailsもPythonも対応可能！｜東京で働くデータサイエンティストの転職ブログ

取得出来ましたか🙂💧❓

次にそのすぐ下の部分で設定は終わりです😄❗️

$users_params = [
  'screen_name' => 'Miisa_GOGO',
  'count' => '10',
  'tweet_mode' => 'extended',
];

上記の例だと、ユーザーネーム Miisa_GOGO のツイートを、10件表示します😊皆さんのユーザーネームに変えて下さい💡

また、最上部のメッセージや、最下部の当サイトへのリンクは削除して構いません😄

echo '<div class="twitter-header">ツイート10件、スクロールできちゃう</div>';
これと
・
・
・
この部分
echo '<div class="twitter-footer">by <a href="https://twitter.com/" target="b_lank">Twitter</a>, for <a href="https://wp.miisa.pink/" target="b_lank">MiisaGOGO!</a></div>';
?>

後はお好きな場所に twitter.php を、下記の様に埋め込むだけ😄✨

<div id="twitter">
<iframe src="https://miisa.pink/hoge/hogehoge/twitter.php" title="twitter">
></iframe>
</div>

下記は Word Press でテーマフォルダに入れている場合の独自タグを使った例💡

<div id="twitter">
<iframe src="<?php echo get_theme_file_uri(); ?>/twitter.php" title="twitter">
></iframe>
</div>

使用したフリー素材

全て .svg なのでサイズは関係ありません

Instagram も公開したい話

Instagram の埋め込みも公開したいのですけど、今の API は2020年までに廃止になるのと、新しい API を使う為の無期限トークンを苦労して取得したものの何故か API の投稿状態がカラ、正常にするにも情報が少な過ぎだわで、見送っています😥

いつか完成したらこの記事の2ページ目に書くかもです😊

MiisaGOGO!

こべつのキジ