DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

EXT: Open Graph Metatags for Facebook sharing¶

Created:	2010-02-18T17:33:18
Changed by:	Alex Kellner
Changed:	2011-05-05T13:57:20.670000000
Classification:	in2facebook
Keywords:	facebook, in2facebook, opengraph, open graph, meta, metatags
Author:	Alex Kellner
Email:	alexander.kellner@in2code.de
Info 4:
Language:	en

EXT: Open Graph Metatags for Facebook sharing - in2facebook

EXT: Open Graph Metatags for Facebook sharing¶

Extension Key: in2facebook

Language: en

Keywords: facebook, in2facebook, opengraph, open graph, meta, metatags

This document is published under the Open Content License

available from http://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

- a GNU/GPL CMS/Framework available from www.typo3.org

Table of Contents¶

EXT: Open Graph Metatags for Facebook sharing 1

`Introduction 3 <#__RefHeading__2286_832525242>`_

What does it do? 3

Who is responsible for in2facebook? 3

The in2code team offers creates this extension for the TYPO3 community 3

Visit us on http://www.in2code.de 3

What is this for a nice dalmatian in the screenshots? 3

Screenshots 4

`Installation 6 <#__RefHeading__2300_832525242>`_

Quickstart 6

Step by Step 7

`Configuration 9 <#__RefHeading__2306_832525242>`_

TypoScript 9

`Administration 11 <#__RefHeading__2310_832525242>`_

FAQ 11

`Known problems 12 <#__RefHeading__2314_832525242>`_

`To-Do list 13 <#__RefHeading__2316_832525242>`_

Using any of the pages fields in the html Template 13

It's up to you to give us some feedback! 13

Are there any further feature requests or bugs? Write us an email... See www.in2code.de 13

`Additional links 14 <#__RefHeading__2322_832525242>`_

You can use one of the following links, to get more information about this plugin: 14

Company which created this plugin: http://www.in2code.de 14

Authors private homepage: http://www.einpraegsam.net 14

Do you need help with this plugin: http://www.typo3.net 14

Don't miss the best TYPO3 blogging page: http://www.typo3blogger.de 14

`ChangeLog 15 <#__RefHeading__2326_832525242>`_

Introduction¶

What does it do?¶

Introduction¶

Your page was shared in Facebook and you want to assign Facebook which picture and which text should be shown? You should use this extension.

All details at a glance¶

This extension uses Open Graph Metatags to describe Facebook additional information (see http://developers.facebook.com/docs/opengraph/ )
Because of the new technique Extbase and Fluid (MVC concept and a new template engine) is needed
A HTML Template gives you the freedom to change the header output in the way you need
The table pages will be extended with this fields
- tx_in2facebook_title
- tx_in2facebook_type
- tx_in2facebook_url
- tx_in2facebook_image
- tx_in2facebook_site_name
- tx_in2facebook_admins
- tx_in2facebook_description

Who is responsible for in2facebook?¶

Creation Team¶

The in2code team offers creates this extension for the TYPO3 community

Visit us on http://www.in2code.de

Powered by¶

EDER – Zukunft Bauen.

Visit EDER on http://www.eder.co.at

What is this for a nice dalmatian in the screenshots?¶

Sally is the watchdog of in2code and in addition our model for some dummy pictures ;)

Screenshots¶

Adding your own text to any page in the TYPO3 backend¶

Installation¶

Quickstart¶

Be sure to use TYPO3 4.3 or newer
Install the extensions extbase and fluid (system extensions)
Download and install the extension in2facebook
Include the static templates in your main TypoScript
Add some more meta information to your pages
Done: Share some of this pages

Step by Step¶

1. Install the extensions extbase and fluid (if not yet installed)¶

2. Import in2facebook from the Extension Repository and install it¶

3. Include the static template for the extension to you TypoScript¶

4. Edit an existing page and add some more information for Facebook¶

Field explanation¶

Title¶

Field Name

Title

Explanation

Add the Title for Facebook

Page type¶

Field Name

Page type

Explanation

