guides

Facebook

Facebook offers Social Plugins for integrating into websites. You can use embed codes for adding content already published on Facebook, and you can enable the Facebook's SDK to enable more features on your site.

Using Embed Codes

Facebook uses iframes to embed content. To add content, you will need to include the iframe code in the text editor of the page you are editing. You can also embed the iframe in a Text Widget. To learn more about using iframes in Aurora, visit the IFrame Guide

To find the Embed code to use, open the menu in the upper right hand of the Facebook content, and select Embed.

Embed Example

 

Embed Example 2

Embedded Post

Embedded Posts are a simple way to put public posts - by a Page or a person on Facebook - into the content of your web site or web page. Only public posts from Facebook Pages and profiles can be embedded.

<iframe style="border: none; overflow: hidden;" 
src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fposts%2F1724631187547128&width=500" 
width="500" height="475" frameborder="0" scrolling="no"></iframe>

Embedded Video

With the embedded video player you can easily add Facebook videos and Facebook live videos to your website. You can use any public video post by a Page or a person as video or live video source.

<iframe style="border: none; overflow: hidden;" 
src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fvideos%2F1688010137875900%2F&show_text=0&width=560" 
width="560" height="311" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen"></iframe>

Embedded Comment

Embedded comments are a simple way to put public post comments - by a Page or a person on Facebook - into the content of your web site or web page. Only public comments from Facebook Pages and profiles can be embedded.

<iframe style="border: none; overflow: hidden;" src="https://www.facebook.com/plugins/comment_embed.php?href=https%3A%2F%2Fwww.facebook.com%2FUConn%2Fposts%2F1713005015376412%3Fcomment_id%3D1713032468707000&include_parent=false" width="560" height="181" frameborder="0" scrolling="no"></iframe>

Using Facebook SDK

Aurora has included an option to add additional Facebook Social Plugins under Settings > General > Enable Facebook SDK

For users comfortable with customizing html, Facebook Social Plugins online documentation has many options for configuring settings. Please be aware that if you use the Get Code button from the Code Configurators in the online documentation, you will not need to follow Step 1 or Step 2. Aurora will do these steps for you when the Enable Facebook SDK setting is enabled. You will only follow Step 3 to copy the configurated plugin to your site.

To add the following plugins configure your code and include it into the text editor of the wordpress page.

Like Button

A single click on the Like button will 'like' pieces of content on the web and share them on Facebook. You can also display a Share button next to the Like button to let people add a personal message and customize who they share with.

<div class="fb-like" 
data-href="http://aurora.uconn.edu/2017/08/08/facebook/" data-layout="standard" 
data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>

Share Button

The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.

<div class="fb-share-button" data-href="http://aurora.uconn.edu/2017/08/08/facebook/" data-layout="button_count"></div>

Send Button

The Send button lets people privately send content on your site to one or more friends in a Facebook message.

<div class="fb-send" data-href="http://aurora.uconn.edu/2017/08/08/facebook/"></div>

Save Button

The Save button lets people save items or services to a private list on Facebook, share it with friends, and receive relevant notifications. For example, a person can save an item of clothing, trip, or link that they're thinking about and go back to that list for future consumption, or get notified when that item or trip has a promotional deal.

<div class="fb-save" data-uri="http://aurora.uconn.edu"></div>

Follow Button

The Follow button lets people subscribe to the public updates of others on Facebook. Learn more about configuring the Follow Button here.

<div class="fb-follow" data-href="https://www.facebook.com/UConn" data-layout="standard" data-size="small" data-show-faces="true"></div>

Additional Social Plugins

Facebook has the following plugins also available when the SDK is enabled.

Page Plugin

The Page Plugin lets you easily embed and promote any Facebook Page on your website. Just like on Facebook, your visitors can like and share the Page without leaving your site. There are many available settings available to configure this plugin. You will have to enable the Facebook SDK from the admin panel and use an iframe.
Visit Facebook's Guide to Page Plugins to learn more.

<iframe style="border: none; overflow: hidden;" 
src="http://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fpg%2FUConn&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true" 
width="340" height="500" frameborder="0" scrolling="no"></iframe>

Quote

The quote plugin lets people select text on your page and add it to their share, so they can tell a more expressive story. Highlight any text on this page to see the Quote popup. To add this feature to your page, include the following html to the bottom of your page's content.

<div class="fb-quote"></div>

Comments

The option to allow a Facebook comment thread on your post is available. It is recommended that comment moderating is set up before implementing this feature. Check out Facebook's Guide to Comment Moderation.

<div class="fb-comments" 
data-href="http://aurora.uconn.edu/2017/08/08/facebook/" 
data-numposts="3"></div>