Sign in Sign up
Last updated 3 min read

Ghost Post Oembed and Bookmarks Issue

Related: Ghost Blog.

Ghost embeddings and bookmarks seems to be failing when pasting urls to another posts or page of the same blog. Probably it's related to Node 18 version. Facing it on the latest 5.82.12 docker official image.

I've found a least 3 workarounds.

  1. Downgrading Node should probably fix the issue according to github issue
  2. Run a local instance, paste url there, then copy-paste the embedding to the prod blog. Weird but it works.
  3. Paste url manually as an html block

Embed With Image Example

<figure class="kg-card kg-bookmark-card">
	<a class="kg-bookmark-container" href="https://kazaimazai.com/secret-env-vars-xcode-ci/?ref=kazaimazai.com">
		<div class="kg-bookmark-content">
			<div class="kg-bookmark-title">How to Manage Secret Environment Vars in Xcode and CI
			</div>
			<div class="kg-bookmark-description">The tutorial provides a solution for managing secrets as environment variables in Xcode and CI
			</div>
			<div class="kg-bookmark-metadata">
				<img class="kg-bookmark-icon" src="https://kazaimazai.com/content/images/size/w256h256/2023/09/51a2eb2b9af4da2b74498d8c0133ae78-sticker-1.png" alt>
				<span class="kg-bookmark-author">Kazai Storyboard</span>
				<span class="kg-bookmark-publisher">Serge Kazakov</span>
			</div>
		</div>
		<div class="kg-bookmark-thumbnail">
		<img src="https://images.unsplash.com/photo-1484417894907-623942c8ee29?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=M3wxMTc3M3wwfDF8c2VhcmNofDMzfHxjb2Rpbmd8ZW58MHx8fHwxNjg2NjQ3ODUyfDA&amp;ixlib=rb-4.0.3&amp;q=80&amp;w=2000">
		</div>
	</a>
</figure>

Embed Without Image Example


<figure class="kg-card kg-bookmark-card">
	<a class="kg-bookmark-container" href="https://kazaimazai.com/software-engineering/?ref=kazaimazai.com">
		<div class="kg-bookmark-content">
			<div class="kg-bookmark-title">Software Engineering</div>
			<div class="kg-bookmark-description">Related: About These Notes. Check out the backlinks to navigate the notes related to the topic.
			</div>
			<div class="kg-bookmark-metadata">
				<img class="kg-bookmark-icon" src="https://kazaimazai.com/content/images/size/w256h256/2023/09/51a2eb2b9af4da2b74498d8c0133ae78-sticker-1.png" alt>
				<span class="kg-bookmark-author">Kazai Storyboard</span>
				<span class="kg-bookmark-publisher">Serge Kazakov</span>
			</div>
		</div>
	</a>
</figure>

Embed Only Title and Excerpt


<figure class="kg-card kg-bookmark-card">
	<a class="kg-bookmark-container" href="https://kazaimazai.com/software-engineering/?ref=kazaimazai.com">
		<div class="kg-bookmark-content">
			<div class="kg-bookmark-title">Software Engineering</div>
			<div class="kg-bookmark-description">Related: About These Notes. Check out the backlinks to navigate the notes related to the topic.
			</div>
		</div>
	</a>
</figure>

Emded Only Title


<figure class="kg-card kg-bookmark-card">
	<a class="kg-bookmark-container" href="https://kazaimazai.com/software-engineering/?ref=kazaimazai.com">
		<div class="kg-bookmark-content">
			<div class="kg-bookmark-title">Software Engineering</div>
		</div>
	</a>
</figure>

Raw Embed Snippet


<figure class="kg-card kg-bookmark-card">
    <a class="kg-bookmark-container" href="LINK_URL">
        <div class="kg-bookmark-content">
            <div class="kg-bookmark-title">TITLE</div>
            <div class="kg-bookmark-description">WRITE-UP</div>
            <div class="kg-bookmark-metadata">
                <img class="kg-bookmark-icon" src="FEATURE_IMAGE_URL">
                <span class="kg-bookmark-author">AUTHOR_NAME</span>
                <span class="kg-bookmark-publisher">PUBLISHER_NAME</span>
            </div>
        </div>
        <div class="kg-bookmark-thumbnail">
            <img src="THUMBNAIL_IMAGE_URL">
        </div>
    </a>
</figure>

References

Comments