Page Type for Facebook (see http://developers.facebook.com/docs/opengraph/#types ) for all types

Canonical URL¶

Field Name

Canonical URL

Explanation

Canonical URL (if you have more than only one URL for only one page)

Image¶

Field Name

Image

Explanation

Image for this page

Humen-readable Name¶

Field Name

Humen-readable Name

Explanation

A humen-readable name for this page

Admin¶

Field Name

Admin

Explanation

Add some facebook ids (comma-separated) for administration

Description¶

Field Name

Description

Explanation

Description of the page

Description on Facebook¶

See http://developers.facebook.com/docs/opengraph/ for more details

Configuration¶

TypoScript¶

Setup: in2facebook Main (in2facebook)¶

plugin.tx_in2facebook = USER
plugin.tx_in2facebook {
        userFunc = tx_extbase_core_bootstrap->run
        pluginName = Pi1
        extensionName = In2facebook
        controller = Opengraph
        action = show
        switchableControllerActions {
                Opengraph {
                        1 = show
                }
        }

        settings {
                image = COA
                image {
                        10 = TEXT
                        10 {
                                data = getIndpEnv:HTTP_HOST
                                wrap = http://|/
                        }

                        # without watermark
                        /*
                        20 = IMG_RESOURCE
                        20 {
                                file {
                                        import.field = image
                                        import.dataWrap = uploads/tx_in2facebook/|
                                        width = 90c
                                        height = 60c
                                }
                        }
                        */

                        # with watermark
                        20 = IMG_RESOURCE
                        20 {
                                file = GIFBUILDER
                                file {
                                        XY = 90,60
                                        format = jpg
                                        quality = 90

                                        10 = IMAGE
                                        10 {
                                                file {
                                                        import.field = image
                                                        import.dataWrap = uploads/tx_in2facebook/|
                                                        width = 90c
                                                        height = 60c
                                                }
                                        }

                                        20 = IMAGE
                                        20 {
                                                file = typo3conf/ext/in2facebook/Resources/Private/Images/TYPO3_Logo.png
                                                offset = 62,33
                                        }
                                }
                        }
                }
        }

        view {
                templateRootPath = {$plugin.tx_in2facebook.view.templateRootPath}
        }

        persistence {
                storagePid = 23
                classes {
                        Tx_In2facebook_Domain_Model_Opengraph {
                                mapping {
                                        tableName = pages
                                        columns {
                                                tx_in2facebook_title.mapOnProperty = title
                                                tx_in2facebook_type.mapOnProperty = type
                                                tx_in2facebook_url.mapOnProperty = url
                                                tx_in2facebook_image.mapOnProperty = image
                                                tx_in2facebook_site_name.mapOnProperty = siteName
                                                tx_in2facebook_admins.mapOnProperty = admins
                                                tx_in2facebook_description.mapOnProperty = description
                                        }
                                }
                        }
                }
        }
}


page.headerData.1519 < plugin.tx_in2facebook

Administration¶

FAQ¶

Q: I don't need all the new fields – I want to hide some of the fields¶

Just use the page Tsconfig to hide not wanted fields:

TCEFORM.pages {
        # disable the field tx_in2facebook_url
        tx_in2facebook_url.disabled = 1
}

Q: Theres always a TYPO3 watermark on my picture¶

Have a look into the TypoScript (see above).

To disable this watermark, simply use this line Typoscript:

# disable watermark of in2facebook
plugin.tx_in2facebook.settings.image.20.file.20 >

Q: The link of the picture is wrong¶

Change the settings of the picture via TypoScript. Just modify the TypoScript and use your own settings.

Q: I want to change the size of the picture¶

Change the settings of the picture via TypoScript. Just modify the TypoScript and use your own settings.

Q: The picture is always cropped¶

Change the settings of the picture via TypoScript. Just modify the TypoScript and use your own settings.

Q: How to change the html template¶

Copy the HTML Template to the fileadmin, modify it and modify the TypoScript with the new path – that's all.

Known problems¶

No problems known at the moment

To-Do list¶

Using any of the pages fields in the html Template
It's up to you to give us some feedback!
Are there any further feature requests or bugs? Write us an email... See www.in2code.de

Additional links¶

You can use one of the following links, to get more information about this plugin:

Company which created this plugin: http://www.in2code.de
Authors private homepage: http://www.einpraegsam.net
Do you need help with this plugin: http://www.typo3.net
Don't miss the best TYPO3 blogging page: http://www.typo3blogger.de

ChangeLog¶

0.1.0¶

Version

0.1.0

Date

2011-05-05

State

alpha

Changes

Initial upload into TER

15

EXT: Open Graph Metatags for Facebook sharing¶

EXT: Open Graph Metatags for Facebook sharing¶

Table of Contents¶

Introduction¶

What does it do?¶

Introduction¶

All details at a glance¶

Who is responsible for in2facebook?¶

Creation Team¶

Powered by¶

What is this for a nice dalmatian in the screenshots?¶

Screenshots¶

Facebook sharing of in2code.de without Open Graph¶

Facebook sharing of in2code.de with some defined fields¶

Adding your own text to any page in the TYPO3 backend¶

Facebook sharing of this settings¶

Installation¶

Quickstart¶

Step by Step¶

1. Install the extensions extbase and fluid (if not yet installed)¶

2. Import in2facebook from the Extension Repository and install it¶

3. Include the static template for the extension to you TypoScript¶

4. Edit an existing page and add some more information for Facebook¶

Field explanation¶

Description on Facebook¶

Configuration¶

TypoScript¶

Setup: in2facebook Main (in2facebook)¶

Setup: Share Buttons (in2facebook)¶

Administration¶

FAQ¶

Q: I don't need all the new fields – I want to hide some of the fields¶

Q: Theres always a TYPO3 watermark on my picture¶

Q: The link of the picture is wrong¶

Q: I want to change the size of the picture¶

Q: The picture is always cropped¶

Q: How can I add a Facebook Share Button to my Website?¶

Q: How to change the html template¶

Known problems¶

To-Do list¶

Additional links¶

ChangeLog¶

0.1.0¶