Social Media Widgets: Facebook and Twitter Timelines

Social Media Widgets: Facebook and Twitter Timelines

Both Facebook and Twitter offer simple ways to generate the code needed to display your timeline on your site. 

These are visible throughout your site when added to the sidebar content. Check out the documentation on 3rd party embed code for more info on editing your sidebar content: https://my.lwv.org/mylo/embedding-videos-forms-paypal-3rd-party-code

Have your Facebook and Twitter URLs copied and ready to paste. Visit your public social media pages to find your Facebook and Twitter URLs. For example, LWVUS' social media URLs are:

For each social media site, they provide their own set of instructions, which we've outlined here.

When working with HTML embed code within your MyLO site, it's important to remember to use the Full HTML text editor instead of WYSIWYG. This will ensure your widgets appear properly.

Steps to Embed Facebook Timeline

  1. Visit the Page Plugin.
  2. Enter your League’s Facebook Page URL in that field (replace the default value pictured). 
  3. OPTIONAL: Select your preferences, for example Tabs, Width, and Height of the output display. The Page Plugin, by default, will adapt to the width of the device being used to view the site (i.e. phone, desktop). 
  4. Click Get Code
  5. Copy the code from the pop-up window. 
  6. In a new tab, travel to your MyLO site and make your way to the page you want to add this code to and start a new draft or edit the existing one (i.e. to display in the sidebar, edit your homepage).
  7. Paste the code into your sidebar, or anywhere else on your website. Be sure you've copied/pasted all parts of the code (if there are two chunks of code, copy/paste both) into the same place.
  8. Save your changes.

These instructions were adapted from TeamUnify Support Docs.

Steps to Embed Twitter Timeline

  1. Go to https://publish.twitter.com/.
  2. Enter the URL of the timeline or Moment you’d like to embed.
  3. Choose your display option (Embedded Timeline displays your entire scrollable timeline).
  4. Customize the design by specifying the widthheight (we recommend 1000 to prevent a very widget), and theme (light or dark) to match your website. 
  5. Click Copy Code to automatically copy the code to your clipboard.
  6. Travel to your MyLO site and make your way to the section where you want to display this widget and start a new (or edit) draft (i.e. to display above your Calendar, edit your League's Headers).
  7. Paste the code into your website wherever you would like the timeline to appear (i.e. sidebar content).
  8. Save your changes.

These instructions were adpated from Help.Twitter.com

Tips and Troubleshooting

  • Adding these widgets to your sidebar makes them visible throughout your entire site. To reach your sidebar content, start a new (or edit the existing) draft of your homepage.
  • Your widget(s) may be off-center; you can fix this by centering your code. When adding embed code to the sidebar, center the widget by adding in <center> tags. At the start of the embed code type <center> and after it type </center> so the entire embed code is enclosed within these <center> tags.
  • If your widget won't display, be sure the text editor (found under the textbox) is set to Full HTML:using Full HTML for the text editor
    • If the text editor is set to WYSIWYG, the widget will display on the editing form, but won't display on the content after saving.
  • If your widget won't display, try publishing your latest changes. This will expecially work if you've added the code to your sidebar and don't see it yet on your front page.

Examples of Each Embedded Timeline

This is the LWVUS Twitter timeline, with only the height (at 1000) specified. This timeline adapts to the full-width of the content space. (not centered)

This is the LWVUS Facebook timeline, with no customization options specified. This timeline adapts with the width of the viewing device. (not centered)

MyLO FAQ Category: