Search code examples
google-apps-scriptfacebook-graph-apigoogle-slides

Embedding Facebook Ad Preview iframe to Google Slides Dialog Box using Google Apps Script?

I have the following endpoint:

https://graph.facebook.com/v16.0/${creativeId}/previews?ad_format=INSTAGRAM_STANDARD&access_token=${TOKEN}`

That fetches the following result:

"<iframe src=\"https://www.facebook.com/ads/api/preview_iframe.php?d=AQIQOVf73lc6gE6oZk_KlQhYCyodDecQS2Ki8EVXur8CfNiuGySpoiBdsUkdXRaq3UlWgoIyN46_M1k05zrIBPAFS3AlLTYlznM095OJdK6T3dPhpXMGN5m-jaj27zMwURMeI9fLG5fXDd_6jOECJdvSktJk84ESLZfCiV-0n1az_2pBhi-DdsQxNlOT0fJImOlNKEwS3O8t2hZ5pRLJuKufc_LK5CaGgU866dwHwntEjVxRH6JHsBeG1ipj8gAf3gm_QVrSsBGEdb-JhV9NysDjf1GNc7ZLQCU4eL0Dm4sZJ3zxH0nQMvmSbaEYOT9DFSerAKHRmX5c6FQvwAP6ev_fFhqi3jujuX3nFxWfFSCXLgeRHf_Hd0fxvLdAecSecsTjKcsVRgPTKfbMp2JBdEWsHgFCnsl0-xL5KLsPmGMlQsaAtmubZHtmwpcutlCj9Cs&amp;t=AQLQVw_wsM5j3L7j2YI\" width=\"320\" height=\"525\" scrolling=\"yes\" style=\"border: none;\"></iframe>`

The results has the below ad preview url link: https://www.facebook.com/ads/api/preview_iframe.php?d=AQIWqcCZ4MvRL0Vs54fOKgjz_wqefwfmh6I0LDIUHt6ske4OIq-XVSvit7eMBIHiB-2heObno8DCpxSjQUmQSN5Ex1CQ8gJULFkCbn3lyli9b0r8wTzeOn_tBS1WyZU1EUfB16oJ--EZcTBhuP7sfBplKKTllnJMHHqcru-1VdCaVg4TM7hVwo2FHda8hgyHuQekSO_oEe1gmfZqhxRquLhZHnFVOyMIx2EBGAwhoJDMDAHbyJRrYas_kpiEnu386jbyo2S96XbXWuaPRo81WOq7JDtgQy4KEVCLZ8J1jjdD1s6Vm86oRYUqiHEG2seYrR3ZQq6W1dKs9XPnnJb_QQ7nBXtBqsObZXLGMCIvZMbNe_V7oOx-MqXandQWHL62fVaccEynk2h5VnJ6X3wWXC865OKjw3hCfy8PJ2R9PeuskqyAyR0yRg0QWA32g1x6j6s&amp&t=AQIvJJ9tem1--9rT7QE

Is there a way to embed the above Ad preview creative in Google Slides Dialog Box ? If not, are there any alternatives or workarounds to do so ?

Thank you for your help.

Solution

  • I believe your goal is as follows.

    • You want to show <iframe src=\"https://www.facebook.com/,,,">` to a dialog on Google Slides.

    In this case, how about the following sample script?

    Sample script:

    Please copy and paste the following script to the script editor of Google Slides.

    function sample() {
  // This value is from your question.
  const html = '<iframe src="https://www.facebook.com/ads/api/preview_iframe.php?d=AQIQOVf73lc6gE6oZk_KlQhYCyodDecQS2Ki8EVXur8CfNiuGySpoiBdsUkdXRaq3UlWgoIyN46_M1k05zrIBPAFS3AlLTYlznM095OJdK6T3dPhpXMGN5m-jaj27zMwURMeI9fLG5fXDd_6jOECJdvSktJk84ESLZfCiV-0n1az_2pBhi-DdsQxNlOT0fJImOlNKEwS3O8t2hZ5pRLJuKufc_LK5CaGgU866dwHwntEjVxRH6JHsBeG1ipj8gAf3gm_QVrSsBGEdb-JhV9NysDjf1GNc7ZLQCU4eL0Dm4sZJ3zxH0nQMvmSbaEYOT9DFSerAKHRmX5c6FQvwAP6ev_fFhqi3jujuX3nFxWfFSCXLgeRHf_Hd0fxvLdAecSecsTjKcsVRgPTKfbMp2JBdEWsHgFCnsl0-xL5KLsPmGMlQsaAtmubZHtmwpcutlCj9Cs&amp;t=AQLQVw_wsM5j3L7j2YI" width="320" height="525" scrolling="yes" style="border: none;"></iframe>';

  SlidesApp
    .getUi()
    .showModalDialog(
      HtmlService.createHtmlOutput(html)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL)
        .setWidth(400)
        .setHeight(600),
      "sample"
    );
}

    Testing:

    When this script is run, the following result is obtained.

    enter image description here

    Note:

    • This is a sample script. So, please modify this to your actual situation.

    • If you want to show it in a sidebar, please modify as follows.

      • From

          SlidesApp.getUi().showModalDialog(HtmlService.createHtmlOutput(html).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL).setWidth(400).setHeight(600), "sample");

      • To

          SlidesApp.getUi().showSidebar(HtmlService.createHtmlOutput(html).setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL));

    References: