In This Article:

    Multiple OpenGraph meta tags sets in one template

    In This Article:

      Introduction

      When you or your supporter pastes a link into Facebook, wouldn't it be cool if the link went onto their timeline with an icon and text that you write?  This article shows how to do just that and suggests a way to manage the the Facebook OpenGraph <meta> tags that make the fancy stuff happen.

      If you want to put OpenGraph <meta> tags into your template Right Now and don't have the time to read this article, then you can use this page. Come back to this article when the emergency is over to learn more about how to manage those <meta> tags.

      Audience

      • Campaign managers who modify templates
      • Developers who modify Salsa templates
      • SalsaScript experience is very helpful.
      • Javascript experience is required. 

      Difficulty: +5

      • This article contains SalsaScript that needs to be modified by the campaign manager. An experienced campaign manager will find this article very challenging.

      Caveats

      • This article contains samples that are customized for my actions. Copying and pasting the samples without modifying them will not work.
      • This article contains SalsaScript. It is relatively easy to make a big hash of your template if you make a mistake. Copy and paste carefully.  If you find that SalsaScript is outside of your scope, then (1) stop and (2) send an email to developers@salsalabs.com to get help.
      • For best results, please read the links in the Background section.

      Background

      When a URL gets pasted into Facebook, a parser scans the contents of the URL for <meta> tags that use the OpenGraph namespace. The namespace is embedded in the <meta> "property" attribute, and contains "og:".  Here's an example:

      <meta property="og:title" content="Save the Whales!"/>

      Details about the OpenGraph meta tags can be found on the Facebook OpenGraph Developers site. There are tons of other sites on the web that offer examples and advice about using OG tags in your website. However, if you just need a quick summary of the OG tags and what they do, then this is a great site.

      A few very important things that you need to know about <meta> tags before we get into the details:

      • <meta> tags must be embedded in the head part of the page (between <head> and </head>)
      • <meta> tags are read only once by browsers and by Facebook
      • <meta> tags can be overwritten.  If you have two og:title meta tags, then the second one wins and the first one is completely forgotten.
      • Browsers and Facebook do not apply Javascript when <meta> tags are read.  Any of the usual tricks for changing a page's content with Javascript do not apply
      Motive

      Adding Facebook OpenGraph tags to, say, an action page, involves these steps:

      1. Copy a template to use for a single page
      2. Modify the template with OG <meta> tags for that page
      3. Assign the template to the page
      4. Publish the page

      (Do you just want to fix up a template for a single page? Please click here...)  

      After doing this for a bunch of action and donation pages, the end result will be lots and lots of single-use templates -- a management nightmare. If you needed to assign a template Right Now, then you would have to scroll through tons of templates, most that look exactly alike, to find the template that you need.

      The solution is a single template that contains all of the Facebook OpenGraph tags for all actions.  The template would figure out which page is being used, and the supply the OG tags for the page. To sweeten the deal, if the template is assigned to a page that does not need meta tags, then it would behave like a normal template.

      The rest of this article shows out to build a template that does just that.

      Example

      Let's start by using an action page that has working OpenGraph <meta> tags in it.  Please click here to view the action.  It's not much of an action on purpose.

      Next, copy the URL for the action, and then post it on Facebook.  When you submit it, you'll see something like this:

        "Save The Whales" Facebook Post

      This post was generated these using OG <meta> tags:

      Please refer back to this example if you have any questions about how the metatags probably should appear for a Salsa page.

      One-time Setup

      What you will need

      1. A template to host the OG <meta> tags for one or more actions.
      2. Actions, events or donation pages that you need to publicize on Facebook.
      3. The following information for each page to publicize:
      • An image that's at least 200x200 pixels for the page or for your organization
      • A title to show in the post
      • Your organization's name or abbreviation
      • A brief description of the page that will make folks want to click the link

      Process

      Use these steps to set up the SalsaScript that will manage your OpenGraph tags.  This needs to be done only once per template.

      When you are done, the template will load exactly the same as before.  You can confirm this by viewing a page that uses the template.

      1. Edit the template.
      2. Locate the <head> tag in the template.
      3. Insert a blank line right after the <head> tag.
      4. Click here to see the page where the script lives.
      5. Click the Raw button.  A window will appear that contains just the script.
      6. Copy the contents of the window and close it.
      7. Return to the template editor.
      8. Paste the script in the newly created line in the template.
      9. Save the template.

      Now the template has the framework that it needs to support OpenGraph <meta> tags for as many pages as you'd like.  Use the next step for each page that will have OG <meta> tags.

      Per-page Setup

      Caution!

      This is the hard part of this article.  If there is a mistake in the SalsaScript, then no permanent damage will be done, but your template will not display correctly.  Please follow these steps carefully. 

      If you find that SalsaScript is outside of your scope, then go to the Questions section at the bottom to get help.

       What you will need

       You will need the following information for each of the pages that you want to add OG <meta> tags to

      1. The kind of page (action, donation, etc.)
      2. The KEY for each page.  The KEY can be found in the browser's address bar when you edit the page.
      3. The OG <meta> tags that you want to include for the page.  There's some excellent documentation here that can help with that here.

      Technical Stuff

      • The code in the one-time setup examines the page URL for one of the standard page types (action, donation, etc.). If one is not found, then no OG <meta> tags are added.
      • Next, the code looks for a match on the KEY value (that is, the KEY value matches one of the KEYs that you've configured).  If that happens, then OG <meta> tags are not inserted.
      • If there are not OG <meta> tags for the page type and the page key, then the template is not modified.

      Procedure

      Follow these steps for each of the pages that you want to equip with OG <meta> tags.

      1. Edit the template that needs OG <meta> tags.
      2. Locate the <head> tag using the browser's search tool.
      3. Insert a blank line immediately after the </head> tag.
      4. Click here to see the page where the SalsaScript that manages OG <meta> tag lives.
      5. Click the Raw button.  A window will appear that contains just the SalsaScript.
      6. Copy the contents of the window and close it.
      7. Return to the template editor.
      8. Paste the copied content into the newly inserted line in the template.
      9. Save the template.

      Configuration

      1. The pasted text is a Javascript case statement. It allows Javascript to execute code from a set of mutually exclusive options. To use the case statement, find the page type in the code inserted during the One-Time setup. Use this table as a guide:
      Table Type What to look for 
      action "Insert your action OG meta <tag> 'case' statements here."
      donate_page "Insert your donation OG meta <tag> 'case' statements here."
      event "Insert your event OG meta <tag> 'case' statements here."
      1. When you've located the right place to insert the 'case' statement, then paste it in.  
      2. Change [[key_value]] to the page KEY that you want to add OG <meta> tags for.  For example, for KEY 9214, the 'case' statement starts with

      case '9214':

      Note: The apostrophes are important.

      1. Change the <meta> tags to have your content and your copy. 
      2. Here's an example.  My page is an 'action', and the key is 9214.  When I follow these instructions, then the results look like this:

      (You can click here to copy the text from this screenshot.)

      1. Now that you've seen a sample, you should be able to modify the OG <meta> tags to meet your needs.  If you need help, the use the OpenGraph documents mentioned in the first part of this document to make sure that you are providing the correct information and the correct format.  Please remember that Salsa does not provide support for OpenGraph content. If you have problems with the <meta> tags themselves, then please contact Facebook for support.
      2. Pro Tip:  When you are ready to insert the next action (donation, etc), put the 'case' statements in numerical order, like this:
          

       (You can click here if you'd like to copy the text from this screenshot.)

      1. Save your template.
      2. Test, test, test!

      Debugging

      Facebook has an excellent debug page that can help you get your OpenGraph meta tags in order.  Click here to use the debug page.

      Things that break...

       Here's a checklist to use before you test. These are the common mistakes that everyone makes, so you should be on the lookout for them.

      • Back up your template before you change anything.
      • Make sure that you've copied and pasted carefully.
      • The <meta> tags must appear between the <head> and </head> tags in the template.  
      • Make sure that all of the quotation marks are matches.  To make this easier, do not use apostrophes (').  Only use quotes (").
      • If you are working on a Mac:
        • Make sure that you do not have curly quotes in the pasted material. Use standard, boring vertical quotes.
        • Use two minus signs as a dash. Do not use the dash on the Mac keyboard.
        • Do not use the short dash on the Mac keyboard. Use a single minus sign instead.
      • Use images from your Salsa HQ for og:image tags. This will avoid cross-site complexities that are tough to figure out.
      • Test each of the pages that you add before you add another.

      Questions?

      If you have any questions, then please gather this information:

      • your organization_KEY
      • the template_KEY of the template where you are working
      • the type and KEY of a page that wil use the template KEY
      Was this article helpful?
      0 out of 0 found this helpful
      Have more questions? Submit a request

      Comments

      0 comments

      Please sign in to leave a comment.