Embedding X (Twitter) Links in Your Obsidian Digital Garden 🪴

In the world of note-taking and knowledge management, Obsidian stands out as a powerful tool for creating a digital garden. A digital garden is a metaphor for a collection of interconnected notes and ideas that grow over time. For users looking to enrich their digital gardens with external content, such as tweets or YouTube videos, the Digital Garden - Publish Obsidian Notes For Free plugin for Obsidian provides an elegant solution. This blog post will guide you through crafting regex filters specifically designed to seamlessly embed Twitter and YouTube content into your notes.

Enhancing Your Digital Garden with Custom Filters

Our mission is twofold:

1. Convert Markdown-formatted Twitter links (not supported by Digital Garden) into fully functional embedded tweets (supported by Digital Garden)
2. Bonus: Transform YouTube video links into playable iframes right inside your notes.

By automating this process through regex, we not only save time but also enhance our digital garden with rich multimedia content.

Embedding Tweets

Let's start by transforming a tweet link formatted in Markdown:

! [This is a tweet](https://twitter.com/t3dotgg/status/1750614272550556055)

Into an interactive tweet embed using the following pattern:

Initial Regex for Twitter

! \[(.*?)\]\(https:\/\/twitter\.com\/(?:\w+)\/status\/(\d+)\)

This pattern captures any optional description text along with the Tweet ID from Markdown-formatted links pointing specifically to Twitter statuses. And let it replace with the following HTML code:

<blockquote class="twitter-tweet"><a href="https://twitter.com/user/status/$2?ref_src=twsrc%5Etfw"></a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Step-by-Step Guide

1. Understanding Our Input: Recognize the format of Markdown links targeting tweets
2. Crafting the Regex Pattern: Break down each element of our regex patterns for Twitter
3. Applying Our Patterns: Use these patterns within Obsidian's Digital Garden plugin settings under custom URL transformations

Bonus Tip: Embedding YouTube Videos

Not stopping at just embedding tweets, let’s extend our capabilities to include YouTube videos within our notes seamlessly.

To convert this:

! [Video Title Here](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

Into an embeddable iframe, use the following regex:

!\[(.*)\]\(https?:\/\/w*\.?(?:(?:youtu\.be\/)|(?:youtube\.com\/watch\?v=))(.*)\)

replaced with:

<iframe width="100%" height="315"  src="https://www.youtube.com/embed/$2" class="youtube" title="$1" loading="lazy" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

(Thank you @stalegjelsten) ^[1]

Bonus Tip 2: Embedding Bluesky Posts

Discover — Bluesky is very popular these days! Setup needs a few more steps, which are described in Embedding Bluesky Links in Your Obsidian Digital Garden.

This article was originally published on https://craftengineer.com/. It was written by a human and polished using grammar tools for clarity.

Follow me on X (Formally, Twitter) or Bluesky.