Twitter & Instagram Embed is not working

Hey @bichareh

Thank you so much for using AMP for WP.

May I know, how did you embed Twitter and Instagram content in your posts?

[ Signature moderated ]

• This reply was modified 7 years, 8 months ago by Jan Dembowski.

Hi @riyazmoinshaik

with the official embed buttons on both networks.

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-version="7" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:658px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);"><div style="padding:8px;"> <div style=" background:#F8F8F8; line-height:0; margin-top:40px; padding:50% 0; text-align:center; width:100%;"> <div style=" background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAMAAAApWqozAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURczMzPf399fX1+bm5mzY9AMAAADiSURBVDjLvZXbEsMgCES5/P8/t9FuRVCRmU73JWlzosgSIIZURCjo/ad+EQJJB4Hv8BFt+IDpQoCx1wjOSBFhh2XssxEIYn3ulI/6MNReE07UIWJEv8UEOWDS88LY97kqyTliJKKtuYBbruAyVh5wOHiXmpi5we58Ek028czwyuQdLKPG1Bkb4NnM+VeAnfHqn1k4+GPT6uGQcvu2h2OVuIf/gWUFyy8OWEpdyZSa3aVCqpVoVvzZZ2VTnn2wU8qzVjDDetO90GSy9mVLqtgYSy231MxrY6I2gGqjrTY0L8fxCxfCBbhWrsYYAAAAAElFTkSuQmCC); display:block; height:44px; margin:0 auto -44px; position:relative; top:-22px; width:44px;"></div></div> <p style=" margin:8px 0 0 0; padding:0 4px;"> <a href="https://www.instagram.com/p/BRexQmVAshg/" style=" color:#000; font-family:Arial,sans-serif; font-size:14px; font-style:normal; font-weight:normal; line-height:17px; text-decoration:none; word-wrap:break-word;" target="_blank">?8 years ago, this fool and I boarded a plane to Vancouver to shoot a pilot. We didn't know eachother, b?ut we BOTH only brought 1 carry on and then a snowboard bag as checked luggage. During the weeks we would shoot 15 hour days, and on Fridays we filmed through the night until we wrapped at 6am and went straight from set to Whistler mountain to hit the slopes and shred the terrain park. We became fast friends. And almost got fired.  Luckily we survived to the bitter end with out any broken bones (surprisingly) and now 8 years later we have a show that we're proud of and a friendship that will last a life time. And yes, that is a real camera. It's been THAT long. The selfie has come a long way since then.... @zach_roerig #TVDForever</a></p> <p style=" color:#c9c8cd; font-family:Arial,sans-serif; font-size:14px; line-height:17px; margin-bottom:0; margin-top:8px; overflow:hidden; padding:8px 0 7px; text-align:center; text-overflow:ellipsis; white-space:nowrap;">Ein Beitrag geteilt von Nina Dobrev (@nina) am <time style=" font-family:Arial,sans-serif; font-size:14px; line-height:17px;" datetime="2017-03-11T02:17:36+00:00">10. M?r 2017 um 18:17 Uhr</time></p></div></blockquote>
<script async defer src="//platform.instagram.com/en_US/embeds.js"></script>

<blockquote class="twitter-tweet" data-lang="de">
<p dir="ltr" lang="en">When you get your nails done but you have to be careful until they fully dry.. <a href="https://twitter.com/hashtag/Oscars?src=hash">#Oscars</a> <a href="https://twitter.com/hashtag/NicoleKidman?src=hash">#NicoleKidman</a> <a href="https://t.co/xBDBlaScp7">pic.twitter.com/xBDBlaScp7</a></p>
— erika. (@erwatso2) <a href="https://twitter.com/erwatso2/status/836055535824809984">27. Februar 2017</a></blockquote>
<script async="" src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Hey @bichareh

I am so sorry for the delay.

Blockquotes are not allowed on AMP. There’s a special way to embed Instagram and Twitter posts/images/videos in AMP.

