{"id":4359,"date":"2024-04-15T02:35:35","date_gmt":"2024-04-14T18:35:35","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4359"},"modified":"2024-04-15T02:35:35","modified_gmt":"2024-04-14T18:35:35","slug":"integrate-soundcloud-tracks-on-your-webflow-website","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/integrate-soundcloud-tracks-on-your-webflow-website\/","title":{"rendered":"Integrate Soundcloud tracks on your Webflow website"},"content":{"rendered":"\n
\n
Important:<\/strong> This guide utilizes Webflow\u2019s embed feature to include customized code. The embed feature is accessible with any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.\u00a0<\/h6>\n

By employing dynamic embedding, you can utilize your CMS Collection fields for dynamically refreshing embedded code. In this guide, we’ll design a music website that leverages dynamic embedding to showcase a Soundcloud track for each song review on the site.\u00a0<\/p>\n

You can visit our live music site<\/a> or preview the site in the Designer<\/a>.\u00a0<\/p>\n

\n
<\/div>\n<\/figure>\n

This tutorial covers the following:\u00a0<\/p>\n

    \n
  1. Guidance on crafting a Webflow Collection for your song reviews<\/li>\n
  2. Incorporating your Soundcloud tracks into the Webflow CMS\u00a0<\/li>\n
  3. Constructing a dynamic embed<\/li>\n<\/ol>\n

    Creating a Webflow Collection for your song reviews<\/h2>\n

    Initially, establish a CMS Collection for storing your song reviews along with their respective Soundcloud track IDs (i.e., the distinctive identifiers for your Soundcloud tracks).\u00a0<\/p>\n

    To set up a Collection with the required fields:\u00a0<\/p>\n

      \n
    1. Access the CMS panel<\/strong><\/li>\n
    2. Tap on the \u201cCreate new Collection<\/strong>\u201dicon<\/li>\n
    3. Assign a title<\/strong> to your Collection (e.g., \u201cSong reviews\u201d)\u00a0<\/li>\n
    4. Hit Add new field<\/strong>\u00a0<\/li>\n
    5. Select Plain text<\/strong>\u00a0<\/li>\n
    6. Label your field as \u201cSoundcloud track ID\u201d<\/li>\n
    7. Press Save field<\/strong><\/li>\n
    8. (Optional) Append any extra Collection fields (e.g., artist, album art, review, rating, etc.)<\/li>\n
    9. Click Create Collection<\/strong>, and remember to keep this tab open for future reference!\u00a0<\/li>\n<\/ol>\n

      Incorporating your Soundcloud tracks into the Webflow CMS\u00a0<\/h2>\n

      To insert your Soundcloud tracks into the Webflow CMS, you must obtain your track IDs from Soundcloud. These IDs serve as distinct markers for your Soundcloud tracks and ensure accurate track representation for each song review within your Collection. Extract the track IDs from your Soundcloud embed code.\u00a0<\/p>\n

      Generating your Soundcloud embed code\u00a0<\/h3>\n

      To create your Soundcloud embed code:\u00a0<\/p>\n

        \n
      1. Visit any Soundcloud track\u00a0<\/li>\n
      2. Click the Share<\/strong> icon<\/li>\n
      3. Select Embed<\/strong><\/li>\n
      4. (Optional) Customize your Soundcloud player\u2019s appearance, size, etc.<\/li>\n
      5. Copy the code from the Code<\/strong> section, and retain this tab for reference!\u00a0<\/li>\n<\/ol>\n
        Important:<\/strong> In case you closed the tab with your Webflow site, revisit the CMS panel<\/strong> and choose your song reviews Collection from the earlier steps.<\/h6>\n

        Formulating your song review with the Soundcloud track ID\u00a0<\/h3>\n

        To fetch the value for your Soundcloud track ID:\u00a0<\/p>\n

          \n
        1. Copy the series of characters post \u201c\/tracks\/\u201d in the Code<\/strong> section<\/li>\n
        2. Go back to your song reviews Collection in Webflow<\/li>\n
        3. Initiate a new Collection item for a song review<\/li>\n
        4. (Optional) Populate any additional Collection fields (e.g., artist, album art, review, rating, etc.)\u00a0<\/li>\n
        5. Paste the character series copied from Soundcloud into the Soundcloud track ID<\/strong> field\u00a0<\/li>\n
        6. Click Create<\/strong><\/li>\n<\/ol>\n
          Top suggestion: <\/strong>You can insert your Soundcloud code into a code editor like Sublime Text<\/a> or Visual Studio Code<\/a> for easier track ID identification.\u00a0<\/h6>\n

          Repeat the process for generating your embed code and forming a song review with a Soundcloud track ID for each song review you wish to include in Webflow (i.e., to add more song reviews in the future, you’ll need to form a new Collection item, retrieve the Soundcloud track ID from the Soundcloud embed code, and insert it into the appropriate Collection field).\u00a0<\/p>\n

          \n
          <\/div>\n<\/figure>\n

          Constructing a dynamic embed<\/h2>\n

          Dynamic embeddings exclusively function with dynamic content, indicating their application to Collection pages or within a Collection list on a static page. Given that you’re referring to your song reviews Collection, you should insert your embed into the Collection page linked with your song reviews Collection or attach a Collection list to your song reviews Collection.\u00a0<\/p>\n

          Important: <\/strong>In case you closed the tab with your Soundcloud embed code, navigate to Soundcloud and copy the embed code crafted in the previous steps.<\/h6>\n

          To generate a dynamic embed, insert the Soundcloud embed code into your Webflow site and substitute the Soundcloud track ID within the embed with the corresponding Collection field:\u00a0<\/p>\n

            \n
          1. Navigate to Add panel<\/strong> > Advanced<\/strong><\/li>\n
          2. Include an embed<\/strong> element to the area where you desire the Soundcloud track to be displayed<\/li>\n
          3. Paste the Soundcloud embed code in the Webflow code editor\u00a0<\/li>\n
          4. Highlight the character and letter series post \u201c\/tracks\/\u201d\u00a0<\/li>\n
          5. Click Add field<\/strong><\/li>\n
          6. Select the Soundcloud track ID <\/strong>field\u00a0<\/li>\n
          7. Press Save & close\u00a0<\/strong><\/li>\n<\/ol>\n

            This process guarantees that the embed showcases the song corresponding to each song review.<\/p>\n

            \n
            <\/div>\n<\/figure>\n

            When you’re prepared, publish your website to view your newly integrated Soundcloud tracks!\u00a0<\/p>\n

            Top suggestion: <\/strong>Extend the use of conditional visibility on Collection pages and within Collection lists to conceal the embedded Soundcloud player for song review items lacking a Soundtrack track ID.<\/h6>\n
            Important:<\/strong> The Soundcloud player will not be displayed on the Designer canvas \u2014 the preview of the embedded player in the Designer is inaccessible, and a placeholder will substitute it. Post publication or site export, the player will be visible (i.e., displayed) in its designated position. Should you wish to preview the embedded player before site deployment on a custom domain, you can publish your site to the webflow.io staging subdomain.\u00a0<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Display unique Soundcloud tracks on your site using dynamic embeds.","protected":false},"author":2,"featured_media":5281,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-4359","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=4359"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4359\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5331"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}