CODEWITHSUNDEEP
javascripthtmlinstagramsocial-networkingembedding
Hoffmann
Hoffmann

Reputation: 14719

How to embedded Instagram in a specific language?

Embedding Instagram photos is simple enough, simply add an iframe with /embed/ at the end of the URL like this:

https://www.instagram.com/p/BA1wL_MqzTV/embed/

But how can I force the UI (the follow/like buttons) to be a specific language like portuguese?

Upvotes: 2

Views: 1765

Answers (1)

Léo Muniz
Léo Muniz

Reputation: 627

Instagram's embed detects the language from the user's browser. And this is a good solution because users frequently use their browsers on their preferred languages.

But to force the response to be an specific language, you should change accept-language request header using a CURL (I'm afraid that is not possible using only an iframe and even using AJAX because of cross-domain security issues).

If you want to verify by yourself try changing the default language and reload the page containing the embed. On Google Chrome you should go to Settings, type Language on the Search Settings input box and then click on the "Language and input settings..." button. Add the language and reorder to ensure the preferred one on the top.

enter image description here

(On Safari it's not possible unless you change the system language).

Now you can use Developer Tools (Cmd+Option+i for mac users), on Network tab to verify headers sent to the server. Note that pt is the first language of my accept-language header now (on Request Headers group). Instagram's response is now in Portuguese ("Seguir" instead of "Follow").

enter image description here

enter image description here

If you still want to force the language despite of the user browser's default, you should implement a CURL on your server changing accept-language header and configure your iframe src to it. PHP working example below.

File: myURL.php

$url = $_GET["url"];

$request_headers = array();
$request_headers[] = 'accept-language: pt,en-US;q=0.8'; // Portuguese response first

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $request_headers); 
curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
$output = curl_exec($ch);
curl_close($ch);
print_r($output);

HTML:

<iframe src='myUrl.php?url=https://https://www.instagram.com/p/BA1wL_MqzTV/embed/'></iframe>

I believe it's a good idea to read Instagram API. There are another ways to do it (oembed and shortcode). Maybe you should consider it.

https://www.instagram.com/developer/embedding/

The last detail: You will probably need a way to make iframe height equal to the content height. You should look this Stack Overflow question:

Make iframe automatically adjust height according to the contents without using scrollbar?

Good luck!

Upvotes: 2

Related Questions