.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ============================================= 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 |img-1| |img-2| EXT: Open Graph Metatags for Facebook sharing - in2facebook .. _EXT-Open-Graph-Metatags-for-Facebook-sharing: EXT: Open Graph Metatags for Facebook sharing ============================================= Extension Key: in2facebook Language: en Keywords: facebook, in2facebook, opengraph, open graph, meta, metatags Copyright 2000-2010, Alex Kellner, |img-3| 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: Table of Contents ----------------- `EXT: Open Graph Metatags for Facebook sharing 1 <#__RefHeading__2284_832525242>`_ **`Introduction 3 <#__RefHeading__2286_832525242>`_** `What does it do? 3 <#__RefHeading__2288_832525242>`_ `Who is responsible for in2facebook? 3 <#__RefHeading__2290_832525242>`_ `The in2code team offers creates this extension for the TYPO3 community 3 <#__RefHeading__2292_832525242>`_ `Visit us on http://www.in2code.de 3 <#__RefHeading__2294_832525242>`_ `What is this for a nice dalmatian in the screenshots? 3 <#__RefHeading__2296_832525242>`_ `Screenshots 4 <#__RefHeading__2298_832525242>`_ **`Installation 6 <#__RefHeading__2300_832525242>`_** `Quickstart 6 <#__RefHeading__2302_832525242>`_ `Step by Step 7 <#__RefHeading__2304_832525242>`_ **`Configuration 9 <#__RefHeading__2306_832525242>`_** `TypoScript 9 <#__RefHeading__2308_832525242>`_ **`Administration 11 <#__RefHeading__2310_832525242>`_** `FAQ 11 <#__RefHeading__2312_832525242>`_ **`Known problems 12 <#__RefHeading__2314_832525242>`_** **`To-Do list 13 <#__RefHeading__2316_832525242>`_** `Using any of the pages fields in the html Template 13 <#__RefHeading__2318_832525242>`_ `It's up to you to give us some feedback! 13 <#__RefHeading__898_375800482>`_ `Are there any further feature requests or bugs? Write us an email... See www.in2code.de 13 <#__RefHeading__2320_832525242>`_ **`Additional links 14 <#__RefHeading__2322_832525242>`_** `You can use one of the following links, to get more information about this plugin: 14 <#__RefHeading__902_375800482>`_ `Company which created this plugin: http://www.in2code.de 14 <#__RefHeading__904_375800482>`_ `Authors private homepage: http://www.einpraegsam.net 14 <#__RefHeading__906_375800482>`_ `Do you need help with this plugin: http://www.typo3.net 14 <#__RefHeading__908_375800482>`_ `Don't miss the best TYPO3 blogging page: http://www.typo3blogger.de 14 <#__RefHeading__2324_832525242>`_ **`ChangeLog 15 <#__RefHeading__2326_832525242>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: What does it do? ^^^^^^^^^^^^^^^^ .. _Introduction: 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: 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: Who is responsible for in2facebook? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Creation-Team: Creation Team """"""""""""" The in2code team offers creates this extension for the TYPO3 community Visit us on `http://www.in2code.de `_ .. _Powered-by: Powered by """""""""" EDER – Zukunft Bauen. Visit EDER on `http://www.eder.co.at `_ .. _What-is-this-for-a-nice-dalmatian-in-the-screenshots: 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: Screenshots ^^^^^^^^^^^ .. _Facebook-sharing-of-in2code-de-without-Open-Graph: Facebook sharing of in2code.de without Open Graph """"""""""""""""""""""""""""""""""""""""""""""""" |img-4| .. _Facebook-sharing-of-in2code-de-with-some-defined-fields: Facebook sharing of in2code.de with some defined fields """"""""""""""""""""""""""""""""""""""""""""""""""""""" |img-5| .. _Adding-your-own-text-to-any-page-in-the-TYPO3-backend: Adding your own text to any page in the TYPO3 backend """"""""""""""""""""""""""""""""""""""""""""""""""""" |img-6| .. _Facebook-sharing-of-this-settings: Facebook sharing of this settings """"""""""""""""""""""""""""""""" |img-7| .. _Installation: Installation ------------ .. _Quickstart: 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: Step by Step ^^^^^^^^^^^^ .. _1-Install-the-extensions-extbase-and-fluid-if-not-yet-installed: 1. Install the extensions extbase and fluid (if not yet installed) """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-8| .. _2-Import-in2facebook-from-the-Extension-Repository-and-install-it: 2. Import in2facebook from the Extension Repository and install it """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. _3-Include-the-static-template-for-the-extension-to-you-TypoScript: 3. Include the static template for the extension to you TypoScript """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-9| .. _4-Edit-an-existing-page-and-add-some-more-information-for-Facebook: 4. Edit an existing page and add some more information for Facebook """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-6| .. _Field-explanation: Field explanation ~~~~~~~~~~~~~~~~~ .. ### BEGIN~OF~TABLE ### .. _Title: Title ''''' .. container:: table-row Field Name Title Explanation Add the Title for Facebook .. _Page-type: Page type ''''''''' .. container:: table-row Field Name Page type Explanation Page Type for Facebook (see `http://developers.facebook.com/docs/opengraph/#types `_ ) for all types .. _Canonical-URL: Canonical URL ''''''''''''' .. container:: table-row Field Name Canonical URL Explanation Canonical URL (if you have more than only one URL for only one page) .. _Image: Image ''''' .. container:: table-row Field Name Image Explanation Image for this page .. _Humen-readable-Name: Humen-readable Name ''''''''''''''''''' .. container:: table-row Field Name Humen-readable Name Explanation A humen-readable name for this page .. _Admin: Admin ''''' .. container:: table-row Field Name Admin Explanation Add some facebook ids (comma-separated) for administration .. _Description: Description ''''''''''' .. container:: table-row Field Name Description Explanation Description of the page .. ###### END~OF~TABLE ###### |img-10| .. _Description-on-Facebook: Description on Facebook ~~~~~~~~~~~~~~~~~~~~~~~ See `http://developers.facebook.com/docs/opengraph/ `_ for more details .. _Configuration: Configuration ------------- .. _TypoScript: TypoScript ^^^^^^^^^^ .. _Setup-in2facebook-Main-in2facebook: 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 .. _Setup-Share-Buttons-in2facebook: Setup: Share Buttons (in2facebook) """""""""""""""""""""""""""""""""" :: lib.in2facebook = COA lib.in2facebook { 10 = TEXT 10 { typolink.parameter.data = TSFE:id typolink.returnLast = url dataWrap = http://{getIndpEnv:HTTP_HOST}/| rawUrlEncode = 1 } wrap = } .. _Administration: Administration -------------- .. _FAQ: FAQ ^^^ .. _Q-I-don-t-need-all-the-new-fields-I-want-to-hide-some-of-the-fields: 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: 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: 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: 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: 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-can-I-add-a-Facebook-Share-Button-to-my-Website: Q: How can I add a Facebook Share Button to my Website? """"""""""""""""""""""""""""""""""""""""""""""""""""""" Just add the static template for the Share Button and use the TypoScript object lib.in2facebook to use this: :: # Add Share Button to every page page.20 < lib.in2facebook .. _Q-How-to-change-the-html-template: 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: Known problems -------------- No problems known at the moment .. _To-Do-list: 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: 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: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 Date 2011-05-05 State alpha Changes Initial upload into TER .. ###### END~OF~TABLE ###### |img-2| 15 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 287 .. :id: Grafik1 .. :name: Grafik1 .. :width: 280 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 224 .. :id: Grafik3 .. :name: Grafik3 .. :width: 497 .. |img-5| image:: img-5.png .. :align: left .. :border: 0 .. :height: 224 .. :id: Grafik4 .. :name: Grafik4 .. :width: 497 .. |img-6| image:: img-6.png .. :align: left .. :border: 0 .. :height: 446 .. :id: Grafik5 .. :name: Grafik5 .. :width: 655 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 223 .. :id: Grafik7 .. :name: Grafik7 .. :width: 496 .. |img-8| image:: img-8.jpeg .. :align: left .. :border: 0 .. :height: 383 .. :id: Grafik16 .. :name: Grafik16 .. :width: 588 .. |img-9| image:: img-9.png .. :align: left .. :border: 0 .. :height: 200 .. :id: Grafik8 .. :name: Grafik8 .. :width: 549 .. |img-10| image:: img-10.png .. :align: left .. :border: 0 .. :height: 171 .. :id: Grafik10 .. :name: Grafik10 .. :width: 554