تضمين البودكاست من BuzzSprout

الدعم
1

أحاول تضمين كود من مشغل بودكاست شهير، لكن لا يوجد أي إعداد أغيره ليظهر المشغل. الكود بسيط جداً. كان استخدام الإطارات (iframes) سهلاً. لكنني لا أستطيع فهم هذا الكود.

2

هل يمكنك نشر الكود ذي الصلة (مع استبعاد أي بيانات خاصة)؟

3

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

4

حسناً، فيما يتعلق بـ CSP، يجب عليك ببساطة إضافة https://www.buzzsprout.com إلى سياسة CSP الخاصة بك، كما يلي:

image
image1354×304 34.7 KB

ولكن تأكد من وضع هذا التضمين في المكان الصحيح في قالبك أيضاً.

5

حسناً، لقد أضفت الرابط لكنه لا يزال لا يعمل. لست متأكداً من كيفية تعديل المظهر. كنت ألصق الكود ببساطة في أعلى المنشورات المتعلقة بالبودكاست في المجتمع.

6

آه، لا يمكنك نشر وسم <script> في منشور عادي؛ فلو سمحنا بذلك، لتمكن المستخدمون بسهولة من إحداث فوضى في موقعك. هل جربت نشر رابط البودكاست فقط في سطر منفصل؟ لدينا ميزة تسمى “oneboxing”، وقد تنجح في حالتك دون الحاجة إلى تضمينات معقدة.

7

حسناً، سأبحث عن ذلك.

8

مرحبًا بنار،

لقد جربت هذا للتو، لكنه لا يقوم بتضمين الرابط تلقائيًا:

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

بما أن استخدام وسم السكربت الخاص بهم غير ممكن، هل لدي أي خيارات أخرى؟

9

هل يمكن دمج السكربت مرة واحدة في سمة الموقع، أم أنه يجب أن يكون مجاورًا للإطار المضمن؟

تعديل: أجبتُ على سؤالي بنفسي، فهو خاص بالإطار المضمن، وهذا ليس مفيدًا جدًا من جانبهم.

10

هذا ملف MP3 مباشر، في هذه الحالة يمكنك استخدام وسم الصوت في HTML:

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

@pmusaraj هذا مفيد للغاية. شكرًا لك!

مرحبًا @Stephen،

ماذا تقصد بـ “مخصص للإطار المدمج (iframe)”؟ هذا ما يقدمونه:

<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>

في الواقع، @Aaron_Norris، لقد أدركت للتو أنه يمكنني تتبع هذا السكربت (js) ببساطة وإجراء فك التشفير بنفسي:

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")); 
// يعيد هذا الإطار المدمج
<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>

يمكنني إضافة buzzsprout إلى القائمة البيضاء في allowed iframes وسيعمل ذلك بشكل مثالي:

image
image1063×332 44.3 KB

12

هل يمكنك شرح ذلك بطريقة يفهمها حتى الأشخاص الأقل خبرة مثل أنا؟ أريد أن يكون هذا المقطع قابلاً للتشغيل داخل منتدانا (لاحظ أنه ليس ملف .mp3 كما في المثال أعلاه):

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

13

مرحبًا ناثان،

إليك الخطوات:

  1. انتقل إلى وحدة تحكم المسؤول وابحث عن “allowed iframes”

  2. أضف https://www.buzzsprout.com ثم انقر على علامة الصح لحفظ التغيير

  3. أضف هذا إلى منشورك:

    <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>

عناصر <div> المحيطة اختيارية، لكنني أستخدمها لأنني لا أريد ظهور أشرطة التمرير في إطارات التضمين الخاصة بي. إذا أردت تمكين ذلك، فيجب عليك اتباع خطوتين إضافيتين:

  1. انتقل إلى السمة النشطة، انقر على “Edit CSS/HTML” ثم اختر علامة التبويب </head>
  2. الصق هذا ثم احفظ:
    <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

رائع! إن إزالة التمرير تحسّنه حقًا.

شكرًا لك على الدليل الواضح - مفيد للغاية!!