Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

A Magnolia 5 App that moves your content to social networks and shows an aggregate view of your social presence

Social Media Hub

Matteo Pelucco

September 18th, 2013

2

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Table of content

A brief introduction Magnolia Social Hub at a glance

Social networks trends: 2013 Reasons Features Architecture DEMO

Status of the project Future improvements

#mgnl_social_hub

3

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Table of content

A brief introduction Magnolia Social Hub at a glance

Social networks trends: 2013 Reasons Features Architecture DEMO

Status of the project Future improvements

#mgnl_social_hub

4

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

A brief introduction: Tinext

Who we are: Tinext Swiss company (Lugano/CH & Gallarate/IT) Founded in 2001 Enterprise oriented solutions More than 500 projects 40 employees

Highlights www.alarabiya.net www.rsi.ch www.lausanne.ch www.lugano.ch www.ticino.ch www.royalcaribbean.it

www.tinext.com

5

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

A brief introduction: Tinext and Magnolia

We started to use Magnolia in 2008 Version 3.5.8 (!!) + Magnolia OnAir (RSI, Radio and Television portal) Strong community presence that year

Premium Magnolia partner since 2009 More than 60 Magnolia projects launched so far

4.3.x EE 4.4.x EE

More than 40 Magnolia modules already released for our customer: Integration of external datasources, SAP, Funds solutions Custom dashboards for managing content / activities / workflows SVN browser, virtual URI, mirroring, Google Analytics spotlights..

Jumping on Magnolia 5 train by the end of September We were waiting for EE!

Community We are active in the Magnolia community (forum) A simple module already on the Forge: Frisbee

6

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

A brief introduction: Who am I?

Software engineer (senior?) 32 years old I have been working for Tinext since 2007 What I like:

Opensource solutions Java + Spring Eclipse Javascript and CSS, JSON CMS ecosystem (not only Java!) High availability websites Leading technical teams

What I also like Playing guitar Swim and run Power metal

@matteopelucco

7

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Table of content

A brief introduction Magnolia Social Hub at a glance

Social networks trends: 2013 Reasons Features Architecture DEMO

Status of the project Future improvements

#mgnl_social_hub

8

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: reasons

We decided to share something with the community. Yes, it means CE Ok. But what?

9

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Social Media Stats

Facebook Daily active users: 665 M

M = MILLLLLLION: 665.000.000 users. Per day. 80% of the world’s internet population

Twitter Is the fastes growing social network

44% is the growth from June 2012 to March 2013

21% of the world’s internet population Google +

26% of the world’s internet population Linkedin

15% of the world’s internet population But they are PRO.

10

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: reasons

An existing working project That is always a good starting point!

Al Arabiya team asked us to develop a Social Media Dashboard Basic functionalities:

Share articles on Facebook, Twitter Manual account configuration Automatic hashtagging (simple)

Other customers start to require the same functionalities Magnolia 5 has been released and the Conference was approaching..

Ok, it is enough. Let’s do it!

11

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: reasons

12

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: reasons

Which platform to use? We are still working on 4.3.x and 4.4.x branches, but we want to move to 5.x

Need to find a way to use the same code on different Magnolia versions Magnolia 5 still supports old-but-gold Pages!

Ok. Let’s do a Page App!

Mgnl 4.3

Mgnl 4.4

Mgnl 5.0

13

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: what we need

Multiple social networks support Facebook Twitter Linkedin Google +

Content sharing Manual Automatic, during activation Manual sharing of a text Title, text and picture override

Multilanguage URL shortening Automatic hashtagging History of what we shared in the past Stats, of course! A lot of them.. Configuration (developers like to configure everything!)

14

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: roadmap

September ‘13: version 1.0 (CE) Stable overall architecture Ready for Magnolia Conference Development of all functionalities Availability on the Forge (yes, finally we did it!)

October ‘13: version 1.1 (CE) Bug fixes, feedback from the community Small improvements

November / December ‘13: version 2.0 (CE + EE) Linkedin Advanced stats (more and more stats) Integration with activation workflow Integrated url shortener Native Magnolia 5 App

15

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: architecture

Maven module Standard Magnolia Module

Pages Config

16

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: architecture

Magnolia 5 Pages launched

by 3 apps

Magnolia 4.x Pages launched by AdminCentral Menu items

17

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Magnolia Social Hub at a glance: demo time!

Stop PPTing.. Let’s see it in action!

18

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Table of content

A brief introduction Magnolia Social Hub at a glance

Social networks trends: 2013 Reasons Features Architecture DEMO

Status of the project Future improvements

#mgnl_social_hub

19

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Status of the project

Time spent: 6 working days Ready for production Currently, developed against 5.0.1 CE

Should be easily ported to 5.1 EE and easily backported to 4.3.x or 4.4.x Few small improvements to make, expecially for the UI The module is on the Forge

http://git.magnolia-cms.com/gitweb/?p=forge/social-media-hub.git;a=summary

Please, download! Use it!

And tell us what you need more! Wiki page

http://wiki.magnolia-cms.com/display/WIKI/Social+Media+Hub

20

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Table of content

A brief introduction Magnolia Social Hub at a glance

Social networks trends: 2013 Reasons Features Architecture DEMO

Status of the project Future improvements

#mgnl_social_hub

21

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Future improvements

Move from a JS solution to a Java solution This allows automatic content sharing during activation Issues with Twitter: sometimes, OAuth (1.1!!) token needs to be refreshed

(manual operation) More advanced Facebook Insights

Export to PDF Automatic daily/weekly mail reports

Other social networks support Google +, LinkedIn

22

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Future improvements

Social network pluggability: Part of the code needs to be rewritten This will allow to inject other social networks «by-configuration» (IoC)

In-page stats / sharing toolbar Code refactoring to have the same functionalities immediately available on

Magnolia 4.3 / 4.4 Now there is a branch, few Java classes to change..

Native Magnolia 5 App BOT posting

automatically post/tweet from a list of text messages

23

Per inserire una nuova slide:

1. Cliccare sul bottone sotto al box Nuova diapositiva

2. Seleziona il layout appropriato dalla galleria

3. I box di inserimento sono già preformattati

Utilizzo delle icone Ci sono a disposizione un numero finito di icone utilizzabili a piacimento all’interno delle slides Alcune istruzioni sull’utilizzo sono posizionate nell’ultima slide che risulta nascosta quindi non visibile durante la presentazione

Premi Alt+F9 per visualizzare la griglia e i margini raccomandati

Le tabelle sono interamente preformattate. Una volta create è possibile ridimensionarle e spostarle a piacimento. Modificare l’aspetto nella casella Opzioni stile tabella dopo aver cliccato su Strumenti tabella.

Q&A time

Do you have any doubt? Now it is time to ask! Or during the coffee break / launch!

If you prefer, you can contact me later:

Email: matteo.pelucco@tinext.com Mobile: +39 347 4531281 Skype: tinext_matteo_pelucco

Thank you for your attention.

Tinext SA Strada Regina 42 6943 Bioggio Switzerland +41 91 612 22 66 info@tinext.com www.tinext.com

Tinext Italia Srl Via Borghi 8 21013 Gallarate Italy +39 0331 667 747