Facebook Page widget - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

May 23, 2018 at 4:00 pm #960888

Hallo Kriesi Team!

Vielen Dank für Euer letztes Update. Ich habe eine Frage zum Facebook widget. Ihr ermöglicht die Einbindung einer Facebook Like Box nach Bestätigung des Users. Ist es auch möglich das “Facebook Page Plugin” entsprechend mit Timeline einzubinden?

Ich hatte das bislang als 1/4 Column per iFrame im Code Block eingebaut. Jetzt bräuchte es allerdings eine “Click-to-load” Lösung, um nicht gleich Daten an Facebook zu übertragen.

Vielen Dank,
Aljoscha

May 25, 2018 at 3:42 pm #962215

Ismael

Moderator

Hey Aljoscha,

Thank you for using Enfold.

This feature is not available in the theme yet, unfortunately. You can find the fb widget script in the framework > js > conditional_load > avia-facebook-front.js file in case you want to modify it.

Best regards,
Ismael

July 3, 2018 at 2:15 pm #980577

Aljoscha23

Participant

Dear Ismael,

thanks for your reply. I have now built my own work around using an iframe in a code block.

For those interested, here’s the solution:

I’m displaying a html file in an iframe to load a screenshot of the page-plugin with an overlay:


<iframe src="(...)/fb-click-page.html" width="xxx" height="yyy" style="border:none; overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>

The html looks like this:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
  position: relative;
  width: 100%;
}

div a {
    display: block ;
    height: 100% ;
}

.image-script {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #f3e417;
}

.container:hover .overlay {
  opacity: 1;
}

.text-large {
  color: black;
  font-size: 20px;
  font-family: Helvetica,Arial,sans-serif;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.text-small {
  color: black;
  font-size: 12px;
  font-family: Helvetica,Arial,sans-serif;
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

</style>
</head>
<body>
<div style="position: absolute; left: 0px;top: 0px; z-index: -1;" class="container">
  <a href="(...)/fb-plugin/"><img src="(...)/fb-click-banner.jpg" width="xxx" height="yyy"  class="image-script">
  <div class="overlay">
    <div class="text-large">Klicken Sie, um das Facebook-plugin zu aktivieren!</div>
    </a>
    <div class="text-small">
      <b>Datenschutzhinweis:</b>
      <p>Beim Klick auf das Bild werden Daten an Facebook übertragen. Weitere Informationen erhalten Sie in unserer <a target="_parent" href="/datenschutz">Datenschutzerklärung</a>.
    </div>
  </div>
</div>
</body>
</html>

On clicking the overlay the fb-plugin page is load via yet another html file:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Load FB-Page Plugin</title>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div style="position: absolute; left: 0px;top: 0px; z-index: -1;">
  <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F(...)&tabs=timeline&width=xxx&height=yyysmall_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" width="xxx" height="yyy" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</div>
</body>
</html>

There’s a few minor issues with this workaround, as the facebook page-plugin is not responsive. Thus, once the iframe container becomes smaller than the loaded plugin, it is cut off at the sides. As I’m using it in a roughly 500px block it works well, as most devices provide 500px width.

Best regards,
Aljoscha

This reply was modified 6 years, 5 months ago by Aljoscha23.

July 4, 2018 at 6:57 am #980935

Rikard

Keymaster

Hi Aljoscha,

Great, glad you found a solution and thanks a lot for sharing, much appreciated :-)
Please let us know if you should need any further help on the topic.

Best regards,
Rikard

July 11, 2018 at 3:18 pm #984254

Aljoscha23

Participant

Thank you!

/close

July 12, 2018 at 6:19 am #984510

Rikard

Keymaster

Hi,

Thanks for the feedback. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard