Follow

How to Embed a Widget on your Facebook Page

If you would like to embed a WidgetMakr widget onto your Facebook Page, the only way is to create a custom Tab. Facebook Tabs are the row of buttons that are located under the cover photo/graphic for your Page. They also appear as their own section on the left side of your Timeline.

Facebook Tabs allow you to embed third-party content such as donation and sign-up forms, videos, contests, Instagram, Pinterest, Twitter, and RSS feeds as an iframe into your Facebook page. To create a custom Tab, you’ll need a third-party Page App such as Static HTML or Tab Factory, which both offer free and premium plans.

Note: Over the past few years, Facebook’s steps for creating a custom Tab have become more complicated and require a little more tech-savviness than the average Facebook user has. If you run into any challenges, we encourage you to contact your website developer.

Set Up Your Facebook Tab
1. Chose which third-party app for adding Tabs to Facebook Pages that you want to use and follow the directions for connecting the app to your Facebook Page. Note: For the examples below, this guide will use Static HTML.

2. Once you have logged into the third-party app and connected it to your Facebook account, select the Page where you want to add the Tab.




3. Static HTML should open in a new browser. On the Tabs page, click on the orange  button to create a new Tab.

4. Enter the name of your Tab and customize by choosing the background colors. When finished click on the white Add tab now button.



5. Once the Tab is created, click on the green button. Static HTML will automatically redirect you back to your Facebook Page.

6. Click on the green button .

7. Next, a new window will open with an HTML Editor, where you will enter the code for the WidgetMakr widget you wish to embed.

8. In a separate browser tab or window, log into your WidgetMakr account, open up the widget you wish to embed, and click on the Edit link.




9. Under Step 1: Make a Widget, click on drop-down menu under Multi-Step Alignment, which is located on the right column, select Inline and click on the orange Next button when done. Continue clicking through the steps and save your widget.



10. Once you arrive at the embed page, copy the code to your clipboard.

11. Return to the browser tab with Static HTML and paste the code into the HTML editor. If you wish to add any additional text or headlines, this is where you need to add it.



12. Click on the blue Save & Publish button. Once the code is saved, click on the green Preview button. A pop-up of your Facebook Page should appear.

13. Click through your widget to test it. If it is correct, click on the orange  button in the top-right hand corner.



If you need to make any adjustments to the code, click on the orange button to return to the HTML editor. Make your changes before hitting the Save & Publish button to save your edits.

14. Your Tab should now be live and connected to your Facebook Page.

Change the Order Your Tabs Appear
Back on your Facebook Page, you can change the order of the Tabs that will appear in two different places. (You can prioritize the order of the apps that follow the About link.)



1. Click on the More button for a drop-down menu. You’ll see any additional Page Apps that you have added to the Facebook Page. At the bottom, you should see the Manage Tabs option.

2. A pop-up window should appear that gives you the option to re-order the Tabs. Drag-and-drop the Tabs into the order that you want and click on the blue Save button. Your Facebook Page will refresh and the new order should be displayed.
Note: Facebook will not allow you to place a Tab before About.



3. The Apps will also appear in this order under the App Section on the left side of your page.

Change the Tab’s Graphic
A graphic associated with your tab will display in the App Section of your Facebook page (found on the left side of your timeline). You can customize this Section by uploading graphics that are 111x74 pixels.



1. Click on the Settings button, which is located at the top of your page on the right side (above the cover photo).



2. Click on Apps, which is located on the menu on the lower left-hand side of your screen.



3. A pop-up window should appear that lists the Apps connected to your Page. Click on the Edit Settings link.



4. Another pop-up window will appear giving you the option of renaming the Tab or uploading a Custom Tab Image. Click on the Change link to upload a new graphic.

5. A new browser tab will open. Click on the blue square to upload an image from your computer.

6. Next, click on the  button to upload the file.

7. The file should upload and automatically appear. If you are happy with the appearance of the image, click out of that browser tab.



If you wish to edit the image, click on the upper right-hand corner of the graphic until you see an Edit button. This will allow you to upload a different image.

8. Next, you should return to the browser tab with the window below. Click on the OK button to save your changes.



9. Once you have returned to Settings, click on Page in the upper left-hand corner to return to your Facebook Page and see your changes.  

Rename a Tab
If you wish to change the name of your Tab, follow the same steps listed below.


1. Click on the Settings button, which is located at the top of your page on the right side (above the cover photo).



2. Click on Apps, which is located on the menu on the right-hand side of your screen.

3. A pop-up window should appear that lists the Apps connected to your Page. Click on the Edit Settings link.

4. Another pop-up window will appear giving you the option of renaming the Tab or uploading a Custom Tab Image. Type in the new name of your Tab in the empty field.

5. Click on the blue Save button and then click on OK. The name of your Tab should be updated.

Remove a Tab
To remove a Tab, click on the More link, which is underneath the cover photo/graphic. Select the last option on the drop-down menu, Manage Tabs.



1. Click on the Add or Remove Tabs button when the pop-up window appears.

2. Select which App you would like to remove by click on the blue  button.




3. A window will appear verifying that you want to remove the App. Select the blue  button. When the Facebook Page refreshes, the App should no longer appear.



Note: WidgetMakr does not support Facebook, so if you have any questions beyond this guide, please see Facebook’s Help Center.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request
Powered by Zendesk