Adding content from the Facebook social network to the Turbo page

You can place embedded content from Facebook 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 → Debugging page in Yandex.Webmaster. More about debugging.

Embedded comments

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

    Add the code <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 URL of the post 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 code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the code <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">Published<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 code <div class="fb-comments"...></div> в тег <![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 code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the following code <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 for which the Turbo page is generated and where you want to place the button. For example, https://example.com/page/.
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the following code <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 for which the Turbo page is generated and where you want to place the button. For example, https://example.com/page/.
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the code <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 for which the Turbo page is generated and where you want to place the button. For example, https://example.com/page/.
  2. Add code to the <![CDATA[]]> tag inside the turbo:content element.

    Add the following code <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>Published <a href="https://www.facebook.com/facebook/">Facebook</a> December,  5 2014</blockquote></div>
           ]]>
        </turbo:content>
    ...