Incorporando podcasts do BuzzSprout

Suporte
1

Estou tentando incorporar o código de um player de podcast popular, mas nenhuma configuração que altero faz o player ser renderizado. O código é muito simples. Os iframes foram fáceis. Este, por outro lado, não consigo entender.

<div id=‘buzzsprout-small-player-1157708’></div><script type=‘text/javascript’ charset=‘utf-8’ src=‘Data Driven Real Estate’></script>

2

Você pode postar o código relevante (excluindo quaisquer dados privados)?

3

Captura FireShot 157 - Buzzsprout - www.buzzsprout.com
Captura FireShot 157 - Buzzsprout - www.buzzsprout.com378×208 11.8 KB

4

OK, no que diz respeito ao CSP, você deve simplesmente adicionar https://www.buzzsprout.com ao seu CSP, da seguinte forma:

image
image1354×304 34.7 KB

Mas certifique-se de que este embed também esteja colocado no local correto no seu tema.

5

Ok, eu adicionei a URL, mas ela ainda não está sendo renderizada. Não tenho certeza de como ajustar o tema. Eu estava apenas colando o código no topo das postagens relacionadas a podcasts na comunidade.

6

Ah, você não pode postar uma tag <script> em uma postagem normal; se permitíssemos isso, os usuários poderiam facilmente bagunçar seu site. Você já tentou postar apenas o URL do podcast em uma linha separada? Temos um recurso chamado oneboxing, que pode funcionar no seu caso, sem necessidade de incorporações complicadas.

7

Ok, vou procurar isso.

8

Oi Penar,

Acabei de testar isso e não gera o onebox:

https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3

Já que usar a tag de script deles não é uma opção, tenho outras alternativas?

9

O script é algo que pode ser incorporado uma vez no tema do site ou precisa estar adjacente ao iframe?

edit: Respondi à minha própria pergunta, é específico do iframe, isso realmente não é muito útil da parte deles.

10

Esse é um arquivo MP3 direto. Nesse caso, você pode usar a tag HTML de áudio:

<audio controls><source src='https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene.mp3'></audio>
11

@pmusaraj Isso é super útil. Obrigado!

Olá @Stephen,

O que você quer dizer com específico para iframe? É isso que eles fornecem:

<div id='buzzsprout-small-player-1306987'></div>
<script type='text/javascript' charset='utf-8' src='https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small'></script>

Na verdade, @Aaron_Norris, acabei de perceber que posso seguir esse script JS e simplesmente fazer a decodificação eu mesmo:

unescape(decodeURI("%0A%0A%3Ciframe%20src=%22https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&amp;iframe=true&amp;referrer=https%253A%252F%252Fwww.buzzsprout.com%252F1306987.js%253Fcontainer_id%253Dbuzzsprout-small-player-1306987%2526player%253Dsmall%22%20width=%22100%25%22%20height=%22200%22%20frameborder=%220%22%20scrolling=%22no%22%3E%3C/iframe%3E%0A%0A%0A")); 
// retorna este iframe
<iframe src="https://www.buzzsprout.com/1306987/5209720-000-presentacion-empezamos-la-semana-que-viene?client_source=small_player&iframe=true&referrer=https://www.buzzsprout.com/1306987.js?container_id=buzzsprout-small-player-1306987&player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>

Posso adicionar o buzzsprout à lista de permissões em iframes permitidos e funciona perfeitamente:

image
image1063×332 44.3 KB

12

Você pode explicar isso de um jeito que gente como eu, sem muita técnica, consiga entender? Quero ter isso reproduzível dentro do nosso fórum (nota: não é um arquivo .mp3 como acima):

https://www.buzzsprout.com/1717287/8537076

13

Olá Nathan,

Aqui estão os passos:

  1. Acesse o console de administração e pesquise por “allowed iframes”

  2. Adicione https://www.buzzsprout.com e clique no ícone de marca de verificação para salvar a alteração

  3. Adicione o seguinte ao seu post:

    <div data-theme-iframe="no-scroll">
<iframe src="https://www.buzzsprout.com/1717287/8537076?client_source=small_player&amp;iframe=true&amp;referrer=https://lacomunidad.deliberatespanish.com?player=small" width="100%" height="200" frameborder="0" scrolling="no"></iframe>
</div>

A tag <div> ao redor é opcional, mas eu a utilizo porque não quero barras de rolagem nos meus iframes. Se você quiser ativá-las, precisará seguir mais dois passos:

  1. Acesse seu Tema ativo, clique em “Editar CSS/HTML” e selecione a aba <head>
  2. Cole o código abaixo e salve:
    <script type="text/discourse-plugin" version="0.8.42">
  api.decorateCookedElement(post =>
    post.querySelectorAll('div[data-theme-iframe="no-scroll"] iframe').forEach(iframe => {
      iframe.setAttribute('scrolling', 'no');
    }),
    { 
      id: 'iframe-decorator',
      onlyStream: true,
    }
  );
</script>
14

Brilhante! Realmente melhora ter a rolagem removida.

Obrigado pelo guia claro — super útil!!