TUTORIAL: Social Snippets in MODX Revolution using the Open Graph Protocol

- ☆ A M B ☆
- 350 Posts
Menno Pietersen Reply #1, 13 years, 7 months ago
I wrote a post about implementing the Open Graph Protocol in MODX Revolution:
Social Snippets in MODX Revolution using the Open Graph Protocol
http://designfromwithin.com/blog-webdesign-development/2013/02/08/social-snippets-in-modx-revolution-using-the-open-graph-protocol/

The tutorial in short:

Needed Template Variables:
1. Template variable socialType
  - Name: socialType
  - Caption: Social type
  - Description: Select the type of this page.
  - Input Type: Radio options
  - Input Option values: website==website||music==music||video==video||article==article||book==book||profile==profile
  - Default Value: website
2. Template variable socialAuthorUrl
  - Name: socialAuthorUrl
  - Caption: Social author URL
  - Description: Optional, link to the website of the author.
  - Input Type: URL
3. Template variable socialDescription
  - Name: socialDescription
  - Caption: Social description
  - Description: Optional, if blank 'introtext' is used.
  - Input Type: Text
4. Template variable socialTwitterName
  - Name: socialTwitterName
  - Caption: Twitter name of the author
  - Description: Optional, fill in the Twitter name of the author (@TwitterName)
  - Input Type: Text
5. Template variable socialTwitterCardType
  - Name: socialTwitterCardType
  - Caption: Twitter card type
  - Description: Select the type of this page. for Twitter.
  - Input Type: Radio options
  - Input Option values: summary==summary||photo==photo||player==player
  - Default Value: summary
6. Template variable socialImage
  - Name: socialImage
  - Caption: Social image
  - Description: Optional, if blank no image is used.
  - Input Type: Image
The openGraphProtocolChunk:
```
[[*socialType:notempty=`
<meta property="og:type" content="[[*socialType]]">
`]]
[[*socialType:isequalto=`book`:then=`
<meta property="book:author" content="[[*socialAuthorUrl]]">
`]]
[[*socialType:isequalto=`article`:then=`
<meta property="article:author" content="[[*socialAuthorUrl]]">
`]]
<meta property="og:title" name="twitter:title" content="[[*pagetitle]]">
<meta property="og:url" name="twitter:url" content="[[!++site_url]][[*uri]]">
<meta property="og:description" name="twitter:description" content="[[*socialDescription:empty=`[[*introtext]]`]]">
[[*socialTwitterCardType:notempty=`
<meta name="twitter:card" content="[[*socialTwitterCardType]]">
`]]
[[*socialTwitterName:notempty=`
<meta name="twitter:creator" content="[[*socialTwitterName]]">
`]]
[[*socialImage:notempty=`
<meta name="twitter:image" property="og:image" content="[[!++site_url]][[*socialImage]]">
`]]
```
Add the chunk to the header
```
[[$openGraphProtocolChunk]]
```
[ed. note: ThaClown last edited this post 13 years, 7 months ago.]
MODX Ambassador (NL) | Responsive web design specialist, developer & speaker
DESIGNfromWITHIN, MPThemes and Any Screen Size
Follow me on Twitter | Read my blog | My code on GitHub
- 79 Posts
Jean-Marc Reply #2, 13 years, 5 months ago

Exactly what I was looking for. Awesome, thank you!
Jean-Marc Buytaert (@jmbuytaert)

MODX truly is the greatest thing that's ever happened to the Internet.