Testing how different media integrations work to utilise this feature to make rich rectangle content.
===== 1
Below is the YouTube integration testing
===== 2
Below is the Facebook Image integration testing (with full post)
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D661323560010604%26set%3Da.102125682597064%26type%3D3&show_text=true&width=500" width="500" height="684" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
Below is the Facebook Image integration testing (without full post)
<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2Fphoto.php%3Ffbid%3D661323560010604%26set%3Da.102125682597064%26type%3D3&show_text=false&width=500" width="500" height="684" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
===== 3
Below is the Facebook Video integration testing (with text)
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FPresidentofIndia%2Fvideos%2F1091734439208207%2F&show_text=true&width=560&t=0" width="560" height="429" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
Below is the Facebook Video integration testing (without text)
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2FPresidentofIndia%2Fvideos%2F1091734439208207%2F&show_text=false&width=560&t=0" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
===== 4
Below is the Facebook Post integration testing
===== 5
Below is the Twitter Image integration testing
===== 6
Below is the Twitter Post integration testing kkkk
test
<div id="fb-root"></div> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v23.0&appId=2756621731234097"></script>
test adv \
<div class="fb-post" data-href="https://www.facebook.com/photo.php?fbid=661323560010604&set=a.102125682597064&type=3" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/PresidentofIndia/posts/661324156677211" class="fb-xfbml-parse-ignore"><p>President Droupadi Murmu paid floral tributes to Babasaheb Dr B.R. Ambedkar on his birth anniversary at Prerna Sthal, Parliament House Complex, New Delhi.</p>Posted by <a href="https://www.facebook.com/PresidentofIndia">President of India</a> on <a href="https://www.facebook.com/PresidentofIndia/posts/661324156677211">Sunday 13 April 2025</a></blockquote></div>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>My Blog Post — Embedded Facebook Photo</title>
<meta name="description" content="A clean, responsive blog post layout with an embedded Facebook photo." />
<style>
:root {
--bg: #0b0c10;
--card: #121318;
--text: #eaf0f6;
--muted: #9aa9b5;
--accent: #4cc9f0;
}
* { box-sizing: border-box; }
body {
margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: radial-gradient(1200px 800px at 10% 10%, #121826, var(--bg));
color: var(--text);
}
.wrap { max-width: 860px; margin: 0 auto; padding: 3rem 1.25rem 5rem; }
header { margin-bottom: 1.25rem; }
.tag { display: inline-block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); background: rgba(76,201,240,.12); padding: .25rem .5rem; border: 1px solid rgba(76,201,240,.3); border-radius: 999px; }
h1 { font-weight: 800; font-size: clamp(1.75rem, 2.6vw + 1rem, 3rem); line-height: 1.15; margin: .5rem 0 0; }
.meta { color: var(--muted); font-size: .95rem; margin-top: .5rem; }
.card { background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01)); border: 1px solid rgba(255,255,255,.08); border-radius: 18px; padding: 1.25rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
p { color: #d7dee6; font-size: 1.05rem; line-height: 1.7; }
.prose { display: grid; gap: 1rem; }
.fb-container { margin: 1rem 0; }
footer { margin-top: 2.5rem; color: var(--muted); font-size: .95rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
</style>
</head>
<body>
<div id="fb-root"></div>
<!-- Facebook SDK: keep one instance per page. Locale can be changed from en_US to your preferred locale. -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v20.0" nonce="fb-embed"></script>
<main class="wrap">
<header>
<span class="tag">Blog</span>
<h1>Highlighting a Moment — Embedded from Facebook</h1>
<div class="meta">By Your Name · <time datetime="2025-09-03">September 3, 2025</time></div>
</header>
<article class="card prose">
<p>
Here’s a quick write‑up with a Facebook photo embedded inline. If the photo is public, it will render below.
</p>
<div class="fb-container">
<!-- Embedded Facebook post/photo -->
<div class="fb-post" data-href="https://www.facebook.com/photo/?fbid=661323480010612&set=pb.100083988965071.-2207520000" data-show-text="true" data-width="720"></div>
<noscript>
Facebook embed requires JavaScript. You can view the photo directly
<a href="https://www.facebook.com/photo/?fbid=661323480010612&set=pb.100083988965071.-2207520000" rel="noopener noreferrer">on Facebook</a>.
</noscript>
</div>
<p>
Tip: If you don’t see the embed, make sure the Facebook privacy setting for that post is set to <em>Public</em> and that any ad‑blockers or tracking protections allow Facebook widgets.
</p>
</article>
<footer>
© 2025 Your Site · Built with ❤ — <a href="#">Subscribe</a>
</footer>
</main>
</body>
</html>
0 Comments