検索
ホームページウェブフロントエンドCSSチュートリアル私のブログ投稿に Bluesky の「いいね!」を表示する方法

私は今、Bluesky で時間を過ごすのをとても楽しんでいます。全体の経験で私が本当に楽しんでいることの 1 つは、プロジェクトがほぼオープンソースであり、人々がそのプラットフォームを使って本当に素晴らしいものを構築しており、楽しむための素晴らしい API がいくつかあることです。

私は、Webmentions 標準と、それを使用してインターネット上のリンクに対する「いいね」やコメント/返信などのデータを表示することで、サイト間の会話を促進する方法についてよく知っています。私は数年前に Webmentions と協力して、他のソーシャル メディア プラットフォームからの Webmention データを自分のサイトに表示しました。ただし、API からデータを取得するだけで十分な場合、多くの困難を乗り越えなければならないように感じることがよくありました。

この投稿では、Bluesky API を使用して、公開ブログ投稿に関連付けた Bluesky 投稿に「いいね!」をしたユーザーのアバターのコレクションを取得します。これにより、次のようなものをブログに表示できます。あなたのウェブサイト。

How I show Bluesky likes on my blog posts

ワークフロー

この Web サイトは イレブンティ で構築された静的サイトであるため、公開されたブログ投稿を Bluesky 投稿に関連付けるにはいくつかの手順が必要です。

  1. ブログ投稿を公開すると、静的サイトの構築がトリガーされます
  2. 公開されたブログ投稿にリンクする Bluesky 投稿を公開します
  3. Bluesky 投稿の ID を、公開されたブログ投稿 (CMS などで) に関連付けます
  4. サイトを再構築します
  5. 利益

技術的な選択肢

この Web サイトは、クライアント側 JavaScript を控えめに使用する静的サイトです。この機能の JavaScript コードは、ブログ投稿に Bluesky Post ID が関連付けられている場合、条件付きでブログ ページ テンプレート上で実行されます。

このアプローチの代替案は、(私の場合) エッジ関数を使用してリクエスト時に静的 HTML レスポンスを変更することですが、過去には、この方法でサードパーティ API を呼び出すとパフォーマンスの問題が発生しました。最初のバイトまでの時間 (TTFB) が期待よりも遅い。詳細については、「残忍な TTFB をどのように修正したか」をお読みください。

さらに、私のウェブサイトのこの機能は段階的な機能強化であり、ページの機能は Bluesky の「いいね!」の表示に依存していません。したがって、クライアントで Bluesky API の呼び出しが失敗したとしても、それは問題ではなく、DOM を適切にクリーンアップできます。これと同じコードをサーバー上で実行すると、(少なくとも適切なエラー処理がなければ) ページのレンダリングがブロックされ、投稿が読まれなくなる可能性があります。大変残念です。

私のサイトは静的サイトなので、技術的には ビルド時間 で Bluesky データを取得し、各ブログ投稿でデータを静的にレンダリングできます。しかし、私はこの機能がほぼリアルタイムのインタラクティブな体験であることで喜びをもたらすことを望んでいました。さらに、データの同期を保つためにウェブサイトを 1 分ごとに再構築するのは理想的ではありません。

パフォーマンスの最適化

n 個のサードパーティ画像 (ユーザー アバター) をロードしていることを考えると、画像のサイズが重要です。幸いなことに、Bluesky API は各ユーザーに対して少なくとも 2 つの画像サイズを提供しているため、最も小さいサイズを使用したいと考えています。

さらに、n 個の画像をロードしていて、ロードにどれくらい時間がかかるか、ページ レイアウトにどの程度の影響があるかがわからないことを考慮して、累積レイアウト シフト (CLS) を回避するためにいくつかの考慮事項が行われています。 )できるだけ。これらについては、以下のコード例とともに概説します。

ブログ投稿に Bluesky の「いいね!」を表示するための前提条件

  1. Bluesky アカウント
  2. ウェブサイト
  3. いくつかのブログ投稿
  4. Bluesky 投稿 ID をブログ投稿データとともに保存する方法 (例: マークダウンでブログを書いている場合は、前付に投稿 ID を保存します。CMS を使用している場合は、ブログ投稿にフィールドを追加します)コンテンツモデルなど)

コード

魔法を実現する HTML、CSS、JavaScript を見てみましょう。

HTML

HTML はセクション要素内に含まれています。このコンポーネントには以下が含まれます:

  • h3 要素。いいねの総数が入力されます (見出しレベルの要素は異なる場合があります)。
  • 人々に「いいね!」を促すための Bluesky 投稿へのリンク
  • 空の UL 要素。Bluesky アバターで埋める準備ができています。

