Display NFTs in WordPress Revisited

NFTs Displayed in WordPress

Updated 10/24/22

Back last April when the iframe worked for embedding an OpenSea collection page (which now is blocked), we embedded NFTs from there or other various platforms using a iframe, the help of two plugins: iframe shortcode plugin, and a fullwidth page template plugin, to make the collection page fit a full screen. As this article ages, things change and the iframes of OpenSea sometimes blocks their site from opening, so we’ve revisited displaying NFTs in WordPress, and added a couple more methods including embedding the OpenSea code with the code they supply from the sharing menu dropdown options. We’re back delving into exploration of functional ways for which NFTs can be embedded or shared and displayed in your WordPress frontend using the custom HTML block or editing as HTML, as previously stated.

1. OpenSea Embed Code

Here’s the OpenSea share embed code:


    <nft-card
    contractAddress="0xea2dc6f116a4c3d6a15f06b4e8ad582a07c3dd9c"
    tokenId="2850">
    </nft-card>
    <script src="https://unpkg.com/embeddable-nfts/dist/nft-card.min.js"></script>

Here’s the same code used in a custom HTML Gutenburg block, but this time we’ve cut the <script> tags and instead placed it to between the <head> tags using the handy-dandy, super-simple Custom CSS & JS plugin, which means we can add more of these NFT cards around the site but don’t need the script tag in every instance as it’s already in the <head>, so now the code just looks like this:

<nft-card contractaddress="0xea2dc6f116a4c3d6a15f06b4e8ad582a07c3dd9c" tokenid="2850">
    </nft-card>

Here’s how it looks when that piece of code is placed in a custom HTML block BOOM: 💥



Another one BOOM: 💥



This method seems to work ok, before we clipped the script code into the head, we’ve run into issues when adding multiple embeds where they stop loading, and also I’ve seen extra tags showing up above the WordPress admin dashboard menu. Which to me looks like some closing tags are not being correctly displayed or dealt with the right way causing some kind of conflict. Here’s what I saw when viewing this very page in Firefox. (Probably nothing actually.)

"< />" < />

Basically as seen above. But now mysteriously it has gone after closing the browser window and refreshing. If you read instruction on this embed though. OpenSea does suggest to add the script into the <head> tags. So using a plugin like the Custom CSS & JS plugin or editing the theme. You can cut that part of the code and use it in the head, so you don’t have to add it to every NFT card you want to display around your WordPress site. Read more about embedding and customizing from OpenSea in this github repo

2. Easy HyperLinked NFT Image

Another surefire way to display your NFT inside WordPress is just by uploading the NFT image into your WordPress media. Now place the image in any page or post and copy the URL to your NFT on whichever marketplace you would like to point to. In this example we surfed over to Gem.xyz and connected our wallet. Then towards the top right of any of the NFTs in your wallet that display in your profile, is located a share icon that copies the URL to your clipboard. Here’s an example of the URL for this one:

https://www.gem.xyz/asset/0x343b68141129ec115c1fc523c5ae90586fe95b77/1730

So, here’s the NFT image saved and uploaded to our media. Now simply place it anywhere and use the above link on the image, and boom, visitors can click the image to visit the marketplace, in this case Gem.xyz but you can use the URL to any of the marketplaces it’s listed on!

NFT image linked to a NFT Marketplace Aggregator

3. NFT Gallery Displayed in WordPress


Multiple OpenSea NFT Card Gallery Screenie

In this other NFT gallery option we’ve been exploring a single column, full-width block, with a four column table. Inside the table definition we added customized embed code from OpenSea. Switch to HTML view and throw in the NFT card code into the <td> and test different blocks, posts or pages to show. It may in fact be worth experimenting with block columns and do away with the table to see if that will be more mobile responsive. After reviewing this post on a mobile device, it’s evident that the top two single embedded NFTs seem to be nicely mobile responsive, compared to the table, so we’ll for sure experiment with better responsive options. See the gallery page here: NFTs in WordPress

4. Multiple NFT Cards in HTML

We’ve just also uploaded a new youtube video and updated the other git repo for displaying these NFT cards in a basic HTML website. You can still use an iframe to display collections from other marketplaces like Gem.xyz that do not block the content from displaying in an iframe, or check out the multi NFT cards displaying in a table or without a table for a more responsive design.

NFT Display in WordPress Revisited Summary

We’ve showed the several ways to get it done. Next on the list is going to be more along the lines or using an API or some such better tech solutions to this same stuff, we’re almost certain there will be super-simple embeddable options coming for WordPress or other blogging or content sharing platforms in the near future and are confident that both web2 and web3 can live together in perfect harmony, side by side like nicely displayed NFT cards in a collection.

jdhorth
jdhorth

Non-Fungi dev and blogger having worked in many industries from food, transport, caretaking, material handling, mechanics. Aspiring web2, web3 dev and musician.