.. 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: Sebastian Felix Schwarz :Changed: 2011-05-09T10:39:50 :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 for news-news2facebook .. _EXT-Open-Graph-Metatags-for-Facebook-sharing-for-news: EXT: Open Graph Metatags for Facebook sharing for news ====================================================== Extension Key: news2facebook Language: en Keywords: facebook, tt\_news, in2facebook, news Copyright 2003-2011, Sebastian Felix Schwarz, 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 News-Item 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 tt\_news will be extended with this fields - tx\_news2facebook\_title - tx\_news2facebook\_type - tx\_news2facebook\_url - tx\_news2facebook\_image - tx\_news2facebook\_site\_name - tx\_news2facebook\_admins - tx\_news2facebook\_description .. _Who-is-responsible-for-news2facebook: Who is responsible for news2facebook? ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. _Creation-Team: Creation Team """"""""""""" The takomat developer team offers creates this extension for the TYPO3 community Visit us on `http://www.takomat.com/ `_ .. _Inspired-by: Inspired by """"""""""" The in2code team offers creates this extension for the TYPO3 community Visit them on `http://www.in2code.de `_ .. _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-News-sharing-of-takomat-com-without-Open-Graph: Facebook News sharing of takomat.com without Open Graph """"""""""""""""""""""""""""""""""""""""""""""""""""""" |img-3| .. _Facebook-News-sharing-of-takomat-com-with-some-defined-fields: Facebook News sharing of takomat.com with some defined fields """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-4| .. _Adding-your-own-text-to-any-News-in-the-TYPO3-backend: Adding your own text to any News in the TYPO3 backend """"""""""""""""""""""""""""""""""""""""""""""""""""" |img-5| .. _Facebook-sharing-of-this-settings: Facebook sharing of this settings """"""""""""""""""""""""""""""""" |img-4| .. _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 news2facebook - Include the static templates in your main TypoScript - Add some more meta information to your News - Done: Share some of this News .. _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-6| .. _2-Import-news2facebook-from-the-Extension-Repository-and-install-it: 2. Import news2facebook from the Extension Repository and install it """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" .. _3-Include-the-static-template-for-the-extension-to-your-TypoScript-of-your-SINGLE-VIEW-PAGE-from-your-tt-news-Extension: 3. Include the static template for the extension to your TypoScript of your SINGLE-VIEW PAGE from your tt\_news Extension """"""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-7| .. _4-Edit-an-existing-News-Item-and-add-some-more-information-for-Facebook: 4. Edit an existing News-Item and add some more information for Facebook """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""" |img-5| .. _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-8| .. _Description-on-Facebook: Description on Facebook ~~~~~~~~~~~~~~~~~~~~~~~ See `http://developers.facebook.com/docs/opengraph/ `_ for more details .. _Configuration: Configuration ------------- .. _TypoScript: TypoScript ^^^^^^^^^^ .. _Setup-news2facebook-Main-news2facebook: Setup: news2facebook Main (news2facebook) """"""""""""""""""""""""""""""""""""""""" :: plugin.tx_news2facebook = USER plugin.tx_news2facebook { userFunc = tx_extbase_core_bootstrap->run pluginName = Pi1 extensionName = News2facebook 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_news2facebook/| 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_news2facebook/| width = 90c height = 60c } } 20 = IMAGE 20 { file = typo3conf/ext/news2facebook/Resources/Private/Images/TYPO3_Logo.png offset = 62,33 } } } } } view { templateRootPath = {$plugin.tx_news2facebook.view.templateRootPath} } persistence { storagePid = 23 classes { Tx_News2facebook_Domain_Model_Opengraph { mapping { tableName = tt_news columns { tx_news2facebook_title.mapOnProperty = title tx_news2facebook_type.mapOnProperty = type tx_news2facebook_url.mapOnProperty = url tx_news2facebook_image.mapOnProperty = image tx_news2facebook_site_name.mapOnProperty = siteName tx_news2facebook_admins.mapOnProperty = admins tx_news2facebook_description.mapOnProperty = description } } } } } } page.headerData.1517 < plugin.tx_news2facebook } 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-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_news2facebook.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 `http://www.takomat.com/ `_ .. _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.takomat.com `_ - Authors private homepage: `http://www.botschaft-koeln.de `_ - Check out the other Extension for Page-Sharing: `http://www.in2code.d `_ e - Do you need help with this plugin: `http://www.typo3.net `_ .. _ChangeLog: ChangeLog --------- .. ### BEGIN~OF~TABLE ### .. _0-1-0: 0.1.0 ^^^^^ .. container:: table-row Version 0.1.0 1.0.1 Date 2011-05-06 2001-05-09 State Beta beta Changes Initial upload into TER Add default Title, default description and default image (using tt\_news db fields) .. ###### END~OF~TABLE ###### |img-2| 16 .. ######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.jpeg .. :align: left .. :border: 0 .. :height: 187 .. :id: Grafik3 .. :name: Grafik3 .. :width: 487 .. |img-4| image:: img-4.jpeg .. :align: left .. :border: 0 .. :height: 250 .. :id: Grafik4 .. :name: Grafik4 .. :width: 491 .. |img-5| image:: img-5.jpeg .. :align: left .. :border: 0 .. :height: 553 .. :id: Grafik5 .. :name: Grafik5 .. :width: 669 .. |img-6| image:: img-6.jpeg .. :align: left .. :border: 0 .. :height: 383 .. :id: Grafik16 .. :name: Grafik16 .. :width: 588 .. |img-7| image:: img-7.png .. :align: left .. :border: 0 .. :height: 201 .. :id: Grafik8 .. :name: Grafik8 .. :width: 566 .. |img-8| image:: img-8.png .. :align: left .. :border: 0 .. :height: 171 .. :id: Grafik10 .. :name: Grafik10 .. :width: 554