.. You may want to use the usual include line. Uncomment and adjust the path. 
.. include:: ../Includes.txt


==================================
Browser Tutorial Social Media (en)
==================================

:Author:
      Kasper Skårhøj

:Created:
      2002-11-01T00:32:00

:Changed:
      2010-08-25T23:14:34

:Classification:
      browser_tut_socialmedia_en

:Description:
      Tutorial Social Media for the Browser - the TYPO3-frontend-engine. Use social bookmarks. Integrate your TYPO3 application to facebook.com.

:Keywords:
      forAdmins, forDevelopers, forBeginners, forAdvanced, browser, tutorial, frontend-engine, frontend, engine, socialmedia, socialweb, social, media, web

:Author:
      Dirk Wildt, Die Netzmacher

:Email:
      http://wildt.at.die-netzmacher.de

:Website:
      http://die-netzmacher.de

:Language:
      en


|img-1| |img-2| Browser Tutorial Social Media (en)|img-3|


.. _Browser-Tutorial-Social-Media-en:

Browser Tutorial Social Media (en)
==================================

Tutorial Social Media for the Browser - the TYPO3-frontend-engine. Use
social bookmarks. Integrate your TYPO3 application to facebook.com.

|img-4|

Version: 3.4.1, 2010-08-25 - Version is corresponding with the version
of the Browser.

Extension Key: browser\_tut\_socialmedia\_en - Tutorial for the
extension Browser (extkey: browser)

Language: en

Keywords: forAdmins, forDevelopers, forBeginners, forAdvanced,
browser, tutorial, frontend-engine, frontend, engine, socialmedia,
socialweb, social, media, web

Copyright 2010, Dirk Wildt, Die Netzmacher, <http://wildt.at.die-
netzmacher.de>

This document is published under the Open Content License

available from `http://www.opencontent.org/opl.shtml
<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
-----------------

`Browser Tutorial Social Media (en) 1
<#__RefHeading__1165_1172745218>`_

`Screen Shots 3 <#__RefHeading__1167_1172745218>`_

`List View 3 <#__RefHeading__5011_1666017150>`_

`Single View 3 <#__RefHeading__5013_1666017150>`_

`facebook.com 4 <#__RefHeading__5015_1666017150>`_

`The Browser Plugin 4 <#__RefHeading__5017_1666017150>`_

`Introduction 5 <#__RefHeading__1513_1172745218>`_

`What does it do? 5 <#__RefHeading__1169_1172745218>`_

`Further Information 5 <#__RefHeading__1171_1172745218>`_

`This tutorial in PDF format 5 <#__RefHeading__1173_1172745218>`_

`Browser Manual and Browser Tutorial Basics 5
<#__RefHeading__1175_1172745218>`_

`Use Social Bookmarks 6 <#__RefHeading__1177_1172745218>`_

`Bookmarks in List Views? Yes! 6 <#__RefHeading__1515_1172745218>`_

`The Tab [Social Media] 6 <#__RefHeading__1179_1172745218>`_

`Own HTML Template 7 <#__RefHeading__1928_1172745218>`_

`The Bookmark Marker 7 <#__RefHeading__1930_1172745218>`_

`Prepare Your Plugin for the Facebook API 8
<#__RefHeading__1181_1172745218>`_

`Beforehand 8 <#__RefHeading__4475_1666017150>`_

`Example with the Quick Shop 8 <#__RefHeading__4477_1666017150>`_

`HTML Template 8 <#__RefHeading__4479_1666017150>`_

`TypoScript 8 <#__RefHeading__4481_1666017150>`_

`Plugin 9 <#__RefHeading__4483_1666017150>`_

`CSS 10 <#__RefHeading__4485_1666017150>`_

`Page Tree 10 <#__RefHeading__4487_1666017150>`_

`Integrate Your Plugin in Facebook 11
<#__RefHeading__4489_1666017150>`_

`Conditions 11 <#__RefHeading__4491_1666017150>`_

`Work Flow 11 <#__RefHeading__4493_1666017150>`_

`Login 11 <#__RefHeading__4495_1666017150>`_

`Create a New Application 11 <#__RefHeading__4497_1666017150>`_

`Configure Your Application 13 <#__RefHeading__4499_1666017150>`_

`Test Your Application 15 <#__RefHeading__4501_1666017150>`_

`In Cases of Errors 15 <#__RefHeading__4503_1666017150>`_

`Add Your Application to Your Profile 16
<#__RefHeading__4505_1666017150>`_

`Helpful suggestions 18 <#__RefHeading__3723_2139160512>`_

`To-Do List 19 <#__RefHeading__3725_2139160512>`_

`Change Log 20 <#__RefHeading__3727_2139160512>`_

