Как удалить границу со встроенных сообщений в социальных сетях? - PullRequest
0 голосов
/ 18 июня 2020

Хотя я понимаю, что этот вопрос возникает время от времени, я внимательно изучил каждый ответ, который мог безуспешно. Итак, я решил открыть тему fre sh ...

Я пытаюсь встроить сообщение LinkedIn на веб-страницу, и независимо от того, что я пытаюсь относительно ширины границы и прочего, всегда есть свет серая рамка вокруг встроенного поста. Такая же граница появляется при встраивании как сообщений Facebook, так и твитов. У меня сложилось впечатление, что исходные сообщения на этих платформах имеют светло-серые границы, так что встроенные версии тоже будут иметь. Интересно, есть ли какое-нибудь обходное решение, которое не предполагает переписывания всего опыта социальных сетей.

Спасибо за вашу помощь. См. Пример кода ниже.


<!-- YouTube iframe version below -->

<iframe width="560" height="315" src="https://www.youtube.com/embed/mhrkdHshb3E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<!-- Twitter js version below -->

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">More than 100 spacecraft have been signed up to fly on Falcon 9 since we launched the rideshare program. Small satellite operators can book their ride to orbit online → <a href="https://www.spacex.com/rideshare/index.html">https://www.spacex.com/rideshare/index.html</a> <a href="https://twitter.com/spaceflightinc/status/1273347941105795072">https://twitter.com/spaceflightinc/status/1273347941105795072</a></p>&mdash; SpaceX (@SpaceX) <a href="https://twitter.com/SpaceX/status/1273426202188005377?ref_src=twsrc%5Etfw">June 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<!-- facebook iframe version below -->

<iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FNASA%2Fphotos%2Fa.67899501771%2F10158346617536772%2F&show_text=true&width=552&height=458&appId" width="552" height="458" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

<!-- facebook js version below -->

<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0" nonce="6zFKXsAI"></script>

<div class="fb-post" data-href="https://www.facebook.com/NASA/photos/a.67899501771/10158346617536772/" data-show-text="true" data-width=""><blockquote cite="https://developers.facebook.com/NASA/photos/a.67899501771/10158346617536772/?type=3" class="fb-xfbml-parse-ignore"><p>Astronomers are used to studying celestial objects that are millions or even billions of years old. That’s why a...</p>Posted by <a href="https://www.facebook.com/NASA/">NASA - National Aeronautics and Space Administration</a> on&nbsp;<a href="https://developers.facebook.com/NASA/photos/a.67899501771/10158346617536772/?type=3">Wednesday, June 17, 2020</a></blockquote></div> 


<!-- LinkedIn iframe version below -->

<iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6674757258863222784" height="209" width="504" frameborder="0" allowfullscreen="" title="Embedded post"></iframe>

1 Ответ

0 голосов
/ 18 июня 2020

div {position: relative; border: 2px solid #fff; width: 500px; height: 300px}
iframe {position: absolute; width: 100%; height: 100%; top: 0}
p {margin: 0; position: absolute; width: 100%; height: 100%; top: 0; border: 2px solid #FFF; z-index: 2; box-sizing: border-box}
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div>
  <iframe src="https://www.linkedin.com/embed/feed/update/urn:li:share:6674757258863222784" frameborder="0" allowfullscreen="" title="Embedded post">
  </iframe>
  <p></p>
</div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...