1. Home
  2. Knowledge Base
  3. Build a website with SiteBuilder/ShopBuilder
  4. Add Facebook buttons or messages to a Sitebuilder website

Add Facebook buttons or messages to a Sitebuilder website

The Embed widget in the Social media section is similar to the HTML code widget.

The Embed widget

It is essentially a code editor. The only difference is it will offer you direct access to the webmaster/developer tools of different social media sites and apps. It will allow you to:

  1. Integrate a Like, Share, Recommend, Send in Message or Follow Page Facebook button on your site
  2. Embed a Facebook post, video or entire page
  3. Embed Facebook feed
  4. Add a Google +1 tag
  5. Add a Google+ Follow Page button
  6. Integrate a Google+ badge
  7. Integrate a Google+ share button
  8. Embed a Twitter timeline of the tweets you have posted, your favourite tweets, the tweets of accounts in your lists, the results of a particular search or the ones you have included in your collections.
    Facebook Plugins
    Twitter feed
    Google+ button

To place the widget in your layout navigate to the ‘Social’ panel. Drag and drop the ‘Embed’ widget on your layout. That will open the ‘Edit:Embed’ area.

Drag and drop the ‘Embed’ widget on your layout
Edit Embed

To open the Facebook Platform Social Plugins page click on Facebook Plugins. The Facebook developers platform will open in a new tab.

Like, Share and/or Recommend buttons

Tip: The same buttons can be included easily using the Facebook Like widget from the Social panel in your Sitebuilder backend. Using the Embed widget will give you more control.

Facebook Like Widget
Edit: Facebook Like

What it does: Viewers of your site click on the Like button you have integrated and automatically share on their Facebook profiles they like or recommend your page! The post goes on their Facebook wall together with an attractive image and a link to your site!

Example Like Button

  1. In the Facebook Platform Social Plugins page scroll down to Like, Share & Send Button section
  2. In the Like Button section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Like Button Configurator
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Publish to see the change.

Share button

Tip: You can use the Share function of the Like button. The Share button offers more shares count visualization options.

Facebook Like
Edit Facebook Like

What it does: The Share button invites the viewers of your page to share it on their Facebook timeline, or in a private message. It shows the number of times your page has already been shared on Facebook.

Example Share Button

  1. In the Facebook Platform Social Plugins page scroll down to Like, Share & Send Button section
  2. In the Share Button section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Share Button Configurator
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Publish to see the change.

Send button

What it does: The Send button invites the viewers of your page to send it through the Facebook messenger to a group, a friend or themselves.

Example Send Button

  1. In the Facebook Platform Social Plugins page scroll down to Like, Share & Send Button section
  2. In the Send Button section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Publish to see the change.

Embedded Posts

What it does: Embed a particular Facebook post in your website – yours or someone else’s.

Example Embedded post

  1. In the Facebook Platform Social Plugins page scroll down to Embedded Posts & Video Player section
  2. In the Embedded Posts section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Code generator
    1. Tip: To find the Facebook post URL you need just find the post and open it in a new tab or window. You should be able to do that by clicking on the time stamp. Copy the URL from the address bar.Facebook post URL
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Tip: You can use the Columns widget to centralize the postColumns
  8. Publish to see the change.

Embedded Video Player

What it does: Embed a video posted by you or someone else on Facebook in your site. The so embedded video has a Like button, a Share button, a link to your Facebook video post, and a link to your Facebook page! It is a great way to assert your social media presence.

Example Embedded Video

Tip: If you would like to embed a video, uploaded to YouTube use the Media >> YouTube widget instead.

  1. In the Facebook Platform Social Plugins page scroll down to Embedded Posts & Video Player section
  2. In the Embedded Video Player section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Code Generator
    1. Tip: To find the Facebook video URL you need just find the post and open it in a new tab or window. You should be able to do that by clicking on the time stamp. Copy the URL from the address bar.Facebook video URL
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Tip: You can use the Columns widget to centralize the postColumns
  8. Publish to see the change.

Page Plugin

Tip: The same functionality is achieved easily by using the Facebook Feed widget from the Social panel in your Sitebuilder backend. Using the Embed widget will give you more control.

Facebook Feed

What it does: The Page Plugin tool allows you to integrate your full Facebook page in a window on your website. Visitors can therefore interact with your Facebook page without leaving your site.

Example Page Plugin

  1. In the Facebook Platform Social Plugins page scroll down to Page Plugin section
  2. In the Page Plugin section click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Form/settings
    1. Tip: To find the Facebook page URL you need just open the page and copy the URL from the address bar.Facebook page URL
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Tip: You can use the Columns widget to centralize the postColumns
  8. Publish to see the change.

Comments

Tip: The same functionality is achieved easily by using the Facebook Comments widget from the Social panel in your Sitebuilder backend. Using the Embed widget will give you more control. The Facebook Application ID is the part of your page URL after https://www.facebook.com/ Do NOT use the Facebook Page ID

Facebook Comments

What it does: The widget creates a field on your site where the last several comments left from visitors are visualized.

Example Comments

  1. In the Facebook Platform Social Plugins page scroll down to Comments section
  2. Click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Comments Plugin Code Generator
    1. Tip: To find the Facebook page URL you need just open the page and copy the URL from the address bar.Facebook page URL
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Tip: You can use the Columns widget to centralize the postColumns
  8. Publish to see the change.

Follow Button

What it does: Integrate a Follow Button on your site so your fans can subscribe to your Facebook page’s feed, or just to show off the number of followers you already have.

Example Follow Button

  1. In the Facebook Platform Social Plugins page scroll down to the Follow Button section
  2. Click on the Web button
  3. Fill in the form and adjust your settings until you like what you see in the preview box.Form/settings
    1. Tip: To find the Facebook page URL you need just open the page and copy the URL from the address bar.Facebook page URL
  4. Click on Get Code. That will generate the JavaScript/html code.
  5. Back in the Sitebuilder backend the Embed widget code editor should still be open. Copy the first and second sets of code one after the other.
  6. Click on Submit.
  7. Tip: You can use the Columns widget to centralize the postColumns
  8. Publish to see the change.

То explore other Facebook options visit https://developers.facebook.com/

Updated on 3 September 2020

Was this article helpful?

Related Articles

Comments

Comments are closed.