`Illustration Index 21 <#__RefHeading__3729_2139160512>`_


.. _Screen-Shots:

Screen Shots
------------


.. _List-View:

List View
^^^^^^^^^

|img-5|

`http://quick-shop.typo3-browser-forum.de/ <http://quick-shop.typo3
-browser-forum.de/>`_


.. _Single-View:

Single View
^^^^^^^^^^^

|img-5|

`http://quick-shop.typo3-browser-forum.de/produkt/pullover/ <http
://quick-shop.typo3-browser-forum.de/produkt/pullover/>`_


.. _facebook-com:

facebook.com
^^^^^^^^^^^^

|img-5|

`http://apps.facebook.com/quick\_shop/
<http://apps.facebook.com/quick_shop/>`_


.. _The-Browser-Plugin:

The Browser Plugin
^^^^^^^^^^^^^^^^^^

|img-5|


.. _Introduction:

Introduction
------------


.. _What-does-it-do:

What does it do?
^^^^^^^^^^^^^^^^

|img-6| Illustration 5: Tutorial in PDF format

This is a tutorial for the extension Browser (extkey: browser). It is

- an introduction for using social bookmarks and

- for preparing your browser plugin for the facebook API

only.


.. _Further-Information:

Further Information
^^^^^^^^^^^^^^^^^^^


.. _This-tutorial-in-PDF-format:

This tutorial in PDF format
"""""""""""""""""""""""""""

You find this tutorial as a PDF file at

- doc/manual.pdf

- `http://typo3.org/extensions/repository/view/browser\_tut\_socialmedia
  \_en/current/info/?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf
  <http://typo3.org/extensions/repository/view/browser_tut_socialmedia_e
  n/current/info/?tx_terfe_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf>`_


.. _Browser-Manual-and-Browser-Tutorial-Basics:

Browser Manual and Browser Tutorial Basics
""""""""""""""""""""""""""""""""""""""""""

Manual: The Browser has it's own manual (with the reference of
course).

- HTML `http://typo3.org/documentation/document-library/extension-
  manuals/browser/current/ <http://typo3.org/documentation/document-
  library/extension-manuals/browser/current/>`_

- PDF: `http://typo3.org/extensions/repository/view/browser/current/info
  /?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf <http://typo3.or
  g/extensions/repository/view/browser/current/info/?tx_terfe_pi1[downlo
  adFile]=doc%2Fmanual.pdf>`_

Tutorial Basics: A lot of step-by-step introductions.

- HTML: `http://typo3.org/documentation/document-library/extension-
  manuals/browser\_tut\_basics\_en/current/
  <http://typo3.org/documentation/document-library/extension-
  manuals/browser_tut_basics_en/current/>`_

- `PDF: <http://typo3.org/extensions/repository/view/_tut_search_en/curr
  ent/info/?tx_terfe_pi1[downloadFile]=doc%2Fmanual.pdf>`_ `http://typo3
  .org/extensions/repository/view/browser\_tut\_basics\_en/current/info/
  ?tx\_terfe\_pi1%5BdownloadFile%5D=doc%252Fmanual.pdf <http://typo3.org
  /extensions/repository/view/browser_tut_basics_en/current/info/?tx_ter
  fe_pi1[downloadFile]=doc%2Fmanual.pdf>`_


.. _Use-Social-Bookmarks:

Use Social Bookmarks
--------------------


.. _Bookmarks-in-List-Views-Yes:

Bookmarks in List Views? Yes!
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

The Browser is the first TYPO3 extension, which enables bookmarks in
list views! The clou: The bookmarks link to the single view.


.. _The-Tab-Social-Media:

The Tab [Social Media]
^^^^^^^^^^^^^^^^^^^^^^

If you like to use social bookmarks, nothing seems to be easier.
Please select the needed bookmarks in the tab [Social Media] of the
Browser plugin.

|img-7| Illustration 6: The tab [Social Media] in the Browser plugin

The tab [Social Media]Enable social bookmarks in the pull down menu[Social
Bookmarks].Because the Browser has a different workflow for own and
foreign templates, the pull down menu offers both options: for a
default browser template and for your own template.What your have to
attend to your own template is described below.

If you are using a Browser default template, you have to fix the field
for the position of your bookmarks in the list view.In every case you
have to define the field for the title property of the bookmark of the
bookmark providers.

Select the bookmarks for the list view.

This is the same like 3. but for single views.

This is the same like 4. but for single views.


.. _Own-HTML-Template:

Own HTML Template
^^^^^^^^^^^^^^^^^


.. _The-Bookmark-Marker:

The Bookmark Marker
"""""""""""""""""""

If you are using your own HTML template please be aware to use the
bookmark marker. Without this marker you won't see any bookmark. The
bookmark marker is a so called system marker and has this syntax

###SOCIALMEDIA\_BOOKMARKS###


.. _HTML-snippet:

HTML snippet
~~~~~~~~~~~~

This is a snippet from the HTML template of the Quick Shop (extKey:
quick\_shop)

<h3>

###TX\_QUICKSHOP\_PRODUCTS.SHORT### ###SOCIALMEDIA\_BOOKMARKS###

</h3>

As you guess the bookmarks will display on the right side in the
header (h3) of a product.

|img-5|

Source of the illustration above: `http://quick-shop.typo3-browser-
forum.de/ <http://quick-shop.typo3-browser-forum.de/>`_

If you are interested in the whole template as an example for your own
development, please download the template:

`http://typo3.org/extensions/repository/view/quick\_shop/current/info/
?tx\_terfe\_pi1%5BdownloadFile%5D=res%252Fdefault.tmpl <http://typo3.o
rg/extensions/repository/view/quick_shop/current/info/?tx_terfe_pi1%5B
downloadFile%5D=res%252Fdefault.tmpl>`_


.. _Prepare-Your-Plugin-for-the-Facebook-API:

Prepare Your Plugin for the Facebook API
----------------------------------------


.. _Beforehand:

Beforehand
^^^^^^^^^^

You can use every TYPO3 database for publishing in facebook supported
by the facebook API.

Examples for publishing are tt\_news, tt\_products or your own
database.

The facebook API has some restrictions. For example don't use in your
HTML code

- relative URLs

- external Javascript code

- tags like <colspan> or <iframe>


.. _Example-with-the-Quick-Shop:

Example with the Quick Shop
^^^^^^^^^^^^^^^^^^^^^^^^^^^

Preparing your Browser plugin for the facebook API is easy.

You need an HTML code without the <head>-stuff and <body>-stuff like
in the illustration below.

|img-5| |img-5|

You have a ready configured page like in the illustration above on the
left hand.

Then you need only the snippets below.


.. _HTML-Template:

HTML Template
"""""""""""""

We need only three line HTML code like in the snippet below. TYPO3
replace the <div> with the id "content" with the content of the page
while runtime.

<div id="content">

content

</div>

The HTML code is stored in the file
base\_quickshop/res/html/facebook\_api.html in our example.


.. _TypoScript:

TypoScript
""""""""""

