How to set Open Graph (o:g) meta tags using Typoscript.

The open graph meta tags affects the way how our page link looks, when we share it on social media like on Facebook.

Below is the way how we can set og:title, og:type, og:url, og:description and og:image using Typoscript.

page.headerData {
# Add Open Graph meta
1 = COA
1 {
10 = TEXT
10 {
value = {$siteTitle} : {TSFE:page|title}
insertData = 1
dataWrap = <meta property=”og:title” content=”|”>
}
20 = TEXT
20 {
value = article
wrap = <meta property=”og:type” content=”|”>
}
30 = TEXT
30 {
typolink {
parameter.data = tsfe:id
parameter.insertData = 1
useCacheHash = 1
addQueryString = 1
addQueryString.method = get
addQueryString.exclude = id
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property=”og:url” content=”|”>
}
40 = TEXT
40 {
value = {$siteTitle}
wrap = <meta property=”og:site_name” content=”|”>
}
50 = TEXT
50 {
data = page:description
required = 1
stripHtml = 1
wrap = <meta property=”og:description” content=”|”>
}
60 = FILES
60 {
#gets image form media tab of page
references {
table = pages
uid.data = page:uid
fieldName = media
}
renderObj = TEXT
renderObj {
typolink {
parameter.data = file:current:publicUrl
forceAbsoluteUrl = 1
returnLast = url
}
wrap = |,
}
stdWrap {
listNum = 0
# Use logo image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = fileadmin/templates/images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <meta property=”og:image” content=”|”>
}
}
}
}

Typoscript to include IE specific css and js

Here is how we can include css and javascript that targets different Internet explorer versions using typoscript.

page {
includeJS {
iejs = fileadmin/templates/js/ie.js
iejs.allWrap = <!–[if lt IE 9]> | <![endif]–>
iejs.excludeFromConcatenation = 1
}

includeCSS {
iecss = fileadmin/templates/css/ie.css
iecss.allWrap = <!–[if lt IE 9]> | <![endif]–>
iecss.excludeFromConcatenation = 1
}
}

Here I am including css and js for ie version less than 9.

 

Adding the Icon for Menu from page media property

From typo3 6.2.x, please use the following code  to generate the icon for menus from its page’s media property.

lib.menu = HMENU
lib.menu {
entryLevel = 1
expAll = 1
1 = TMENU
1{
wrap = <ul class=”leftmenu”> | </ul>
expAll = 1
NO = 1
NO{
before.wrap = <li>|
stdWrap.cObject = COA
stdWrap.cObject {
10 = FILES
10 {
# Get the images related to the current page
references {
table = pages
fieldName = media
}
# Render each image and wrap it as appropriate
renderObj = TEXT
renderObj {
typolink {
parameter.data = file:current:publicUrl
forceAbsoluteUrl = 1
returnLast = url
}
wrap = |,
}
stdWrap {
# Take only the first image if several are defined
listNum = 0
# Use default image if none is available
ifEmpty.cObject = TEXT
ifEmpty.cObject.typolink {
parameter = path_to_images/logo.png
forceAbsoluteUrl = 1
returnLast = url
}
wrap = <img src=”|” title=”image” />
}
}

20 = TEXT
20.field = title
20.wrap = <span>|</span>
}
after.wrap = |</li>
}
ACT < .NO
ACT.before.wrap = <li class=”active”> |

CUR < .NO
CUR.before.wrap = <li class=”active”> |
}
}

This snippet informs how to add or allow custom tags in RTE

PAGE TS CONFIG AS FOLLOWS:

# Allow embed, parm, object and iframe tags, also see RTE parser code added in config.ts
RTE.default.proc {
allowTags := addToList(object,param,embed,iframe)
allowTagsOutside := addToList(object,embed,iframe)
entryHTMLparser_db.allowTags < RTE.default.proc.allowTags
}

TYPOSCRIPT SETUP SHOULD BE AS FOLLOWS

# Allow embed, parm, object and iframe tags, also see RTE setup added in rte.ts
lib.parseFunc_RTE.allowTags := addToList(object,param,embed,iframe)

Open Graph Tags example for use with Facebook

page.headerData.120 = COA
page.headerData.120 {
10 = TEXT
10 {
typolink.parameter.data = TSFE:id
typolink.forceAbsoluteUrl = 1
typolink.returnLast = url
typolink.additionalParams.cObject = COA
typolink.additionalParams.cObject {
10 = TEXT
10.dataWrap = &tx_ttnews[tt_news]={GP:tx_ttnews|tt_news}
10.if.isTrue.data = GP:tx_ttnews|tt_news
20 = TEXT
20.dataWrap = &tx_ttnews[cat]={GP:tx_ttnews|cat}
20.if.isTrue.data = GP:tx_ttnews|cat
}
wrap = <meta property=”og:url” content=”|”/>
}
20 < page.headerData.1
20 {
wrap = <meta property=”og:title” content=”| {$siteTitle}”/>
}

30 = TEXT
30.value =
30.wrap = <meta property=”og:site_name” content=”|{$siteTitle}”/>

40 = TEXT
40.value = <meta property=”og:description” content=”” />
40.wrap = <meta property=”og:type” content=”website” />|

}

In additions to the above, we can also set the og:image property on a news detail page like given below:
This new updated Code also includes a default image when news has no image.

page.headerData.120.50 = COA
page.headerData.120.50 {
20 = CONTENT
20 {
table = tt_news
select {
pidInList = 18
andWhere = uid={GP:tx_ttnews|tt_news}
andWhere.insertData =1
selectFields = uid,pid,image
}
renderObj = COA
renderObj {
10 = TEXT
10.value =<meta property=”og:image” content=”http://www.mydomain.com/uploads/pics/
20 = TEXT
20 {
field = image
split {
token = ,
max = 1
cObjNum = 1
1.current = 1
}
ifEmpty.cObject = TEXT
ifEmpty.cObject {
value = alt-image.jpg
}

}
30 = TEXT
30.value = ” />
}
}
}