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 More about debugging.
page in Yandex.Webmaster.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.
Embedded comments
- On Facebook, get the comment link you want to add to the Turbo page.
- 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> ...
... <turbo:content> <![CDATA[ <iframe src="https://www.facebook.com/plugins/comment_embed.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck%2Fposts%2F10102577175875681%3Fcomment_id%3D1193531464007751%26reply_comment_id%3D654912701278942&width=560&include_parent=false&appId=603762189746032&height=148" width="560" height="148" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> ]]> </turbo:content> ...
Embedded posts
- On Facebook, get the post URL you want to add to the Turbo page.
- Generate the embed code using the code generator, manually, or get it directly from the post.
- 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> ...
... <turbo:content> <![CDATA[ <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2F20531316728%2Fposts%2F10154009990506729%2F&width=500&show_text=true&appId=603762189746032&height=308" width="500" height="308" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> ]]> </turbo:content> ...
Comments plugin
- 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/.
...
<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).
- On Facebook, configure the page and generate the embed code.
- 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> ...
... <turbo:content> <![CDATA[ <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=603762189746032" width="500" height="500" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> ]]> </turbo:content> ...
The “Like” button
- 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/.
- 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> ...
... <turbo:content> <![CDATA[ <iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=603762189746032" width="450" height="80" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> ]]> </turbo:content> ...
Video clips and video player
- 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/.
- 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> ...
... <turbo:content> <![CDATA[ <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Ffacebook%2Fvideos%2F10153231379946729%2F&width=500&show_text=false&appId=603762189746032&height=280" width="500" height="280" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" allowFullScreen="true"></iframe> ]]> </turbo:content> ...