Adding Facebook content to the Turbo page

You can place embedded Facebook content on the Turbo page:
  • Embedded comments. You can add public comments to a Facebook post published on behalf of your Page or user to the Turbo page.
  • Embedded posts. You can add public Facebook posts published on behalf of your Page or user to the Turbo page.
  • Comments plugin. It allows users to comment on the content of your pages.
  • Plugin “Page”. It lets you embed and promote a public Facebook Page. Users can view and share the page when viewing your site's Turbo page.
  • The “Like” button. Lets the users mark the Turbo page content and share it on Facebook.
  • The “Share” button. It lets users add messages to links that they want to post in the Timeline and groups, or send via Facebook Message.
  • Video and videoplayer. Helps the users add video clips and live broadcasts published on Facebook on behalf of the Page or user.

After adding the embed code to the RSS feed, check how the content is displayed on the Turbo page. You can do this on the Turbo pages for content sites → Debugging page in Yandex.Webmaster. More about debugging.

Note.

When setting up the widget, configure links to open in a new tab (target="_blank"), otherwise there is a risk that the user won't be able to open the link.

Example of the problem in Chromium

Embedded comments

  1. On Facebook, get the comment link you want to add to the Turbo page.
  2. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-comment-embed"...></div>:

    ...
        <turbo:content>
            <![CDATA[
                <div class="fb-comment-embed" data-href="https://www.facebook.com/zuck/posts/10102577175875681?comment_id=1193531464007751&reply_comment_id=654912701278942" data-width="560" data-include-parent="false"></div>
            ]]>
        </turbo:content>
    ...

Embedded posts

  1. On Facebook, get the post URL you want to add to the Turbo page.
  2. Generate the embed code using the code generator, manually, or get it directly from the post.
  3. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-post"...></div>:

    ...
        <turbo:content>
            <![CDATA[
                 <div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500" data-show-text="true"><blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore">Posted on<a href="https://www.facebook.com/facebook/">Facebook</a> <a href="https://www.facebook.com/20531316728/posts/10154009990506729/">August 27, 2015</a></blockquote></div>
            ]]>
        </turbo:content>
    ...

Comments plugin

  1. Choose the source page of the site for which the Turbo page is generated and where you want to place the comments plugin. For example, https://example.com/page/.
  2. Add the <div class="fb-comments"...></div> to the <![CDATA[]]> tag inside the turbo:contentelement.
...
    <turbo:content>
        <![CDATA[
            <div class="fb-comments" data-href="https://developers.facebook.com/docs/plugins/comments#configurator" data-width="320" data-mobile="true" data-numposts="5"></div>
        ]]>
    </turbo:content>
...

“Page” plugin

When the plugin is added to the Turbo page, all Facebook options are supported (adding tabs, call-to-action buttons and so on).
  1. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-page"...></div>:

    ...
        <turbo:content>
            <![CDATA[
                <div class="fb-page" data-href="https://www.facebook.com/facebook" data-tabs="timeline" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/facebook" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook">Facebook</a></blockquote></div>
            ]]>
        </turbo:content>
    ...

The “Like” button

  1. Choose the source page of the site that the Turbo page is generated for and where you want to place the button. For example, https://example.com/page/.
  2. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-like"...></div>:

    ...
        <turbo:content>
           <![CDATA[
              <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
           ]]>
        </turbo:content>
    ...

The “Share” button

  1. Choose the source page of the site that the Turbo page is generated for and where you want to place the button. For example, https://example.com/page/.
  2. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-share-button"...></div>:

    ...
        <turbo:content>
            <![CDATA[
                <div class="fb-share-button" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-size="small" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse" class="fb-xfbml-parse-ignore">Share</a></div>
            ]]>
        </turbo:content>
    ...

Video clips and video player

  1. Choose the source page of the site that the Turbo page is generated for and where you want to place the button. For example, https://example.com/page/.
  2. Add the embed code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the <div class="fb-video"...></div>:

    ...
        <turbo:content>
           <![CDATA[
              <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false"><blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a><p>How to share with just friends.</p>Posted on <a href="https://www.facebook.com/facebook/">Facebook</a> December 5, 2014</blockquote></div>
           ]]>
        </turbo:content>
    ...