config {

disableAllHeaderCode =  **1**

absRefPrefix =  **http://quick-shop.typo3-browser-forum.de/**

}

plugin.tx\_automaketemplate\_pi1 {

content.file =  **EXT:base\_quickshop/res/html/facebook\_api.html**

}

plugin.tx\_browser\_pi1 {

marker.my\_url.typolink.parameter =  **1**

}

Line 2: all header code will be disabled. This concerns the
<head>-section and the <body>-section.

Line 3: TYPO3 will render absolute URLs

Line 7: Quick Shop is using the plugin automaketemplate for generating
templates.We allocate our HTML code from the example above.

Line 11: If a visitor is clicking the [Reset]-button of the Browser
search form, he should forwarded to the realhome page of the Quick
Shop. We allocates the pid of the real home page like in the plugin
(see below).


.. _Plugin:

Plugin
""""""

|img-8| Illustration 10: The tab [General] in the Browser plugin

Visitors should be forwarded to our home page in every case. Thus we configure the pid for singe views and for list views. Tab [General]

Enable the configuration mode in the field "Views". Select
[Configured].

Set the pid for single views to the pid of your home page.

Set the pid for list views to the pid of your home page.


.. _CSS:

CSS
"""

Because we set 1.config.disableAllHeaderCode to 1, we have lost all
CSS code.

We have to add the CSS code with the content element HTML.

|img-5|

Take your CSS code from your home page and copy it into an HTML
element on your page for facebook

We have copied two stylesheets (see 3. in the illustration above).


.. _Page-Tree:

Page Tree
"""""""""

There is a curiosity, we didn't understand: If you like a tab for your
application in your facebook profile, you need a subpage.

Please copy your facebook page into your facebook page and call it
like your application (or something else).

|img-5|

Our tree looks like:

Home page

facebook

Quick Shop


.. _Integrate-Your-Plugin-in-Facebook:

Integrate Your Plugin in Facebook
---------------------------------


.. _Conditions:

Conditions
^^^^^^^^^^

|img-9| Illustration 13: Our facebook account

You need a facebook account only. We take the account of Angela Meckel. Please don't take our Angi for
the other Angi - the German chancellor.


.. _Work-Flow:

Work Flow
^^^^^^^^^


.. _Login:

