I’m trying to add social media feeds (facebook, instagram and twitter) to a dynamic page so that it takes the page source from the dataset.
If the Facebook widget and others had a database feature that would be the easiest solution but it doesn’t.
From what i can tell it can be done via the HTML code container.
Based of this code example VelobyWix-new C
Can someone help me write some code for the page so that is will pass in my variable to the html code
HTML code
I want to replace the values of the data-href, blockquote cite, and ahref with my dynamic value.
Hi,
see the documentation and code example here:
I hope this helps. Let me know if you need any further assistance.
Thanks for this Giedrius.
I’ve got very little experience with code and have only been able to adapt a few things to suit my needs.
Can you do a little hand holding for me ?
I want to do the same thing as described above but for a youtube video.
I want to replace the section in in bold with my variable from my dynamic dataset. (its on a dynamic page)
Can you explain with code examples on how to do this then i should be able to adapt it to other situations.
OK, lets break down what we need to do:
- Cover specifics of embedding YouTube, to successfully embed video in Wix
- Cover setting values in HTML component
- Cover accessing current dynamic page item
- Connecting it all
-
You may already now this, but to embed YouTube videos, you will need to use special link for embedding. Regular video links will not work in iframes. There are formed as http://www,YouTube
-
Now on to the actual code. We can send messages to HTML component by just calling postMessage() as such:
$('#html1').postMessage('https://www.youtube.com/embed/syVP6zDZN7I?ecver=1')
To receive the message we need to add some code to the HTML in HTML component itself. Bellow any iframe we can add a little script tag to receive the message:
<script>
window.onmessage = (message) => {
document.getElementById('videoFrame').src = message.data
}
</script>
It creates a message handler that can receive the message from page code and act on it. So, we take the data received with the message and set it as the source for the frame. To make accessing frame easier, giving an id to the iframe is a good idea. Here I give it an id of ‘videoFrame’.
<iframe id="videoFrame" src="#"></iframe>
- Accessing current item of dynamic page is really easy.
const videoUrl = $w('#dynamicDataset').getCurrentItem().videoUrl
I assume that the url is in videoUrl field of the current collection item.
- So up to this point the code in HTML component should look something similar to (I’m skipping any additional iframe attributes):
<iframe id='videoFrame' src="#"></iframe>
<script>
window.onmessage = (message) => {
document.getElementById('videoFrame').src = message.data
}
</script>
And the code for the page:
$w.onReady(function () {
$w('#html1').postMessage($w('dynamicDataset').getCurrentItem().videoUrl)
});
I hope this helps! Let me know.
Thanks, Worked like a charm.
I’m trying to get this to work with twitter and facebook feeds aswell which are not iframes.
Does it function similarly?
For the Twitter feed i want to take the entire piece of embed code from the dynamic Dataset.
Tweets by Wix
For facebook I want to call only the “page url from the dataset and replace it in the embed code” (bold font)
Hi Giedrius,
Any help with this would be greatly appreciated 
Hi,
the principle is the same - use HTML component and message communication to set specific values there. It doesn’t really matter if it’s an iframe or not.
To replace element values, give those elements id fields and then use
document.getElementById('id-of-the-element').attribute = valueToSet
If you want to set the entire content (like in Twitter example) this can be done a little differently. Create a placeholder element in the HTML component and replace its contents.
Example placeholder:
<div id="container"></div>
And instead of setting some attribute. Place the whole HTML via innerHTML attribute:
document.getElementById('container').innerHTML = message.data
I hope this helps.
Can you help me do something similar? I want to allow my site members to embed their Instagram feeds on their profile pages, which are dynamic pages, of course, drawing information from a collection. I have absolutely zero experience with code. What should I do?
Hi,
I’m just going ahead with this code
page code
$w.onReady(function () { $w('#html3').postMessage($w('dynamicDataset').getCurrentItem().videoUrl) });
html code
<iframe id='videoFrame'
src="#"
width="100%"
height="96.35%">
</iframe>
<script> window.onmessage = (message) => { document.getElementById('videoFrame').src = message.data } </script>
example dataset value (videoUrl)
https://www.youtube.com/embed/2YBtspm8j8M?rel=0&controls=0&showinfo=0
It’s working on preview but not very stable. you have to go into the preview and out again, then back in and it will load. Also its not working on the live site. Any thoughts as to why this is happening?
Can you share a link to the live site where it is not working?