CSS クラスには BEM 構文を使用していますが、お好みの CSS システムを使用できます。 JavaScript で DOM 要素をターゲットにするために、data-bsky というプレフィックスを付けた data-attributes を使用しています。 JavaScript で CSS クラスを使用して DOM 要素をターゲットにすることもできますが、私は懸念を分離するためにデータ属性を使用することを好みます。必要に応じて、要素に ID を使用し、JavaScript でそれらをターゲットにすることもできます。

ブログ投稿に関連付けられた bskyPostId は、このコンポーネントの隣のメタ タグのデータ属性に追加されます。私が静的サイトを構築しており、別の JavaScript ファイル内のクライアント側のビルド時変数にアクセスする必要があることを考えると、これは純粋に私の設定に固有のものです。たとえば、別のフレームワークを使用している場合、アプリの状態で bskyPostId にアクセスできる場合があります。必要に応じて編集してください。

<meta data-bsky-post-id="${post.bskyPostId}">

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

JavaScript

免責事項: このコードはプレーンな JavaScript で提供されています。必要に応じて、このコードを独自の Web サイト フレームワークに適合させることもできますが、これをプレーンな JavaScript で記述する利点は、そのまま任意のフロントエンドで使用できることです。

まず、いくつかの変数を定義する必要があります。 LIMIT は、表示方法に応じて、ページに表示するアバターの最大数を指定します。私の制限は 59 に設定されています。これは、4 行に収まるアバターの数がこの数であるためです (さらに「いいね!」の数を表示するための追加スペースが必要です)。この API エンドポイントで取得できるアバターの最大数は 100 です。

上記の HTML セクションで説明したように、bskyPostId はメタ タグから取得されます (フレームワークと既存のコードに応じて、これを別の方法で行う必要がある場合があります)。

データを取得した後に DOM を変更するには、document.querySelector() を使用してコンテナ、likeContainer、および likesCount 要素にアクセスする必要があります。

myDid の値を独自の Bluesky DID に置き換えます。それ以外はすべて順調です。

<meta data-bsky-post-id="${post.bskyPostId}">

<section>



<h3>
  
  
  The CSS
</h3>

<p>The CSS you see here has been slightly modified from my implementation to avoid you having to use my custom properties and personal spacing preferences. Please add what you need to make your implementation right for you.</p>

<p>I’d like to call out the magic number min-height: 400px on the parent container class, .post__likes; this is to maintain a fixed height of at least 400px for the element on page load, so that the avatars don't shift the page content around as they gradually load in (the container will expand vertically on mobile). This is to prevent a bad CLS score. In the JavaScript code below, you’ll notice that I’ve specified a limit on the number of avatars fetched, based on how many avatars will fit comfortably inside this fixed-height container.<br>
</p>

<pre class="brush:php;toolbar:false">.post__likes {
  min-height: 400px; /* to avoid CLS as much as possible! */
}

.post__likesTitle {
  font-size: 2rem;
  color: #000;
}

.post__likesCta {
  color:  #000;
  font-size: 1.25rem;
  font-style: italic;
  display: block;
}

.post__likesList {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.post__like {
  width: 4rem;
  aspect-ratio: 1/1;
  margin-right: -1rem;
  border-radius: 100%;
  filter: drop-shadow(0px 0.125rem 0.125rem rgba(0, 0, 0, 0.25));
}

.post__like__avatar {
  border-radius: 100%;
}

.post__like--howManyMore {
  width: 4rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  font-weight: bold;
  font-style: italic;
  background-color: #208bfe; /* Bluesky blue */
  color: #fff;
}

次に、Bluesky API からのデータを使用して DOM を変更する 2 つの関数を定義します。

drawHowManyMore 関数は、getLikes API によって取得された数よりも多くの「いいね」が投稿にある場合にのみ実行されます。繰り返しますが、CSS には BEM 構文を使用しています。別のものを使用している場合は、likesMore 要素に追加されるクラスを更新する必要があります。

drawLikes 関数は、getLikes API からの Like データをループし、アクターごとに img 要素を作成します。 like.actor.avatar 文字列内の avatar を avatar_thumbnail に置き換えていることに注意してください。これは、デフォルトの 1000x1000 ピクセルの代わりに 128x128 ピクセルの画像を表示するためです。 img 要素の alt text 属性を忘れないでください。

const LIMIT = 59;

const bskyPostId = document.querySelector("[data-bsky-post-id]").dataset.bskyPostId;

const container = document.querySelector("[data-bsky-container]");
const likesContainer = document.querySelector("[data-bsky-likes]");
const likesCount = document.querySelector("[data-bsky-likes-count]");

const myDid = "add_your_did";
const bskyAPI = "https://public.api.bsky.app/xrpc/";
const getLikesURL = `${bskyAPI}app.bsky.feed.getLikes?limit=${LIMIT}&uri=`;
const getPostURL = `${bskyAPI}app.bsky.feed.getPosts?uris=`;

GitHub で完全な JavaScript ファイルを表示します。

いくつかのクールな観察

  1. Bluesky ユーザーが投稿に「いいね」を押してから、アバターがブログ投稿に表示されるまで、わずか数秒しかかかりません。

  2. 「いいね!」アクターはタイムスタンプの降順で並べ替えられるため、誰かが Bluesky であなたの投稿に「いいね!」をすると、アバターの 左上 に表示されます。リスト。これにより、意図した以上の喜びが生まれることを願っています (少なくとも地理を左から右に読む場合には)。

  3. Bluesky getPosts API は getLikes API よりも速く更新されます。これは、通常、ページを更新するといいね数が最新になり、別の更新でアバターが表示されるまでにさらに 1 ~ 2 秒かかる可能性があることを意味します。

Bluesky で結果を共有してください

言うまでもなく、あなたの実装と、このコードがあなたの Web サイトでどのように機能するかをぜひ見てみたいと思います。 Bluesky に投稿する準備ができたら、返信にハンドル名 @whitep4nth3r.com をタグ付けしてください。ブログ投稿に私の顔を掲載したいと思います。

以上が私のブログ投稿に Bluesky の「いいね!」を表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
カーソルの次のレベルCSSスタイリングカーソルの次のレベルCSSスタイリングApr 23, 2025 am 11:04 AM

CSSを備えたカスタムカーソルは素晴らしいですが、JavaScriptを使用して次のレベルに物事を引き出すことができます。 JavaScriptを使用して、カーソル状態間で移行し、カーソル内に動的テキストを配置し、複雑なアニメーションを適用し、フィルターを適用できます。

Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Worlds Collide:スタイルクエリを使用したキーフレーム衝突検出Apr 23, 2025 am 10:42 AM

2025年には、互いに互いに跳ね返る要素を伴うインタラクティブなCSSアニメーションは、CSSにPongを実装する必要はありませんが、CSSの柔軟性とパワーの増加はLee&#039;の疑いを補強します。

UI効果にCSSバックドロップフィルターを使用しますUI効果にCSSバックドロップフィルターを使用しますApr 23, 2025 am 10:20 AM

CSSバックドロップフィルタープロパティを使用してユーザーインターフェイスをスタイルするためのヒントとコツ。バックドロップフィルターを複数の要素間でレイヤー化する方法を学び、それらを他のCSSグラフィカル効果と統合して、精巧なデザインを作成します。

微笑んでいますか?微笑んでいますか?Apr 23, 2025 am 09:57 AM

まあ、SVG&#039;の組み込みのアニメーション機能は、計画どおりに非推奨されることはありませんでした。確かに、CSSとJavaScriptは負荷を運ぶことができる以上のものですが、以前のようにSmilが水中で死んでいないことを知っておくのは良いことです

「かわいい」は見る人の目にあります「かわいい」は見る人の目にありますApr 23, 2025 am 09:40 AM

イェーイ、テキストワラップのジャンプを見てみましょう:サファリテクノロジーのプレビューにかなり着陸してください!しかし、それがChromiumブラウザーでの仕組みとは異なることに注意してください。

CSS-Tricks XLIIIを記録しますCSS-Tricks XLIIIを記録しますApr 23, 2025 am 09:35 AM

このCSS-Tricksアップデートは、アルマナック、最近のポッドキャスト出演、新しいCSSカウンターガイド、および貴重なコンテンツを提供するいくつかの新しい著者の追加の大幅な進歩を強調しています。

Tailwind&#039;の@Apply機能は、響きよりも優れていますTailwind&#039;の@Apply機能は、響きよりも優れていますApr 23, 2025 am 09:23 AM

ほとんどの場合、人々はTailwind&#039;の@Apply機能を紹介します。このように展示されたとき、@Applyはまったく有望な音をしません。だからobvio

私はリリースがないように感じます:正気な展開への旅私はリリースがないように感じます:正気な展開への旅Apr 23, 2025 am 09:19 AM

馬鹿のように展開することは、展開に使用するツールと複雑さの報酬と複雑さの減少との間の不一致になります。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール