Android WebView not showing image Instagram embed

Question

I'm embed Instagram post to Android WebView, but the picture not show

Here is the screenshot Instagram picture not show

Here is my WebView code:

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    WebView webView = (WebView) findViewById(R.id.webview);
    webView.setHorizontalScrollBarEnabled(false);
    webView.setVerticalScrollBarEnabled(false);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setUserAgentString(USER_AGENT);
    webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);
}

private String TEXT_INSTAGRAM = "<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:62.4537037037% 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/BNYDM90gGJ3/\" 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\">A view</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;\">A photo posted by Sarah (@sarahsnyder) on <time datetime=\"2016-11-29T01:34:08+00:00\" style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\">Nov 28, 2016 at 5:34pm PST</time></p></div></blockquote><script async=\"\" defer=\"\" src=\"http://platform.instagram.com/en_US/embeds.js\"></script>";

How to fix this, so the embeded Instagram can show on WebView

Thanks

Answer 1

You have defined your TEXT_INSTAGRAM below the onCreate method. Please change that by defining it inside Oncreate

@SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

private String TEXT_INSTAGRAM = "<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:62.4537037037% 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/BNYDM90gGJ3/\" 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\">A view</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;\">A photo posted by Sarah (@sarahsnyder) on <time datetime=\"2016-11-29T01:34:08+00:00\" style=\" font-family:Arial,sans-serif; font-size:14px; line-height:17px;\">Nov 28, 2016 at 5:34pm PST</time></p></div></blockquote><script async=\"\" defer=\"\" src=\"http://platform.instagram.com/en_US/embeds.js\"></script>";

WebView webView = (WebView) findViewById(R.id.webview);
webView.setHorizontalScrollBarEnabled(false);
webView.setVerticalScrollBarEnabled(false);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setUserAgentString(USER_AGENT);
webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);
}

Answer 2

You need to change

<script async defer src="//platform.instagram.com/en_US/embeds.js"> 

to:

<script async defer src="https://platform.instagram.com/en_US/embeds.js">

in TEXT_INSTAGRAM.

Answer 3

You have to change

webView.loadDataWithBaseURL(null, TEXT_INSTAGRAM, "text/html", "utf-8", null);

to

webView.loadDataWithBaseURL("https://www.instagram.com", TEXT_INSTAGRAM, "text/html", "utf-8", null);