Here is a small tutorial on how to embed Instagram posts > https://ampforwp.com/tutorials/how-to-embed-instagram-images-videos/

you can follow the same method mentioned in the tutorial to embed twitter posts in your website.

hope it helps.

[ Signature moderated ]

• This reply was modified 7 years, 8 months ago by Jan Dembowski.

@riyazmoinshaik my website has hundreds of old articles with Twitter embeds that work absolutely fine on desktop. However, the Twitter embeds don’t display correctly on AMP. I’ve only started implementing AMP this month (July) and I’m not willing to go back and edit hundreds of old articles manually.

How do we fix this, please?? can your next update rectify this twitter embed problem? it’s a major issue because in this age of social media, many news articles need to be illustrated with twitter embeds.

Looking forward to your reply.

Hi @angelacrd,

Thank you so much for using our plugin.

Can you share the website URL? and also how you are displaying Twitter embeds?

Regards
Marqas

@ampforwp Hi, my site is CRonaldoDaily.com.

I have hundreds of past articles with tweets that don’t appear well on AMP. For example: https://cronaldodaily.com/3932/bayern-dont-want-follow-cristiano-twitter/amp/

Now, after coming across this AMP TWITTER guide: https://ampbyexample.com/components/amp-instagram/

I was able to edit how the tweet appears in this article, for example: https://cronaldodaily.com/5592/cristianos-twins-boy-girl-not-two-sons/amp/

That procedure requires me to paste the HTML version of an article into the Custom AMP Editor box. Then to remove the actual tweet’s normal embed code and replace it with this with the correct/respective Twitter ID.

<amp-twitter width=”375″
height=”472″
layout=”responsive”
data-tweetid=”INSERTTWITTERID”>
</amp-twitter>

However, do I ALWAYS have to use this time-consuming procedure?

And what happens now to all the past 500+ articles published on my site? I am not willing to go through each past article and edit the tweets. Can you propose a user-friendly fix? Thank you!

@ampforwp Sorry, I meant this AMP Twitter guide, rather (my initial message has wrong Insta link): https://ampbyexample.com/components/amp-twitter/

Hi @angelacrd,

I apologize for the delay in response.

You don’t have to do all those steps, it will get converted directly into AMP.
If it’s not getting converted then please tell me how are you embedding twitter on your normal site.

Regards
Marqas

Hello @ampforwp!

Problem #1 is solved: I figured it out myself: now I just paste the URL of a tweet/FB post/Instagram post in “VISUAL MODE: ADD MEDIA >>> INSERT URL” in the article box in WordPress. With that simple method, social media posts on both desktop & AMP versions look good.

HOWEVER:

Problem #2: Previously, I used to copy & paste embed codes of tweets/FB posts/Insta posts in HTML MODE of the article box in WordPress. And with that classic method of embedding social media posts on WordPress, the result looks good on desktop but NOT on AMP. So consequently, all the past articles with tweets/FB posts are faulty in AMP. Is there a way you can fix all the previous 400+ articles on my site?

Looking forward to have this fixed ASAP.

Thank you,
Angela

Hi @angelacrd,

I apologize for the delay.

We have resolved this issue and added it in our next update which we are going to release soon(before or on Monday).

Please test if your embeds are working or not after the update.

And I would appreciate if you can give us the status of your problem after the update.

Happy weekend
Marqas

@marquas:

Unfortunately, old articles (articles in which I embedded the codes in HTML) still don’t display tweets properly. And I have hundreds of such articles. For example, this one: https://cronaldodaily.com/3932/bayern-dont-want-follow-cristiano-twitter/amp/

As for current articles, it’s fine because since implementing AMP on my site, I don’t embed twitter embed codes anymore. I rather click on “ADD MEDIA >> INSERT LINK >> PASTE URL OF THE TWEET” and with that method, the tweets appear well both on desktop and AMP versions.

Still waiting for all my previous articles to fix themselves automatically without me having to edit every single one of those. It would be a hassle too huge to go through.