Social media (ie Facebook, Twitter, and Instagram posts), can be added to your site.  You can view a list of all the media available to be embedded at https://oembed.com/providers.json. 

You can add them directly to your site as you create content through fields and WYSIWYG text editors.

Facebook

How to embed a Facebook post on your website

  1. If you’re on your timeline (on your profile where you can see all of your posts), find the post you would like to embed
  2. THERE ARE THREE DIFFERENT WAYS TO DO STEP 3
    1. In the top left hand corner of the post, right click the date (or # of days/minutes since posted) of the post you would like to embed and select ‘Copy Link Address’
    2. If post has an image, click on the image of the post to see the full view and copy the URL
    3. If post does not have an image, click the three little dots in right hand corner of the post
      1. Select ‘Show in tab’
      2. In the popup window, click the settings icon in the top right corner and select ‘See full post’
      3. Copy URL of the full post
        1. Ex: https://www.facebook.com/itsuiowa/photos/a.866602790022409/2938371746178826/?type=3
  3. In Drupal, in the WYSIWYG, click the media icon on the toolbar
  4. In the header of the popup window, select ‘Facebook’
  5. Paste the URL you copied from Facebook in the Facebook* text box
  6. Select how wide you would like to display the post (ie ‘Display As *’)
  7. Select how you would like to align the post with ‘Align’
  8. You can add a caption that would appear on the bottom of the post you embed
  9. Save
  10. Note: while in the editing view of your node, you will only see a summary of the post‘Posted by: Name on Date’

How to make sure Facebook post is public

  1. Go to your post you would like to embed
  2. At the top of the post, there will be an icon with an arrow pointing downwards
    1. It is to the right of the clickable date link
  3. Click on the arrow and make sure you select the globe icon that says ‘Public’
 

Did you know the ITS Help Desk is open late Monday-Thursday? We're open from 8am-10pm to help answer any and all of your...

Posted by University of Iowa Information Technology Services - ITS on Wednesday, October 30, 2019

Twitter

How to make sure account is **NOT private**

  1. Login to your Twitter profile
  2. On the left hand side, click the … icon ‘More’
  3. Select the ‘Settings and Privacy’ option
  4. Select the ‘Privacy and Safety’ option
  5. Make sure ‘Protect your Tweets’ isn’t selected

How to embed a tweet in your WYSIWYG

  1. Click on the tweet you wish to embed for the full view
    1. You can also select the share icon then ‘Copy link to Tweet’
  2. Copy URL of the single tweet
    1. Ex: https://twitter.com/temiAlchemy/status/1150835103163133953
  3. In Drupal, on the WYSIWYG, click the media icon in the toolbar
  4. In the header of the popup window, select ‘Twitter’
  5. Paste the URL you copied from Twitter in the Twitter URL* text box
  6. Select how wide you would like to display the post (ie ‘Display As *’)
  7. Select how you would like to align the post with ‘Align’
  8. You can add a caption that would appear on the bottom of the post you embed
  9. Save

 

Instagram

How to make sure account is **NOT private**

  1. Login to your Instagram profile
  2. Go to your profile page
  3. Select the ‘Settings’ icon
  4. Select ‘Privacy and Security’
  5. Make sure the ‘Private Account’ isn’t selected

How to embed an Instagram post in your WYSIWYG

  1. Click on the post you wish to embed
  2. Click on the three dots in the upper right corner
  3. Select ‘Copy Link’
    1. Ex: https://www.instagram.com/p/B0CI72fHXnd/
  4. In Drupal, on the WYSIWYG, click the media icon in the toolbar
  5. In the header of the popup window, select ‘Instagram’
  6. Paste the URL you copied from Instagram in the Instagram* text box
  7. Select how wide you would like to display the post (ie ‘Display As *’)
  8. Select how you would like to align the post with ‘Align’
  9. You can add a caption that would appear on the bottom of the post you embed
  10. Save

Note: will only see the outline of the Instagram post in your editing view