コンテンツにスキップ

ntorelabo

Front End Developer

  • pickup
  • WordPress
  • PHP
    • PHP技術者認定試験
  • Docker
  • Next.js
  • AWS
  • Laravel
  • site map
  • search

ntorelabo

Front End Developer

  • search
  • pickup
  • WordPress
  • PHP
    • PHP技術者認定試験
  • Docker
  • Next.js
  • AWS
  • Laravel
  • site map

Twitter、Facebookのタイムラインを埋め込む

  • ホームページ
  • Twitter、Facebookのタイムラインを埋め込む
  • 11月, 水, 2022
  • Web制作 , WordPress
Twitter、Facebookのタイムラインを埋め込む

Contents [hide]

  • 1 Twitterタイムラインの埋め込み
  • 2 細かくカスタマイズする方法
  • 3 コードでカスタマイズする方法
  • 4 Facebookタイムラインの埋め込み
    • 4.1 safariで表示されない場合の対処

Twitterタイムラインの埋め込み

https://publish.twitter.com/#

こちらのページに行き、タイムラインを表示したいツイッターアカウントのURLを入れて、エンターキーを押します。

次に、左側の「Embedded Timeline」をクリックします。

コードが表示されるのでこれをコピーして、カスタムHTMLブロックで貼り付けます。

これでタイムランが表示されるようになります。

細かくカスタマイズする方法

デフォルトだと縦に長いです。

これをカスタマイズするには、まず「set customization options」の箇所のリンクをクリックします。

すると以下のような表示に切り替わります。

ここで以下の4つの項目をカスタマイズ可能です。

  1. タイムラインの高さ(px単位)
  2. タイムラインの幅(px単位)
  3. タイムラインのテーマ色(Lightモード又はDarkモードの2択)
  4. 言語指定

カスタマイズの設定が完了したら「Update」ボタンをクリック。

コードが表示されるので、「Copy Code」をクリック(自動的にコピーされます)。これをサイトに貼り付けます。

サンプル↓

Tweets by designnokoto

コードでカスタマイズする方法

直接、コードに追加してカスタマイズする方法もあります。

埋め込み用コードの「“twitter-timeline”」の後ろに、カスタマイズ用のコードを追加します。
追加する際は、必ず前後に半角スペースを空けてください。

タイムラインの高さ(px単位)data-width=”**”
タイムラインの幅(px単位)data-height=”**”
テーマ色を「Darkモード」にdata-theme=”dark”
リンクの色data-link-color=”#***”
境界線の色data-border-color=”#***”
ヘッダーを非表示にするdata-chrome=”noheader”
フッターを非表示にするdata-chrome=”nofooter”
境界線を消すdata-chrome=”noborders”
スクロールバーを非表示にするdata-chrome=”noscrollbar”
背景を透明にするdata-chrome=”transparent”

「data-chrome=”***”」系のコードを複数まとめて記入する場合は
たとえば、
「data-chrome=”noheader nofooter”」
と、半角スペースを空けて複数入れます。

Facebookタイムラインの埋め込み

https://developers.facebook.com/docs/plugins/page-plugin?locale=ja_JP

safariで表示されない場合の対処

https://digitalyze.net/chrome_facebook_page-plugin/#toc2
最近の投稿
  • WordPressサイトのサブディレクトリ→サブドメイン移行手順 2025年7月6日
  • Laravelでリッチテキストエディタで使いやすい画像アップロード機能を実装(TinyMCE) 2025年6月22日
  • 【PHP】出力バッファリング制御 2025年5月22日
  • basic認証のパスワードを忘れた場合 2025年5月14日
  • PHP 8.0〜から実装で便利な機能(名前付き引数、match) 2025年5月11日
  • さくらインターネットからWHOIS登録メールアドレスの利用廃止のメールが来た 2025年5月9日
  • スムーズにスクロールする処理をjQueryで実装 2025年5月5日
  • Gemini for Google Workspace 活用術 2025年4月24日
  • Google Cloud の始め方 2025年4月20日
  • 【PHP】switch分の書き方、PHP 7.3 から PHP7.4の変更点 2025年4月19日
  • 【PHP】新しい方の指定方法「nullable」 2025年3月25日
  • 「PHPでJSONを扱う」json_encodeとjson_decode完全ガイド 2025年3月23日
  • 【WordPress自作テーマ開発】固定ページを自動作成する方法(下層ページ実装) 2025年3月18日
  • 【PHP】プロトコル / ラッパーについて(file:// php:// http:// https://) 2025年3月17日
  • 【PHP】stdClass を使用して(object) でキャスト 2025年3月16日
  • モダンなPHPコードで使用!無名関数の使い方 2025年3月15日
  • Cursor 便利な機能まとめ、Project Rules 2025年3月15日
  • PHP セッション名の変更方法と php.ini の記述方法まとめ 2025年3月12日
  • 【PHP】関数内でグローバル変数を使用するためには global キーワード 2025年3月10日
  • 【php8上級/準上級試験】模擬問題解説 問題30 strtotime() 2025年3月4日
About Us

Ready To Start Work With Us?

Felis consequat magnis est fames sagittis ultrices placerat sodales porttitor quisque.

Get a Quote
recent posts
  • WordPressサイトのサブディレクトリ→サブドメイン移行手順
  • Laravelでリッチテキストエディタで使いやすい画像アップロード機能を実装(TinyMCE)
  • 【PHP】出力バッファリング制御
  • basic認証のパスワードを忘れた場合
  • PHP 8.0〜から実装で便利な機能(名前付き引数、match)
  • さくらインターネットからWHOIS登録メールアドレスの利用廃止のメールが来た
  • スムーズにスクロールする処理をjQueryで実装
  • Gemini for Google Workspace 活用術
Opening Hours
Week Days 10:00 - 17:00
Saturday 10:00 - 15:00
Sunday Day Off
Contact us
popular posts
  • WordPressで画像を拡大表示するなら「Firelight Lightbox」(旧名:Easy Fancybox) 1.1k件のビュー
  • 【WordPress】カスタムフィールド作成の仕方「ACF」Advanced Custom Fieldsの使用法 743件のビュー
  • 【チートシート】Linuc Lv1-102 実務での使用例も解説 607件のビュー
  • My-Snow-Monkey使用例、子テーマによるカスタマイズ 512件のビュー
  • 【WordPressエラー】「Warning: Undefined variable $post in …」「Warning: Attempt to read property “ID” on null in …」 461件のビュー
  • Twitter、Facebookのタイムラインを埋め込む 415件のビュー
  • 【Next.js】ライブラリ使わないでカルーセルスライダー 303件のビュー
  • ローカル、グローバルIPアドレスの違いと確認手順 275件のビュー
  • AWS認定ソリューションアーキテクト-アソシエイトレベル 248件のビュー
  • WordPress自作、カスタマイズ 229件のビュー
Search
Copyright © 2025 ntorelabo | Powered by Desert Themes