Insert social widgets into your popups

Lisa Fockens Updated by Lisa Fockens

When a third-party service offers a way to embed a widget on your website, you can insert this widget into your popup with our JS callbacks feature.

Let's first see the generic methods to follow. You will then find various examples for embedding well known services.


Use iframe blocks for <iframe> snippets

First of all, if the provided snippet starts with <iframe>, you just need to use an iframe block:

Within our editor, create a new iframe block, and fill up its URL by copying the src attribute of the provided snippet.

For example, if you want to embed a Google map, you will get an HTML snippet similar to this:

<iframe src="https://www.google.com/maps/embed?pb=...!2sfr" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

The URL of the iframe block should be https://www.google.com/maps/embed?pb=...!2sfr

That's it! Note that we have dedicated blocks for videos (YouTube, Dailymotion, Vimeo) and Facebook pages.

Create JS callbacks to execute scripts

Some other widgets need a deeper integration with the page. Such widgets are composed like this: a <div> element and a <script> tag.

The <div> aims to place the future widget. It is a target, an empty element that will later be filled by the <script>. You need to separate these two concepts in Wisepops.

Create an HTML block containing the <div>

You can choose the position of the widget in your popup by creating an HTML block. It should only contain the <div ... </div> portion of the snippet.

For example, if we want to embed a YouTube subscribe button, we would create an HTML block containing the following code:

Create a JS callback to execute the script

<script> tags are not allowed in our HTML blocks. You need to use a JS callback instead. Create a callback, and set its event to Before popup display.

Now, you should fill up the callback script. The expected language is Javascript, not HTML. This means that you cannot use <script> tags. This implies changing the way the script is written.

For our YouTube subscribe button example, we would transform the script provided by YouTube:

<script src="https://apis.google.com/js/platform.js"></script>

Into a pure Javascript snippet:

var script = document.createElement("script");
script.src = "https://apis.google.com/js/platform.js";
script.async = true;
document.body.appendChild(script);

Note that the script.src value is aligned with the original <script src="..."> attribute.


Real examples


Facebook post

Create an HTML block containing the <div> with the class fb-post. Something like this:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-show-text="true" data-width="">
 <blockquote cite="https://developers.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">
 Posted by <a href="https://www.facebook.com/facebookapp/">Facebook App</a> on&nbsp;
 <a href="https://developers.facebook.com/20531316728/posts/10154009990506729/">Thursday, August 27, 2015</a>
 </blockquote>
</div>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v7.0";
script.async = true;
document.body.appendChild(script);

(See Facebook documentation.)

Google Maps

Create an iframe block, with a URL similar to https://www.google.com/maps/embed?pb=...!2sfr


(See Google documentation.)


Instagram post

Create an HTML block containing the <blockquote> element. Something like this:

<blockquote class="instagram-media" data-instgrm-captioned data-instgrm-permalink="https://www.instagram.com/p/CADdxE1gJ1u/?utm_source=ig_embed&amp;utm_campaign=loading" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; width:-webkit-calc(100% - 2px); width:calc(100% - 2px);">
...</blockquote>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "//www.instagram.com/embed.js";
script.async = true;
document.body.appendChild(script);

(See Instagram documentation.)

LinkedIn

Create an iframe block, with a URL similar to https://www.linkedin.com/embed/feed/update/urn:li:ugcPost:6652912089960640512


(See LinkedIn documentation.)

Spotify follow button

Create an iframe block, with a URL similar to https://open.spotify.com/follow/1/?uri=spotify:artist:6sFIWsNpZYqfjUpaCgueju&size=detail&theme=light


(See Spotify documentation.)

Twitter

Create an HTML block containing the <a> element with a class starting with twitter. Something like this:

<a class="twitter-timeline" href="https://twitter.com/Twitter?ref_src=twsrc%5Etfw">Tweets by Twitter</a>

And create a JS callback with a script similar to this:

var script = document.createElement("script");
script.src = "https://platform.twitter.com/widgets.js";
script.async = true;
document.body.appendChild(script);

(See Twitter documentation.)

How To Add a Video to a Popup?

Contact