Twitter card validator on localhost

Question

So i'm testing the Twitter and Facebook share functionality.

I'm currently testing Twitter's share button, i've added in the meta tags and after a few hours of searching I found that for me to be able to embed tweets (embed twitter images in my tweets that link back to my site) I need twitter cards.

My meta code:

   <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="http://MY_IP_ADDRESS:3000/">
    <meta name="twitter:creator" content="@random">
    <meta name="twitter:title" content="Parade of Fans for Houston’s Funeral">
    <meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here.">
    <meta name="twitter:image" content="http://cdn0.lostateminor.com/wp-content/uploads/2015/10/Amazing-long-exposure-photos-make-light-look-like-cobwebs-on-trees2-650x434.jpg">

Then the share button that looks like:

  <img src="http://cdn0.lostateminor.com/wp-content/uploads/2015/10/Amazing-long-exposure-photos-make-light-look-like-cobwebs-on-trees2-650x434.jpg">
    <a href="https://twitter.com/intent/tweet?button_hashtag=test" data-url="http://localhost.share.com/" target="_blank">Tweet #test</a>
  </img>

When I tweet the hash tag, it doesn't pick my image up or tweet it. So i've been trying to run my site (i'm testing so its on my localhost on Twitter's Card Validator) https://cards-dev.twitter.com/validator.

I get this error message:

Any ideas what i've done wrong? Or why I can't use my IP address so I can test Twitter cards?

Thanks!

Septenary

Please tag appropriately! This has little to do with facebook, and nothing at all with twitter-boostrap. (Tags removed.) – Undertaking

Answer 1

I thought I'd leave this here incase anyone stumbles upon this. Since I asked the question so long ago I can't actually remember the work around but the easiest solution I think would be to use ngrok.

https://ngrok.com/

Download ngrok. Run your server locally then point ngrok to the port your local server is running on and it'll spit something out along the lines of...

Session Status                online                                                                                                                   
Version                       2.1.18                                                                                                                   
Region                        United States (us)                                                                                                       
Web Interface                 http://127.0.0.1:4040                                                                                                    
Forwarding                    http://65hkdy7ed.ngrok.io -> localhost:3000                                                                               
Forwarding                    https://65hkdy7ed.ngrok.io -> localhost:3000 

And there you have yourself your URL to use :)

Septenary

How can we do the same for facebook, ngrok is not working for them :-( – Corrugation

@SiguMagwa I haven't tried with facebook. What's the error you're getting? As far as i'm aware. FB/Twitter need a publically available URL to crawl to grab the meta data information. Ngrok creates that url and tunnels it to a local port. Possibly could use the https url ngrok provides if FB are against using http url as i know they are in certain areas. I can't imagine they've block ngrok generated urls entirely but it's possible. What's your error? Maybe i can help :) – Septenary

It shows only the url when I use it on the object debugger, they have probably blocked ngrok because it works fine with the twitter validator – Corrugation

ngrok doesn't seem to be working for twitter meta tags on localhost. The tweet only shows the url :( – Austine

ngrok robots.txt doesn't allow scraping so it is blocking Twitter from getting the metadata. – Ronen