Matthias Pfefferle

Will Norris

<p>The <a href="https://ogp.me/" rel="nofollow ugc">Open Graph protocol</a> enables any web page to become a rich object in a social graph.  Most notably, this allows for these pages to be used with Facebook’s <a href="https://developers.facebook.com/docs/reference/plugins/like" rel="nofollow ugc">Like Button</a> and <a href="https://developers.facebook.com/docs/reference/api/" rel="nofollow ugc">Graph API</a> as well as within Twitter posts.</p>
<p>The Open Graph plugin inserts the Open Graph metadata into WordPress posts and pages, and provides a simple extension mechanism for other plugins and themes to override this data, or to provide additional Open Graph data.</p>
<p>This plugin does not directly add social plugins like the Facebook Like Button to your pages (though they’re pretty simple to add).  It will however make your pages look great when shared using those kinds of tools.</p>


Open Graph

Adds Open Graph metadata to your posts and pages so that they look great when shared on sites like Facebook and Twitter.

whywaita

<p>WWI Blogcard is a Gutenberg block plugin that creates visually appealing blog cards from any URL. Simply paste a URL, and the plugin automatically fetches OGP (Open Graph Protocol) information to generate a rich preview card.</p>
<h4>Features</h4>
<ul>
<li><strong>Easy to use</strong>: Just paste a URL and the blog card is automatically generated</li>
<li><strong>OGP support</strong>: Fetches title, description, and images from OGP meta tags</li>
<li><strong>Responsive design</strong>: Cards look great on any device</li>
<li><strong>Dark mode support</strong>: Automatic dark mode based on system preferences</li>
<li><strong>Caching</strong>: OGP data is cached for improved performance</li>
<li><strong>Security</strong>: SSRF protection blocks requests to private IP addresses</li>
</ul>
<h4>Usage</h4>
<ol>
<li>Add a new “Blogcard” block in the Gutenberg editor</li>
<li>Paste the URL you want to create a card for</li>
<li>Click “Fetch” to retrieve OGP information</li>
<li>The blog card is automatically generated</li>
</ol>
<h3>Source Code</h3>
<p>The source code for this plugin, including uncompiled JavaScript and CSS files, is available on GitHub:</p>
<p><a href="https://github.com/whywaita/wwi-blogcard" rel="nofollow ugc">https://github.com/whywaita/wwi-blogcard</a></p>
<h4>Building from Source</h4>
<p>To build the plugin from source, you need Node.js and npm installed. Then run the following commands:</p>
<ol>
<li>Clone the repository: <code>git clone https://github.com/whywaita/wwi-blogcard.git</code></li>
<li>Navigate to the plugin directory: <code>cd wwi-blogcard</code></li>
<li>Install dependencies: <code>npm install</code></li>
<li>Build the plugin: <code>npm run build</code></li>
</ol>
<p>The build process uses <code>@wordpress/scripts</code> to compile and minify the JavaScript and CSS files from the <code>src/</code> directory to the <code>build/</code> directory.</p>


WWI Blogcard

A WordPress block plugin that generates beautiful blog cards from URLs using OGP information.

Open Graph vs WWI Blogcard