Login
"""""

Login to your facebook account


.. _Create-a-New-Application:

Create a New Application
""""""""""""""""""""""""

|img-5|

Account > Application Settings

Developer(direct link: `http://www.facebook.com/developers/
<http://www.facebook.com/developers/>`_ )

|img-5|

Button [+ Set Up New Application]

|img-5|

Name of your Application. I will displays in facebook contexts

Agree with facebook terms and conditions

Create your application

|img-5|

Captcha

Submit it!

|img-5|


.. _Configure-Your-Application:

Configure Your Application
""""""""""""""""""""""""""

|img-5|

Menu [Editing Settings]

|img-5|

Main menu [About]: Everything should be self explaining.

|img-5|

Main menu [Facebook Integration]

Canvas page: title for your application. Use only letters and
underscores, because it will be a path.

Canvas URL: The URL of your website with the facebook application
(first level)

Tab URL: The URL of your website with the facebook application (second
level) `:sup:`0`  <#sdfootnote1sym>`_

|img-5|


.. _Test-Your-Application:

Test Your Application
^^^^^^^^^^^^^^^^^^^^^

|img-5|

Click the button [Go to your application]

|img-5|

Facebook should display your application like in the illustration
above.


.. _In-Cases-of-Errors:

In Cases of Errors
""""""""""""""""""

Sometimes there are errors.

Be happy, if you get a qualified error message. If you get, please try
to solve the described problems or bugs.

If you don't get a qualified error message or if you get an empty
page, check your configuration please.


.. _Add-Your-Application-to-Your-Profile:

Add Your Application to Your Profile
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

|img-5|

Menu: Account

Item: Application settings

|img-5|

Menu [Edit settings] of your application

Tab [Profile] > Field "Tab": Available (add) <- Click on "add"

|img-5|

Tab [Quick Shop]

|img-5|


.. _Helpful-suggestions:

Helpful suggestions
-------------------

If you have helpful suggestions, feel free to contact me:
http://wildt.at.die-netzmacher.de.


.. _To-Do-List:

To-Do List
----------

Nothing to do.


.. _Change-Log:

Change Log
----------

3.4.1

Publishing

3.4.0

Initial release


.. _Illustration-Index:

Illustration Index
------------------

Illustration 1: Bookmarks in the list view 3

Illustration 2: Bookmarks in the single view 3

Illustration 3: Browser application on facebook.com 4

Illustration 4: Bookmarks in the Browser plugin 4

Illustration 5: Tutorial in PDF format 5

Illustration 6: The tab [Social Media] in the Browser plugin 6

Illustration 7: List view and HTML code 7

Illustration 8: Start page of the Quick Shop 8

Illustration 9: Quick Shop without <head> and <body> 8

Illustration 10: The tab [General] in the Browser plugin 9

Illustration 11: CSS as content elements 10

Illustration 12: Page in the page 10

Illustration 13: Our facebook account 11

Illustration 14: Select the developer application 11

Illustration 15: Create your application 11

Illustration 16: Create your application 12

Illustration 17: Submit it! 12

Illustration 18: Your application (here: Quick Shop) 12

Illustration 19: Your application (here: Quick Shop) 13

Illustration 20: Menu About 13

Illustration 21: Menu Facebook Integration 14

Illustration 22: Your application (here: Quick Shop) 14

Illustration 23: Go to your application 15

Illustration 24: Your application on facebook 15

Illustration 25: Go to application settings 16

Illustration 26: Edit the settings of your application 16

Illustration 27: The tab [Quick Shop] in your profile 17

Illustration 28: Your application (here: Quick Shop) in your profile
17

`0 <#sdfootnote1anc>`_ It seems, that you need a second level in every
case, if you like a tab in your profile. If you find an easier way,
please send me an e-mail.

21


.. ######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
.. :border: 0
.. :height: 27
.. :id: graphics25
.. :name: graphics25
.. :width: 30

.. |img-4| image:: img-4.png
.. :align: bottom
.. :border: 0
.. :height: 268
.. :id: graphics5
.. :name: graphics5
.. :width: 302

.. |img-5|      image:: data:
   :alt: Frame1
.. :align: bottom
.. :id: Frame1
.. :name: Frame1

.. |img-6| image:: img-6.jpeg
.. :align: left
.. :border: 0
.. :height: 218
.. :id: graphics7
.. :name: graphics7
.. :width: 227

.. |img-7| image:: img-7.jpeg
.. :align: left
.. :border: 0
.. :height: 756
.. :id: graphics4
.. :name: graphics4
.. :width: 454

.. |img-8| image:: img-8.jpeg
.. :align: left
.. :border: 0
.. :height: 504
.. :id: graphics10
.. :name: graphics10
.. :width: 454

.. |img-9| image:: img-9.jpeg
.. :align: left
.. :border: 0
.. :id: graphics12
.. :name: graphics12
.. :width: 100%