Using Facebook Social Plugins

[BJ5]

Facebook has a number of handy plugins that you can use on your Weebly site, though it’s not immediately obvious where or what they are.  Check out this page for some of the embeddable plugins:

https://developers.facebook.com/products/social-plugins/embeds/

Using any of them on your site is pretty easy! For this post I’m going to show using the Facebook Page plugin.  This is a really convenient way to include Facebook Page timeline and events on a page of your Weebly site.

First, head over to this page in Facebook’s developer center.

https://developers.facebook.com/docs/plugins/page-plugin

You’ll see a simple form to fill out that will generate all the code you need. I used Weebly’s Facebook page for this example, entered a width and height, and checked/unchecked anything else that worked for what I wanted.  I’d recommend unchecking the “Adapt to plugin container width” option.  The way it functions is dependent on knowing the width of its container, and sometimes it can’t figure that out which means it doesn’t display.

Once you’ve got everything entered how you like, click the button to generate your code.  You’ll see two different blocks of code.

Copy the first chunk of code, then head to the editor and paste that into an Embed Code element on the very top of the page you want your feed on.

Now go back to Facebook and copy the bottom chunk of code.  Add a second Embed Code element on the same page you just added the first one, only make sure this one is below that one on the page.

That’s it! Publish your site, and take a look at the page you just embedded on your site!

[Erin6]

This is great! Thanks, BJ.

Also, in case anyone is using the Twitter feed tool from Twitter, I know they are having a bit of an issue with the feed having its side cut off. Please know that Twitter is working on this issue, and that you're not alone! It should be fixed soon.

Hurray for social integration!

[zipbangcrash]

Thank you!

This is absolutely GREAT.  I have added this plug-in to my site and I think people will love it!  I don't think I'd have figured it out on my own, so tutorials like this one are going to be amazingly helpful if they continue in this community.

Thanks Weebly team! You guys are doing something great here!

[SlamJamEventos]

Hi! I have a kind of problem with this FB social Plugin.... I did everything you say on your toturial but i cant made this work...

When i put the HTML code in my page it only shows  my Facebook page Name..

This is my web so you can check my problem

http://slamjamevento.weebly.com/

Sorry about my bad english..!!

[BJ5]

Your english is fine, don't worry!

I took at a look at your site and I see the plugin working fine for me.

Are you not seeing that?

[mcpa4you]

Thank you for the instructions! I am only getting the name of our Facebook Page to show up, and not the actual feed. Any advice? 

Our Page: http://www.mcpa4you.org/ 

I have the feed to the right of the picture slideshow about half way down the page 

[mcpa4you]

It's working now...kind of. Now I have two huge feeds on my page that say the don't connect to anything, but I can't seem to find an embedded codes anywhere on the page!

[KnovaGaming]

Hello OP,

So I've got the facebook blog plugin on my site, and for the weirdest reason i dont see the text from the comments. They are in the dark font color and i can't get them to turn light so you can view them. My theme is dark and I've tried changing things up on my theme but still can't make the comments visible with my dark theme. Any advise? Here is a link to my problem:

http://www.knovagaming.com/articles--videos3/knova-launches-new-website#comments

[Adam7]

---

@Knova wrote:

Hello OP,

So I've got the facebook blog plugin on my site, and for the weirdest reason i dont see the text from the comments. They are in the dark font color and i can't get them to turn light so you can view them. My theme is dark and I've tried changing things up on my theme but still can't make the comments visible with my dark theme. Any advise? Here is a link to my problem:

http://www.knovagaming.com/articles--videos3/knova-launches-new-website#comments

---

I'm not actually having any trouble seeing your comments:

[lightinthewomb]

I am only getting the name of my facebook page like others have mentioned. what did I do wrong??

www.lightinthewomb.com

[lightinthewomb]

nevermind...I see it now

[ACn1]

BJ

That was a nice clear explanation. Assuming as it is just embeding code that it would  work on a "designer platform" website.

Regards

ACn

[Adam7]

@BJ's methods should work just fine on a Designer site. @BJ's methods should work just fine on a Designer site.

[saintanthonypar]

Hi BJ,

I think I followed your instructions to the tee but my weebly site (http://www.saintanthonyparishsg.org/home.html) is not showing our FB (https://www.facebook.com/saintanthonyparishsg/) feed. Could you help us out?

Immanuel

[saintanthonypar]

We temporarily placed a screenshot image to link to our FB.

[Adam7]

Can you add the code back to a page of your site and publish, @saintanthonypar? I think it'll help to see it in action.

[saintanthonypar]

The codes are still there. <div id="fb-root"> is placed at the top, just below the header video. <div class="fb-page"> is just below the texts of our FB image.

[syd1]

Hello, 

I followed the instructions but it seems that only the header is showing on my weebly website. 

http://www.sweusc.com/events.html

[AndrewWbly]

Hello, this is a great article!

I’d like to add a few words about the extended Facebook plugins. They have a more attractive design and a larger number of feed settings. For example, you can try out this online demo https://elfsight.com/facebook-feed-widget/ and find it out for yourself.

The installation is the same as the author claims:

• Create the widget;
• Get the code;
• Install the code.

You will find a very detailed guide specifically for Weebly at https://elfsight.com/help/how-to-add-facebook-feed-to-weebly/.

[Adam7]

Thanks for sharing, @AndrewWbly!

[destinoidiomas]

Hi, it seems so easy but I have tried and cannot see it.

www.destinoidiomas.com

it should appear on home page side by side with Blog pic.

I placed first code at the very top of home page and then second code where I actually wanted plugin to appear, nothing happened, except that the Blog pic has moved to the left rather than centered, which means that there is something on its right (should be FB plug in)

I also tried placed both codes one after the other but FB plug in still not visible

Can you assist me on this? thanks in advance.