CODEWITHSUNDEEP
angularfacebookplugins
piotrneumann
piotrneumann

Reputation: 11

Angular problem with loading facebook page in component

I am trying to load Facebook plugin on my Angular 8 app in the home component. https://developers.facebook.com/docs/plugins/page-plugin

And for the first load home component everything works fine, but when I go to another route, and next go back to home the box of fb is empty.

My fb box

The content does not appear again

<div class="fb-page mx-auto border"
     data-href="https://www.facebook.com/tobagoaj/"
     data-tabs="timeline"
     data-width="500"
     data-height=""
     data-small-header="false"
     data-adapt-container-width="true"
     data-hide-cover="false"
     data-show-facepile="true">
  <blockquote cite="https://www.facebook.com/tobagoaj/" class="fb-xfbml-parse-ignore">
    <a href="https://www.facebook.com/tobagoaj/">Tobago - przyprawy i zioła</a>
  </blockquote>
</div>

Someone had similar problem, and could help me?

Upvotes: 1

Views: 939

Answers (3)

Eric Kwok
Eric Kwok

Reputation: 1

I meet the problem and have solved it based on schuno 's answer.

landing.component.html

<div
  class="fb-page"
  data-href="https://www.facebook.com/imdb"
  data-width="340"
  data-hide-cover="false"
  data-show-facepile="true"
></div>

LandingComponent:

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrl: './landing.component.scss',
})
export class LandingComponent {
  constructor(public common: CommonService, private el: ElementRef) {}

  ngOnInit() {
    if (FB != null && FB.XFBML != null) FB.XFBML.parse();
  }

  ngAfterViewInit() {
    const divTag = document.querySelector('#divTag') as HTMLElement;
    if (divTag) {
      this.common.replaceDivWithScript(divTag, this.el);
    }
  }
}

CommonService:

  replaceDivWithScript(divTag: HTMLElement, el: ElementRef) {
    const script = document.createElement('script');
    this.copyAttributesFromTemplateToScript(divTag, script);
    this.copyTemplateContentToScript(divTag, script);
    divTag.remove();
    el.nativeElement.appendChild(script);
  }

  copyAttributesFromTemplateToScript(
    divTag: HTMLElement,
    script: HTMLScriptElement
  ) {
    for (let a = 0; a < divTag.attributes.length; a++) {
      script.attributes.setNamedItem(divTag.attributes[a].cloneNode() as Attr);
    }
  }

  copyTemplateContentToScript(divTag: HTMLElement, script: HTMLScriptElement) {
    const scriptContent = document.createTextNode(divTag.textContent!);
    script.appendChild(scriptContent);
  }

Upvotes: 0

schuno
schuno

Reputation: 585

I had this same situation with the facebook page plugin in one of my components - this solution worked for me:

import { Component, OnInit } from '@angular/core';

declare var FB: any;

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() {}

  ngOnInit() {
    if (FB != null && FB.XFBML != null)
      FB.XFBML.parse();
  }

}

Upvotes: 1

codef0rmer
codef0rmer

Reputation: 10530

The solution is to manually initialize the FB page plugin.

This is to prevent any TS linting error while accessing window.FB

declare global {
    interface Window {
        FB: any;
    }
}

Then check if window.FB exists, especially truthy when navigate away and come back using Angular routes.

if (window.FB && window.FB.init) {
  window.FB.init({ status: true, xfbml: true, version: 'v5.0' });
} else {
  // original FB SDK script login goes here
}

Upvotes: 1

Related Questions