Web

Blueskyのポストをブログの記事に埋め込む[AMP対応]

青葉裕紀2024/01/15 09:30:28 | 2024/01/15 09:42:58

リード


このブログの記事(soccerby.net)は……



  1. このブログの記事を書いている人 Bluesky URL

  2. Webサービス「Skyview」

  3. 「Skyview」の利用
  4. (うまくいってる……?)








1. このブログの記事を書いている人 Bluesky URL


下記のURLです。

青葉裕紀

https://bsky.app/profile/soccerby.net



先日、アカウント名を「青葉裕紀 / @soccerby.net」にしました。
「soccerby.net」というWebサイトが一目でわかるアカウント名にしてます。







2. Webサービス「Skyview」



2-1. Blueskyにリンクカードを投稿する


ブログの記事をBlueskyでリンクカードとして投稿してみた事
につきましては、下記のブログの記事です。


すてきな旅に出よう



>> 追加のOGPを設定した後、
まずはPCのWebブラウザで投稿してみました。

>> 説明文にHTMLのタグが表示されているのは、
ブログの記事の上部に「リード」と書かれてますが、そのあたりにタグを記述しているためで、
もともと、このブログのやり方ではあります。


上記のブログの記事は、
ブログ → Bluesky という流れです。

今回のブログの記事は、Bluesky → ブログ という流れです。







2-2. Webサービス「Skyview」


「Skyview」という、ポストをHTML要素を使って埋め込むWebサービスがあるようです。


Gigazine



>> 非ログイン状態の人にも投稿を見せることができるサービス「Skyview」が登場したことで、この状況が変わりつつあります。








3. 「Skyview」の利用


下記のポストをブログの記事に埋め込もうと思います。

https://bsky.app/profile/soccerby.net/post/3kiqxziobb32f





さっそく使ってみました。

Skyview


#変サラ
というように、ハッシュタグが青色になっているのがいいですね。



埋め込みのコードは iframe というHTML要素です。
このブログは、いわゆる AMP で作られているので、amp-iframe というHTML要素を使います。

<amp-iframe src="https://skyview.social/embed.html?url=https://bsky.app/profile/soccerby.net/post/3kiqxziobb32f" width="4" height="3" sandbox="allow-scripts allow-same-origin" layout="responsive" frameborder="0"></amp-iframe>


お手数ですが、HTMLの表現形式や特殊文字の関係で、
< >(全角)を < >(半角)に直してください。







どうでしょう?
うまくいってるんでしょうか


このカテゴリの直近記事