Streaming live at 10am (PST)

Facebook feed integration


#1

Continuing the discussion from About the Embed Help category:


Webflow and the facebook timeline
How to make an image the default for social site sharing?
#2

Great. How do I go about adding a facebook feed?


Facebook feed integration
#3

What exactly do you mean? A feed dialog, so you can add posts directly from your website to your Facebook? Or a facebook-content box that will be showing facebook feed on your Webflow-website?

https://developers.facebook.com/docs/plugins/activity/


#4

No, I want to embed my facebook feed/timeline (list of posts) in a page on my site. I am assuming its some kind of iFrame?


#5

Hi @Greg_Hart, Facebook actually doesn't allow this frowning

See their developer site for the available embeds: https://developers.facebook.com/docs/plugins/embedded-posts

Both the Embedded Posts (individual posts) and Activity Feed (feeds for applications, not profiles or business pages) are probably not what you're looking for :\

Edit: Looks like I was wrong, sorry guys >_<


#6

I have a business facebook page which I post a lot of relevant news articles to. If I could embed it it would save me having to add them to my website as well. Is there a news/blog type plugin that you know of that works well with webflow?


#7

I am actually doing this on another site (not built in webflow) works well see: http://www.donaldreid.co.nz/


#8

See https://www.facebook.com/help/443483272359009


#9

Easy, just add the following:

Paste inside "Custom Code" just before body tag:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

On your page select "Elements" select HTML Embed, paste the following code and edit the relevant detail to point to your Facebook page, choose width & height:

<style type="text/css">
@media only screen and (max-width: 767px) {
.fb-comments{width: 100% !important;}
.fb-comments iframe[style]{width: 100% !important;}
.fb-like-box{width: 100% !important;}
.fb-like-box iframe[style]{width: 100% !important;}
.fb-comments span{width: 100% !important;}
.fb-comments iframe span[style]{width: 100% !important;}
.fb-like-box span{width: 100% !important;}
.fb-like-box iframe span[style]{width: 100% !important;} }
</style>

<div class="fb-like-box" data-href="https://www.facebook.com/yourpagenamehere" data-width="940" data-height="1500" data-colorscheme="light" data-show-faces="false" data-header="false" data-stream="true" data-show-border="false"></div>

(The css makes the Facebook frame responsive)


#10

Hi thanks for this, but I am having trouble with the custom code in the body tag. Getting the following errors which wont allow me to save.

Line 0 column 7: Unexpected character after / in tag. Expected >.
Line 0 column 7: Unexpected character after / in tag. Expected >.
Line 5 column 34: Unexpected character after / in tag. Expected >.
Line 5 column 40: Unexpected character after / in tag. Expected >.
Line 5 column 53: Named entity expected. Got none.
Line 5 column 63: Unexpected character in unquoted attribute
Line 5 column 68: Unexpected character in unquoted attribute
Line 7 column 11: Unexpected character after attribute name.
Line 7 column 19: Invalid character in attribute name.
Line 7 column 21: Unexpected character after attribute name.
Line 7 column 37: Invalid character in attribute name.
Line 7 column 42: Unexpected character after / in tag. Expected >.
Line 7 column 49: Expected closing tag. Unexpected end of file.


#11

I made tweak with an incorrect " - copy and paste the above code again (works fine, tested)


#12

Okay I added the first code fine. I cant get the fb feed to show up. I created a div block on my page, embedded the html with fb pages details changed. Once published the page is blank.

Here is the public link
https://webflow.com/design/worksiteconnect?preview=d3d0ff0a080d2e9523dd8a8d72f86bbc

The page I am trying this on is /safety-news

The facebook page is https://www.facebook.com/worksiteconnect


#13

You jut need to add the end quote after your FB page name. (I've updated code above to reflect this)


#14

Thanks man, works well. I am a happy camper!


#15

The code above still works but I am now finding my FB feed is only 500 px wide. Any ideas (I assume FB have made a change at their end)


#16