Home » Uncategorized » How do I add a Facebook Like button to a webpage or story page?

How do I add a Facebook Like button to a webpage or story page?

There are two steps involved in adding a Facebook Like button to a webpage or story page: first you must add the Facebook Element content type and then you must complete the Open Graph tags.

  1. Click on “Add” in the “Edit Console.”
  2. Select “Facebook Element” from the list of content types.
  3. Enter the URL of the webpage or story page you want to “Like.”
  4. Under “Type,” select “Like Button” from the drop down menu.
  5. Choose the “Layout,” “Button with count inside.”Facebook Element Like Button
  6. “Save.”

Now you will see the Facebook Like button appear on your webpage or story – but it’s only the first step. In order for Facebook to figure out what your webpage or story is all about, you’ll have to add Open Graph Tags. Luckily, adding these tags only takes about 5 minutes of your time.

  1. Here’s the tricky part. You’ll need to enter the Open Graph Tags in different areas depending on whether you’re editing a webpage or a story page. If you’re editing a webpage, click on “Settings” in your “Edit Console.” Scroll down and click on “Meta-tags.” Meta tags for webpages OR If you’re editing a story page, click “Edit” story at the bottom of the page before the share and comment area. Scroll down through the editing interface and click on the “Meta tags” menu.Meta tags for stories
  2. A new menu will open and you’ll see lots of options. The first thing you’ll want to do is ignore the “Meta Description” option, unless you’d like to take the time to set your webpage’s meta description for Google search.
  3. You only need to add the following tags: Open Graph Title, Open Graph Type, Open Graph URL, Open Graph Image, and Open Graph Description.
  4. The “Open Graph Title” is simply the title of your webpage or story.
  5. The “Open Graph Type” will always be “website.”
  6. The “Open Graph URL” will always be the URL of your webpage or story page.
  7. The “Open Graph image” is the URL of the photo in the right hand corner of your webpage or story page.
  8. The “Open Graph Description” is a short intro to the web content. If you’ve written a good opening paragraph to your webpage, or a good teaser to your story, simply copy and paste that to the Open Graph Description field.Facebook Open Graph tags
  9. “Save.”
Sites DOT MIISThe Middlebury Institute site network.