Икономически Университет – Варна

Факултет „Информатика”

Катедра „Информатика”

Дипломна работана тема

„Социални мрежи и тяхното приложение при

изграждане на уебсайтове и Facebook

апликации”

Дипломант: Димитър Данаилов Научен ръководител:

Факултетен номер: 3043 доц. д­р Владимир Сълов

Специалност: Информатика

гр. Варна, 2013

1

Съдържание

Увод 5

Глава I. Същност и историческо развитие на социалнитемрежи

7

1. Същност на социалните мрежи 7

2. История на Социалните мрежи 8

3. Същност на социалните мрежи като I­net услуга 10

4. Историческо развитие на социалните мрежи като I­netуслуга

16

Глава II. Изграждане на Facebook Aпликация за споделянена снимки

27

1. Социални плъгини 29

1.1. Like Button 29

1.2. Send Button 34

1.3. Follow Button 36

1.4. Comments Box 37

1.5. Share Dialog 41

1.6. Activity Feed 43

1.7. Recommendations Box 49

1.8. Recommendations Bar 52

1.9. Like Box 56

1.10. Login Button 60

1.11. Registration 62

1.12. Facepile 71

2

1.13. Embedded Posts 73

2. Open Graph Protocol 75

3. Преглед на библиотеките във Facebook 85

4. Изграждане на Facebook Апликацията “Пътувай сBgrazpisanie”

90

4.1. Обобщен План за работа при изграждане на системата 90

4.2. Технически и програмни изисквания към апликацията 99

4.3. Изготвяне на база от данни за апликацията 100

4.4. Структура на апликацията 104

4.5. Комуникация със сървъра при качване на снимка 109

4.6. Постъпково детайлно описание на ключовите моментив кода

111

4.6.1. Инициализация 111

4.6.2. Взимане състоянието на потребителя 112

4.6.3. Зареждане на диалог за влизане във Facebook идостъп на апликацията до данните на потребителя

113

4.6.4. Проверка дали потребителя е харесалстраницата на Bgrazpisanie във Facebook

114

4.6.5. Проверка на позволенията, които са дадена наапликацията

116

4.6.6. Създаване на потребител в локалната база отданни

118

4.6.7. Публикуване на съобщение на стената напотребителя във Facebook

119

4.6.8. Допълнителни JavaScript Oбекти 120

4.7. Интерфейс на апликацията 121

3

Заключение 128

Приложение 130

Литература 131

4

Увод

Хората са социални индивиди и като такива във времето се е наложило

да се проучи тяхното поведение, за да се дадат отговори на техните

взаимовръзки в самата социална група. Това поведение на хората се

обяснява, чрез термина социална мрежа. Проучването на социалните мрежи

започва в края на XIX век и е дял от социалните науки.

Социалните мрежи в Информатика се появяват още в зората на

компютърната епоха, но тяхното истинско развитие се случва в последните

двадесет години благодарение на появата на Интернет.

Основният пазар на социалните мрежи може да се каже, че е глобален

макар, че има и страни като Китай и Северна Корея, където достъпа е

ограничен. В Северна Корея като цяло използването на Интернет е

забранено, единствено учени и военни могат да го използват, но те

подлежат на строг контрол. В Китай ситуацията е по ­ добра, но и при тях

се наблюдава строг контрол върху свободата на словото като дори търсачка

като Google е заменена с Китай еквивалент : Baidu. Въпреки това към днешна

дата социалните мрежи се използват активно от половината население на

Земята, което показва тяхната значимост в нашето ежедневие.

Цел на настоящата дипломна работа е да се представят и да се

систематизират социалните мрежи и да се разработи Facebook апликацията

“Пътувай с Bgrazpisanie”.

За реализиране на поставените цели са дефинирани следните задачи :

5

Да се представи същността на социалните мрежи от теоретична гледна

точка.

Да се дадат практически примери за тяхната интеграция при

разработването на софтуер.

Да се анализират основните библиотеки за комуникация със

социалните мрежи при разработка на софтуер.

Да се разработи практически пример за Facebook апликация тип игра.

6

Глава I. Същност и историческо развитие на социалните

мрежи

1. Същност на социалните мрежи

Социалната мрежа е теоретична конструкция, която се използва в

социалните науки да се изучават взаимоотношенията между лица, групи,

организации или дори и цели общества (наричани още социални единици).

Терминът се използва при описването на социалната структура. Връзките

между една социална единица с друга социална единица се нарича социален

контакт. Аксиома на социалната мрежа е подхода за разбирането на

социалното взаимодействие е, че социалните явления трябва да бъдат

изследвани чрез свойствата на отношенията между социалните единици,

вместо свойствата на отделните социални единици. По този начин едно от

основните свойства на социалната мрежа, че индивидуалната единица се

пренебрегва и не е обект на изследване. Именно поради много различните

видове отношения образувани в социалните мрежа, мрежовия анализ е

полезен, за да се разбере поведението на различните социални единици в

самата социална група. В социалните науки тези области на проучване

включват :

антропология;

биология;

комуникационни изследвания;

икономика;

география;

информационни науки;

7

организационни изследвания;

социална психология;

социология;

социолингвистика;

Важно е да се отбележи, че социалните науки не се ограничават само да

изброените по ­ горе направления.

2. История на Социалните мрежи

Идеята за социалните мрежи се заражда през XIX век от френският 1

социолог Емил Дюркем (Émile Durkheim) и германският социолог Фернанд

Тоннес (Ferdinand Tönnies) при изследванията, които правят над социалните

групи и техните връзки.

Toннес твърди, че социалните групи могат да се съществуват като лични

и преки социални връзки, които споделят ценности и вярвания (Gesellschaft,

German нарича това “общност”) или безлични, официални, инструментални 2

социални връзки (Gesellschaft, German нарича това “общество”).

Дюркем казва в своята книга (De la division du travail social: étude sur

l'organisation des sociétés supérieures) , че социалните явления възникват, 3

когато има взаимодействие между гражданите и по този начин те образуват

социални групи и вече не може да се отчитат отношенията им като

1 Social Network, https://en.wikipedia.org/wiki/Social_network, 08.20132 Tönnies, Ferdinand (1887). Gemeinschaft und Gesellschaft, Leiapzig: Fuesa's Verlag. (Translated, 1957 byCharles Price Loomis as Community and Society, East Lansing: Michigan State University)3 Durkheim, Emile (1893). De la division du travail social: étude sur l'organisation des sociétés supérieures,Paris: F. Alcan. (Translated, 1964, by Lewis A. Coser as The Division of Labor in Society, New York

8

отделните частици, а взаимовръзката им в социалната група.

Георг Зимел (Georg Simmel) през XX век в своята книга (Soziologie) 4

разглежда влиянието на социалните мрежи върху поведението на

обществото спрямо техните размери.

Основни тенденции в областта се появяват през 30­те години на XX век

от няколко групи работещи в сферата на психологията, антропологията и

математика, но работещи самостоятелно едни от други.

В този период от страна на психологията Якоб Морено (Jacob L. Moreno)

и неговите студенти започва систематично записване и анализиране на

социалното общуване в малки групи ­ класни статии и работни известно

като “социометрия”.

В антропологията, в основата на теорията социалната мрежа е

теоретичната и етнографската работа на Бронислав Малиновски (Bronislaw

Malinowski), Алфред Радклиф­Браун (Alfred Radcliffe­Brown) и Клод

Леви­Строс (Claude Lévi­Strauss).

В социологията, в началото на 30­те на XX век работата на Талкот

Парсънс (Talcott Parsons) подготвя основите на релационния подход към

разбирането на социалната структура. По ­ късно Петър Блау (Peter Blau)

използва теорията на Парсънс, за да анализира на релационните връзки на

социалните единици като неговата работа е известна като теория на

4 Simmel, Georg (1908). Soziologie, Leipzig: Duncker & Humblot.

9

социалния обмен.

През 70­те години на XX век все по ­ голям брой учени работят върху

развитието на разбирането на социалните мрежи и тяхното влияние в

различните обществени групи.

Харисон Уайт (Harrison White) и неговите студенти от Факултета по 5

Социални връзки в Харвардския Университет изработват редица

математически модели на социалните структура включително свободните

вериги и блоковете модели. Независимо от работата на Харисон Уайт в

същият факултет Чарлз Тили (Charles Tilly) се фокусира върху социалните

мрежи и тяхното влияние върху политическия живот, обществената

социология и социалните движения.

3. Същност на социалните мрежи като I­net услуга

Социалните мрежи като I­net услугa на англ. се използва термина “social

networking service” е платформа за изграждане на социални мрежи или 6

социални отношения между хората като например :

споделяне на интереси;

споделяне на дейности (снимки, видеа, статии и т.н);

инициативи;

реални връзки;

и много други;

5 Harrison White, https://en.wikipedia.org/wiki/Harrison_White. 08.2013г.6 Social networking service, https://en.wikipedia.org/wiki/Social_networking_service, 08.2013г.

10

Социалната мрежа се състои често от представяне на всеки

потребител(често това се нарича профил), неговите/нейните дейности, както

и разнообразие от допълнителни услуги. Често пъти тези допълни услуги

биват :

споделяне на снимки;

споделяне на публикации;

споделяне на събития;

споделяне на интереси;

По ­ известните към днешна дата социални мрежи в глобален план са :

Facebook

Twitter

Google+

LinkedIn

Tumblr

Foursquare

Pinterest

Instagram

и много други

През 2011 е направено проучване (направено от американската

организация “Pew Internet & American Life Project”) в Америка и е

установено, чe 47% от възрастните американци използват поне една

социална мрежа активно.7

7 Eat Your Vegetables, and Don’t Forget to Tweet, http://finance.yahoo.com/news/pf_article_112952.html,08.2013 г.

11

В края на Декември 2012 “Pew Internet & American Life Project” прави

подобно проучване и резултатите са, че само в рамките на около 18 месеца

популярността на социалните мрежи е стигнало ниво от 67 % както е

показано на фиг.18

8 Pew Internet: Social Networking (full detail),http://pewinternet.org/Commentary/2012/March/Pew­Internet­Social­Networking­full­detail.aspx, 08.2013 г.

12

Фиг. 1 ­ Статистическо използване социалните мрежи от възрастните

американци

Като на база на това проучване към Декември 2012 се получават следните

данни за използваемостта на социалните мрежи :

13

15 % от възрастните американци използват Pinterest

13 % от възрастните американци използват Instagram

6 % от възрастните американци използват Tumblr

67 % от възрастните американци използват Facebook

16 % от възрастните американци използват Twitter

А към Aвгуст 2012 само 20 % от анкетираните използват LinkedIn.

От статистическите данни по ­ горе може да се направят следните изводи :

Влиянието на социалните мрежи се засилва

Все още социалните мрежи се използват повече за забавление

Жените по ­ често се възползват от услугите на социалните мрежи

Facebook си остава най ­ използваната социална мрежа

Този бум на социалните мрежи се дължи на техните позитиви, които

имат върху обществото. Използвайки статията “The Positive Impact Of Social

Networking Sites On Society [Opinion]” могат да се дефинират няколко общи 9

признака за всички социални мрежи :

Намери твоите нови приятели ­ Никога досега не е било толкова лесно

да намериш и да завършиш приятелства с хора от другия края на света

без дори да ги си виждал.

Съпричастие ­ една от характеристиките на социалните мрежи е, че

могат бързо и лесно да обединят голям на брой хора под обща кауза.

Пример от последните месеци в България са протестите за и против

9 The Positive Impact Of Social Networking Sites On Society [Opinion],http://www.makeuseof.com/tag/positive­impact­social­networking­sites­society­opinion/, 08.2013г.

14

новото правителство.

Нов начин за комуникация ­ социалните мрежи ни предоставят лесен и

бърз начин за комуникация с нашите приятели. Едно от предимствата

на комуникацията в социалните мрежи е, че открито може да изкажете

своето мнение и то ще бъде чуто и видяно от десетки ваши приятели,

за разлика от едно телефонно обаждане.

Винаги в крак с информацията ­ социалните мрежи не са просто

вътрешен кръг от вашите приятели и познати, те ни дават възможност

да научим последните новини и събития в страната и чужбина.

Намиране на социална група с общи интереси ­ социалните мрежи ви

помагат да намерите хора, които споделят интереси подобни на

вашите. В Twitter хората, които ще ви бъдат предложени да следвате са

хора, които имат близки до вашите интереси. Във Facebook при

регистрацията на вашия профил ще бъдете попитани за вашите

интереси. В Google+ всичко е построено върху кръгове с цел по ­

лесно и по ­ бързо достигане на информацията.

За съжаление се наблюдават и отрицателни последствия от използването

на социалните мрежи. През Декември 2012 “Pew Internet & American Life

Project” прави проучване при потребителите на социалната мрежа Facebook

и се оказва, че 61 % от анкетираните доброволно са решили да не използват

социалната мрежа за една или повече седмици . Други изследвания се 10

фокусират върху влиянието на социалните мрежи и тяхното влияние върху

студентите в университетите. В статията “Negative Effects of Social

10 Pew Internet : Coming and going on Facebook,http://www.pewinternet.org/Reports/2013/Coming­and­going­on­facebook/Key­Findings.aspx, 08.2013г.

15

Networking Sites for Students” са изброени следните недостатъци от 11

прекомерното използване на социалните мрежи :

Намалено време за обучение ­ свито е времето за самообучение зареди

използването на социалните мрежи

Разсеяност ­ счита се, че студентите лесно губят своята концентрация

и прибягват до услугите на социалните мрежи

Намаляването на истинския човешки контакт ­ прекомерното

използване на социалните мрежи пречат на студентите до

социализирането извън Internet. Много от работодалите са все по ­

недоволни от комуникативните умения на кандидатите при интервю за

работа.

Намаляване на речевия и писмения набор на езика ­ наблюдава се по ­

голямо използване на жаргонни думи.

4. Историческо развитие на социалните мрежи като I­net услуга

Историческото развитие на социалните мрежи като I­net услуги започва

още в началото на компютърната ера. Позовавайки се на статията “The Brief

History of Social Media” развитието на социалните мрежи може да се 12

раздели на три етапа :

Преди зората на WWW (“Before the dawn”)

Зората на WWW (“The Dawning”)

След зората WWW(“Аfter the dawn”)

11 Negative Effects of Social Networking Sites for Students,http://performancing.com/negative­effects­of­social­networking­sites­for­students/, 08.2013г.12 The Brief History of Social Media,http://www.uncp.edu/home/acurtis/NewMedia/SocialMedia/SocialMediaHistory.html, 08.2013г.

16

Първият етап се характеризира със следните събития :

1978 г. ­ В Чикаго двама любители създават бюлетин система (на англ.

bulletin board system ­ BBS), чрез която да анонсират своите приятели

за предстоящи срещи. Системата позволява да се правят анонси и

споделяна на постове. По този начин се поставя началото на

виртуалната общност.

1979 г. ­ появява се “Usenet”, които е ранен борд бюлетин, който

свързва Университета Дюк (“Duke University”) и Университета на

Северна Каролина (“University of North Carolina”).

1989 г. ­ Британският инженер Тим Бърнърс­Лий (Tim Berners­Lee)

започва работа в CERN (Европейската организация за ядрени

изследвания в Швейцария) като неговата работа в последствие ще

допринесе за появата на World Wide Web.

1992 г. ­ Tripod създават oнлайн общност за студенти и млади хора.

1993 г.

Учените от CERN ни даряват технологията World Wide Web

Студенти от NCSA (Национален център за супер компютърни

приложения в Университета на Илинойс в Урбана­Шампейн)

показват първия графичен браузър наречен Mosaic и уеб

страници във вида, които ги познаваме.

Повече от 200 уеб сървъра са онлайн към този момент

След появата на WWW започва втория етап от развитието на социалните

мрежи.

1994 г.

Beverly Hills Internet стартират своята платформа Geocities, която

позволява изработката на свои собствени сайтове моделирани

17

по различните типове на географските райони. Geocities достига

1 милион страници през 1997. През 2009 г. Geocities бива спиран

в САЩ с 38 милиона страници.

Вече са налице над 1500 уеб сървъра като хората приемат към

този момент Internet като “Информационна Магистрала”

1997 г.

World Wide Web достига 1 милион страници

Започват да се появяват Блоговете

SixDegrees.com добавят като опция на своите потребители

възможност да се направят профили и списъци на своите

приятели

AOL Instant Messenger добавят чат услуги на своите потребители

Blackboard е създадена като система за онлайн курсове по

мениджмънт за преподаватели и учащи се

1999 г. ­ Friends Reunited е една от първата социална мрежа като е 13

основана във Великобритания с цел да намериш съучениците си от

училище. Създаделите на Friends Reunited избират за слоган на техния

сайт : “Милиони спомени на едно място” (на англ. “Millions of

memories all in one place”).

2002 г.

Friendster е сайт за социални игри базиран в Каула Лампур, 14

Малайзия и достига до 3 милиона потребителя само за 3 месеца.

Слоганът на Friendster е “Живеейки в Играта” (на англ. “Living

the Game”). През юни 2010г. Friendster е вече платформа с 8.2

13 Friends Reunited, http://en.wikipedia.org/wiki/Friends_Reunited, 08.2013г.14 Friendster, http://en.wikipedia.org/wiki/Friendster, 08.2013г.

18

милиона потребителя.

AOL вече имат 34 милиона потребители

2003 г.

Стартира MySpace

Linden Lab създава 3D виртуален свят под името “Втори живот”

(на англ. “Second Life”).

LinkedIn стартира като социална платформа с цел бизнес

контакти.

Има повече от 3 милиарда страници

2004 г.

Facebook стартира за студентите от Харвардския Колеж. По

това време се анонсира като версия Friendster за колежите.

Flickr стартира като хостинг за снимки.

Digg e oснована като социален новинарски сайт, където хората

споделят истории от Интернет.

Третият етап от развитието на социалните мрежи се характеризира със

следните събития :

2005 г.

Bebo с акроними “Blog Early” и “Blog Often” стартират като

социална мрежа

News Corporation, световна медийна компания, основана от

Рупърт Мърдок закупва MySpace за 580 милиона долара.15

Facebook пуска своя версия за гимназисти

Friends Reunited достига 15 милиона потребителя и бива

закупена от британската телевизионна компания ITV.

15 Myspace, http://en.wikipedia.org/wiki/Myspace, 08.2013г.

19

YouTube стартира като платформа за видео клипове

Има повече от 8 милиарда страници

2006 г.

MySpace става най ­ популярната социална мрежа в САЩ на

базата на месечни уникални потребители. Myspace си запазва

това водачество до 2008 г. като е изместен от Facebook от

челната позиция

Twitter стартира като социална мрежа и микро блогинг сайт.

Потребителите в Twitter комуникират помежду си, чрез

съобщения до 140 символа. Като за нейно начало цитирайки

нейния създател Джак Дорси (Jack Dorsey) се счита статията

“Silicon Valley’s All Twttr”16

Facebook вече позволява на всеки, които има възраст над 13

години да се създаде собствен профил

2007 г.

Microsoft купува дял от Facebook

Facebook дава възможност на външни разработчици да създават

приложения.

2008 г.

Facebook успява да надмине MySpace по уникални месечни

потребители. Междувременно Facebook безуспешно се опитват

да закупят Twitter.

Bebo са закупени от AOL за 850 милиона долара. В последствие

AOL ще препродадат Bebo като неуспешна социална мрежа.

2009 г.

16 Silicon Valley’s All Twttr, http://gigaom.com/2006/07/15/valleys­all­twttr/, 08.2013г.

20

Facebook e класирана като най ­ използваната световна социална

мрежа с повече от 200 милиона потребителя. Трафикът на сайта

е два по ­ голям от този на MySpace.

ITV продава Friends Reunited на Brightsolid Limited.

Според проучване около 25 % от населението на Земята е

използвало Интернет.

2010 г.

Facebook достига 400 милиона потребителя.

За да се конкурират с Facebook и Twitter, Google решават да

пуснат Google Buzz. Google Buzz е социална мрежа, която е

интегрирана, чрез Gmail. Според Google само за първата

седмица потребителите на Gmail са създали около 9 милиона

поста.

AOL продава социалната мрежа Bebo на Criterion Capital Partners.

АОL определят закупуването на Bebo като грешка.

Стартира Instagram

Демократичният национален комитет (Democratic National

Committee) на САЩ подканят хората да следят сметките на

президента Барак Обама във Facebook, Twitter, MySpace.

По ­ голямата част от вестниците са дигитализирани в Интернет

и по този начин Интернет се превръща в основен източник за

новини за Американците според Pew Internet и American Life

Project. Интернет е третата най ­ популярна платформа за

новини, като според редица изследвания много от

потребителите в социалните мрежи си персонализират емисиите

за новини (на aнгл. “news feed”). Националните и местните ТВ

21

станции все още са силни, но се забелязва, че националните и

местните вестници отстъпват на Интернет.

2011 г.

Социалните мрежи могат да се достъпят практически отвсякъде

и са превърнали в неразделна част от ежедневието ни с повече

от 550 милиона потребители във Facebook, 65 милиона Тwitter

съобщения се изпращат всеки ден, Youtube отчитат 2 милиарда

прегледа на видео клипове всеки ден, а LinkedIn има 90 милиона

потребителя.

Tърговията в социалните мрежи е във възход, за което помагат

мобилните устройства.

Появяват се опасения. че споделената информация в социалните

мрежи застрашава неприкосновеността на личния живот.

Apple анонсират Ping социална мрежа за музика, която да бъде

интегрирана с iTunes.

MySpace и Bebo отделно един от друг решават да се направят

редизайн на своите сайтове с цел да се конкурират по ­ успешно

с Facebook и Twitter.

Google спират Google Buzz на 15 декември 2011 и стартират 17

своята нова социална мрежа Google +

Според някой изследвания през 2015 Интернет потребителите

ще се удвоят като това означава, че бъдат обхванати около 60 %

от населението на Земята.

2012 г.

Достъпа до Интернет все повече се улеснява и това

17 Google Buzz, http://en.wikipedia.org/wiki/Google_Buzz, 08.2013 г.

22

благоприятства все повече хора да се свързват с Интернет за по

­ дълги периоди от време. Около 2 милиарда от населението на

Земята използват Интернет и заедно с това социалните мрежи,

като според изследване за този период :

213 милиона жители на САЩ използват Интернет, чрез

компютри

52 милиона използват Интернет, чрез смартфони

55 милиона използват Интернет, чрез таблети

Други източни, които хората използват да се свържат с

Интернет са преносими музикални плеъри, електронни четци,

Телевизори с Internet поддръжка и игрови конзоли (game

consoles).

Дошло е времето, в което основно потребителите достъпват

социалните мрежи, чрез своите смартфони.

Повече от половината хора на средна възраст между 25 ­ 34

години използват социалните мрежи, докато са на работа. Почти

една трета от младите хора на средна възраст между 18 ­ 24

години използват социалните мрежи в банята. Всички използват

социалните мрежи, за да поддържат връзка с познати, да бъдат

информирани или да бъдат развеселявани.

Рекламодателите поглеждат все повече към социалното

“харесване”, за да увеличат видимостта на бранда си.

Facebook шокират всички финанси в САЩ и купуват Instagram

за 1 милярд долара.18

18 Facebook Buys Instagram for $1 Billion, http://mashable.com/2012/04/09/facebook­instagram­buy/,08.2013 г.

23

Facebook достига един милиард потребители през октомври

2012 г. На фиг. 2 е показано ръста на потребителите във19

Facebook.

Фиг. 2 ­ Ръст на потребителите във Facebook за периода Декември

2004 ­ Октомври 2012 г.

В YouTube всеки месец се регистрират около 800 милиона

потребителя като се достига 1 трилион гледания за година или

около 140 преглеждания за всеки жител на Земята. Седемдесет

процента от трафика идва извън САЩ, като YouTube може да се

използва на 60 различни езика.

19 Facebook reaches one billion users,http://money.cnn.com/2012/10/04/technology/facebook­billion­users/index.html, 08.2013г.

24

Проектът на Apple Ping се указва неуспешен и бива затворен, но

натрупания опит се използва да се усъвършенства iTunes.

Все повече изследвания и хора наблягат за рисковете от

прекаленото споделяне на лична информация в социалните

мрежи.

2013 г.

YouTube достига квотата от гарантирани 1 милиард потребители

месечно с 4 милиардa посещения на ден. YouTube пуска като

опция платени канали по този начин се цели обезпечаване на

създателите на съдържание.

Facebook достигат 1.11 милиарда потребителя.

Twitter регистрират повече от 500 милиона потребителя, от

които 200 милиона са активни.

Клиентите на Apple достигат границата от 50 милиарда

изтегления на приложения като отново се правят

усъвършенствания по iTunes, наблюдава се засилване на

социалните игри на пазара.

Yahoo закупуват Tumblr блогинг социална мрежа, с 170 милиона

потребителя и 100 милиона блога.

Flickr има 87 милиона потребителя със 8 милиарда съхранени

снимки, докато Instagram постигат 100 милиона потребителя със

4 милиарда съхранени снимки.

LinkedIn има вече 225 милиона потребителя, като същевременно

MySpace имат едва 25 милиона.

Pinterest достигат до 48.7 милиона потребителя.

Dropbox достига 100 милиона потребителя с 1 милиард качени

25

файлове дневно.

Google + задминават Twitter през Януари 2013 г. и стават втората

най ­ голямата социална мрежа с 500 милиона потребителя, от 20

които 359 милиона активни.

Опасенията върху поверителността на личния живот не

намаляват.

20 Google+ Surpasses Twitter to Become Second Largest Social Network,http://www.searchenginejournal.com/google­plus­surpasses­twitter­to­become­second­largest­social­network/57740/, 08.2013 г.

26

Глава II. Изграждане на Facebook Апликация за споделяне на снимки

В днешно време много малко от модерните сайтове нямат интеграция на

социалните мрежи вътре в тях. Дали ще бъде примерно интеграция на

Facebook login, Twitter login, Facebook like button, Twitter button и т.н. по една

или друга форма социалните мрежи са неразделна част от развитието на

всеки един сайт. Основните причини за такова изискване от страна на

клиентите са няколко :

По ­ голяма популярност и по ­ голяма посещаемост на самите

сайтове. Например има няколко проучвания, че интеграцията на

плъгина на facebook за коментари вдига средната посещаемост с

около 30 %. Друг пример е интегрирането на така наречения game

bonification ­ харесайте тази страница и можете да спечелите почивка,

ваканция и т.н или ще получите 10 % намаление.

Много от сайтове към днешно време прибягват към една или повече

от социалните мрежи с цел по ­ бърза регистрация и по ­ лесен достъп

до данните на самия потребител.

Фиг. 3 ­ Интеграция на социалните мрежи като един от начините за

създаване на публичен профил в imdb.com

Целите, които стоят пред нас е в настоящата глава е да разгледаме

детайлно документацията на Facebook и да я приложим при разработката на

27

апликацията за споделяне на снимки.

Както вече бе изяснено Facebook започва своетo развитие през 2004г. и

към настоящата година вече има над 1.1 милиарда потребители. Създатели

на Facebook са :

Марк Зукърбърг (Mark Zuckerberg)

Едуардо Саверин (Eduardo Saverin)

Андрю МакКолим (Andrew McCollum)

Дъстин Московиц (Dustin Moskovitz)

Крис Хюгос (Chris Hughes)

Но по една или друга причина двигател на компанията е Марк Зукърбърг.

През 2007 г. Facebook дава възможност на външни разработчици да

създават приложения. Това действие допринася Facebook да се превърне в

платформа, а приложения като FarmVille да бъдат играни от стотици

милиони потребители.

Фиг. 4 ­ FarmVille се появява като Facebook апликация на 19 юни 2009

28

За разработката на подобен тип приложения, а не само затова всеки

разработчик, които желае да използва ресурсите на Facebook, трябва да си

направи профил във facebook.com и developers.facebook.com.

1. Социални плъгини

Социалните плъгини позволяват на потребителите на даден уеб сайт да

харесат, коментират или да споделят неговото съдържание с целия свят.

1.1. Like Button

Бутонът за харесване (на англ. Like Button) е един от най ­ простите

плъгини на Facebook, които позволява на потребителите на вашия уеб сайт

да споделят желаното съдържание във Facebook. Натискането на Like Button

във вашия уеб сайт създава връзка между съдържанието и лицето, което е

натиснало бутона. Like Button може да се създаде, чрез генератор на

следния адрес : https://developers.facebook.com/docs/reference/plugins/like/.

Фиг. 5 ­ Like button генератор

29

Атрибути, които може да задавате са :

href ­ URL адреса на страницата, която искате да бъде харесана. Като

от Юли 2013 адреса на страницата трябва да бъде абсолютен.

send ­ Указва дали да бъде включен Send button към Like button. Тази

опция работи само ако използвате HTML5 или XFBML версия на

бутона. Стойностите, които може да се задават са Boolean true и false.

layout ­ от Faceboок предлагат три опции :

standard ­ показва социалния текст дясно позициониран на

бутона и снимките на приятелите под това. Минималната

ширина е от 225 пиксела. Минималната ширина на разгъване на

бутона е от 40 пиксела, но ако сте избрали “recommend” за

глагол, то тази ще бъде от 60 пиксела. Ширината по

подразбиране е 445 пиксела. Ако не сте избрали снимки

височината на бутона ще е 35 пиксела, ако сте избрали да се

показват снимките на вашите приятели ще бъде 80 пиксела. ,

button_count ­ показва общия брой на харесванията.

Минималната ширина е 90px. Ширината по подразбиране е 90px

и височина от 20px.

box_count ­ показва общия брой на харесванията преди самия

бутон. Минималната ширина е 55px. Ширината по подразбиране

е 55px и височина от 65px.

show_faces ­ тази опция е налична само ако сте избрали за standard

layout и ако е маркирана ще покаже лицата на приятелите, които са

харесали дадената страница. Стойностите, които може да се задават са

Boolean true и false.

30

width ­ Ширината на бутона. Стойността за този атрибут е Integer.

action ­ глагола на текста на бутона. Опциите са : ‘like’ и ‘recommend’.

font ­ Можете да зададете какъв фонт да бъде текста. Опциите са :

arial

lucida grande

segoe ui

tahoma

trebuchet ms

verdana

colorscheme ­ цветовата гама на бутона. Опциите засега са две : ‘light’ и

‘dark’.

ref ­ label за следене на референциите; трябва да бъде по ­ малък от 50

символа и да съдържа малки букви на латински, цифри и някои от

позволените препинателни знаци (+/=­.:_). ref атрибута е сложен

атрибут като той бива съставен от два други атрибута :

fb_ref ­ код на параметъра

fb_source ­ потока от данни (на англ. stream type). Потокът от

данни може да бъде : ('home', 'profile', 'search', 'ticker', 'tickerdialog'

or 'other') като към него се добавя с долна черта и вида на

историята ('oneline' or 'multiline').

kid_directed_site ­ ако страницата, която искате да бъде харесана е за

деца под 13 година, чрез този атрибут го разрешавате. Стойностите,

които може да се задават са Boolean true и false и подразбиране тази

опция е изключена.

Повечето социални бутони имат четири версии на имплементация :

HTML5 ­ Версията следва HTML5 стандартите и избрана по

31

подразбиране. Минусът на тази версия е, че няма да работи коректно

при по стари браузъри. За дадената версия трябва да добавите

Facebook JavaScript SDK.

XFBML ­ Ако искате да имате поддръжка за по старите версия на 21

Internet Explorer трябва да добавите към html тага на вашата страница

следния атрибут : xmlns:fb="http://ogp.me/ns/fb#". За дадената версия

трябва да добавите Facebook JavaScript SDK.

IFRAME ­ Не е препоръчително да се използва и генерира iframe с

дадения социален плъгин.

URL ­ адресът към вашия плъгин.

В следващите фигури е показано какъв код трябва да сложи и къде по

страниците на вашия уеб сайт, за да работи коректно Like button на

Facebook.

При следващите плъгини ще се пропускат какви библиотеки са необходими,

защото са аналогични.

Фиг. 6 ­ HTML5 версия на Социалния бутон за харесване

21 XFBML, http://fbdevwiki.com/wiki/XFBML, 08.2013 г.

32

Фиг. 7 ­ XFBML версия на Социалния плъгин за харесване

Фиг. 8 ­ IFRAME версия на Социалния плъгин за харесване

33

Фиг. 9 ­ Адресът към Социалният плъгин за харесване

Смяна на езика на социалния бутон за харесване :

По подразбиране езика, които се използва при бутона за харесване, а при

всички други социални плъгина е Английски. За да промените трябва да

замените ‘en_US’ с езиковата версия, която желаете. При имплементация на

IFRAME версия, то трябва да се добави като параметър ‘locale’.

Примери :

JavaScript Библиотека ­ '//connect.facebook.net/fr_FR/all.js';

IFRAME :

src="http://www.facebook.com/plugins/like.php?locale=fr_FR&..."

1.2. Send Button

Бутонът за изпращане на съдържание (на англ. Send button). Чрез този

бутон можете да изпратите дадено съдържание до :

Facebook приятели

стената на дадена група

е­поща

34

Много рядко се използва само Send Button, почти винаги е с комбинация от

Like Button. Send Button може да се създаде, чрез генератор на следния

адрес : https://developers.facebook.com/docs/reference/plugins/send/.

Фиг. 10 ­ Send button генератор

Атрибути, които може да задавате са :

href

font

colorscheme

ref

kid_directed_site

Правилата за работа са идентични, както при Бутона за харесване. Бутонът

за изпращане на информация има две версии на имплементация :

HTML5<div class="fb­send" data­href="http://example.com"></div>

XFBML<fb:send href="http://example.com"></fb:send>

35

1.3. Follow Button

Бутонът за следване на Facebook потребители (на aнгл. Follow Button).

Този бутон преди това се наричаше “Subscribe button” и чрез него може да

следвате news feed на потребители във Facebook, въпреки, че не сте

приятели с тях. Бутонът е подходящ при интеграцията на портфолио уеб

сайт или директория с публични личности или такава, която е изключителна

активна в дадена сфера. Follow Button може да се създаде, чрез генератор на

следния адрес :

https://developers.facebook.com/docs/reference/plugins/follow/.

Фиг. 11 ­ Follow button генератор

Атрибути, които може да задавате са :

href

layout

show_faces

36

colorscheme

font

kid_directed_site

width

Правилата за работа са идентични, както при Бутона за харесване. Бутонът

за следване на Facebook потребители поддържа и четирите вида

имплементации :

HTML5<div class="fb­follow"data­href="https://www.facebook.com/zuck" data­width="450"data­show­faces="true"></div>

XFBML<fb:follow href="https://www.facebook.com/zuck" width="450"show_faces="true"></fb:follow>

IFRAME<iframesrc="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&amp;width=450&amp;height=80&amp;colorscheme=light&amp;layout=standard&amp;show_faces=true&amp;"scrolling="no" frameborder="0" style="border:none;overflow:hidden; width:450px; height:80px;"allowTransparency="true"></iframe>

URLhttp://www.facebook.com/plugins/follow.php?href=https%3A%2F%2Fwww.facebook.com%2Fzuck&width=450&height=80&colorscheme=light&layout=standard&show_faces=true&appId=247554305278677

1.4. Comments Box

37

Модулът за споделяне на коментари (на англ. “Comments Box”) e плъгин,

които дава възможност на хората да коментират вашия уеб сайт.

Социална значимост (на англ. “Social Relevance”): Коментарите са

подредени с цел да се покажат най­важните винаги във върха, като критерия

те да бъдат най ­ отгоре са :

коментари на ваши приятели

коментари на приятели на вашите приятели

най ­ харесвани

по тях да тече активна дискусия

Коментарите, които са маркирани като спам биват скрити и могат да се

виждат само от модераторите на сайта.

Разпределение (на англ. “Distribution”): Коментарите лесно се споделят с

Facebook приятелите ни или с хора, които харесват дадена страница във

Facebook. Ако даден потребител сложи отметка на “Post to Profile” то

дадения коментар ще излезе в news feed на неговите приятели и ще има

директна препратка към нашия уеб сайт.

За мобилните посетители на вашия сайт Facebook автоматично

визуализира мобилната версия на Comments Box. Ако не искате това да се

случва мобилния параметър трябва да бъде false. При мобилната версия на

Comments Box се игнорира width параметъра и Comments Box ще заема 100%

от размера на мобилния екран. За да контролираме това поведение трябва

да използва CSS и да зададем коректните размери на родителския елемент.

38

Comments Box е подходящ да се интегрира в :

Блог уеб сайтове

Новинарски сайтове

Директории

Продуктови страници

и мн. други

Comments Box може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/comments/

Фиг. 12 ­ Comments Box генератор

39

Атрибути, които може да задавате са :

href ­ аналогичен на Like button

width ­ Минималната ширина, която препоръчват от Facebook e 400px.

colorscheme ­ аналогичен на Like button

num_posts ­ броя на коментарите, които се показват на една страница.

По подразбиране са 10, а минимум е 1.

order_by ­ По какъв сортиращ признак да се показват коментарите.

Oпциите са “social”, “reverse_time” и “time”. По подразбиране се

показват с опция “social”

mobile ­ обoзначава дали трябва да се покаже оптимизираната мобилна

версия. По подразбиране е “auto­detect”.

Модерация :

Даден потребител да бъде модератор трябва да добавите open graph мета

таг в хедъра на страницата си. Синтаксиса е следния :<meta property="fb:admins" content="YOUR_FACEBOOK_USER_ID"/>Ако желаете да имате повече от един модератори на дадения Comments Box

просто да добавите n на брой от показания по ­ горе таг.

Модераторите могат да избират коментарите да се виждат от всички

(“visible to everyone”) или само лимитирано (“has limited visibility”), тоест

лимитираните коментари се виждат от потребителя направил коментара и от

неговите приятели.

Като модератори вие може да забраните употребата на лист от думи или

да блокирите потребители, които според вас нарушават правилата. Ако в

40

нов коментар се съдържа забранена дума или е направен от блокиран

потребител, този коментар автоматично има статус лимитиран.

За по ­ лесна администрация ако даден уеб сайт има n на брой Comments

Box да се замени мета таг fb:admins с :<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>и в самата апликация да бъде определено кои ще бъдат модераторите.

Модулът за коментари може да генериран може да бъде имплементиран

само, чрез :

HTML5<div class="fb­comments" data­href="http://example.com"></div>

XFBML<fb:comments href="http://example.com"></fb:comments>

1.5. Share Dialog

Диалогът за споделяне (на англ. Share Dialog ) e плъгин, който дава 22

възможност да споделите вашата страница или съдържанието във вашата

мобилна апликация на своята стена (на англ. timeline), вашите групи във

Facebook или да изпратите Facebook съобщение до вашите приятели. При

натискане на Диалога за споделяне се показва нов прозорец.

Параметри :

Параметър Описание Тип Задължително поле

u Използваме URL­encoded23версия на aдреса

string Да

22 Share Dialog, https://developers.facebook.com/docs/reference/plugins/share­links/, 08.2013 г.23 Percent­encoding, http://en.wikipedia.org/wiki/Percent­encoding, 08.2013 г.

41

Пример за използване на Share dialog :<ahref="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fparse.com" target="_blank">Сподели във Facebook</a>

По ­ често се използва имплементацията с Javascript, за да може

динамично да се зададе адреса на страницата. Освен това може да зададем и

желаната от нас ширина и височина на прозореца като кода, който трябва да

използваме е следния :<a href="#" onclick=" window.open('https://www.facebook.com/sharer/sharer.php?u='+encodeURIComponent(location.href), 'facebook­share­dialog', 'width=626,height=436'); return false;">Сподели във Facebook</a>

Share dialog срещу Like button :

Дали ще използвате Share dialog или Like button зависи изцяло от целите,

които искате да постигне вашия сайт в социалните мрежи. По ­ голямата

част от днешните уеб сайтове и апликации дават възможност на своите

потребители да използват и двете, защото лесно се интегрират от страна на

разработчиците. Ако при избор на интеграция на един или другия тип

плъгин, то трябва да сте наясно с разликите и те са :

Like button e по­лесен, но има по ограничени възможности. При

натискане на бутона дадената страница веднага се появява в news feed

на вашите приятели и на вашата стена. Like button­a дава възможност,

42

ако желаете да оставите и коментар, но той не е задължителен.

Share dialog изисква малко повече от потребителите на сайта, но им

дава по ­ голям набор от възможности. При Share dialog вие

задължавате вашите потребители да напишат коментар, за да се види

тази активност от техните приятели и информацията да стане видима

на техните стени. Всеки, които има желание може да промени

даденото заглавие, описание и дори картинката при споделяне на

информацията във Facebook.

Все пак трябва да се има в предвид, че трябва да се водите от опита и от

очакванията на вашите потребители. Повечето потребители вече са

запознати с Like button и знаят какво да очакват от него.

Share dialog дава на потребителите последователност типична за Facebook,

тъй като интерфейса и усещането е както при работата на елементите с

икона на Facebook. Все пак Facebook ни дават следните правила :

При отваряне на нов прозорец той трябва да отваря share.php

Размерите на новия прозорец по подразбиране са : 626px ширина и

436px височина.

1.6. Activity feed

Плъгинът за дейности (на англ. Activity feed) показва най ­ интересните

последни активности свързани с вашия уеб сайт. Тъй като съдържанието се

намира на сървърите на Facebook, то ние можем да го персонализира ме.

Activity feed показва дейности на хора, които са използвали нашия уеб сайт

като те може да са харесали, гледали, прочели и извършели някаква друга

дейност със съдържанието на страницата. Активността също показва,

43

когато хората споделят съдържание от нашия уеб сайт във Facebook или те

коментират нашите страници използвайки модула Comments box. Ако

хората са влезли в техните Facebook профили, докато са в нашия сайт,

съдържанието ще бъде персонализирано спрямо активността на техните

приятели. Ако те в момента не използват своите профили, то ще им бъде

предоставена възможност за влизане в своите профили и ще се покажат

препоръки от целия сайт.

Целта на плъгина е пространството да бъде заето от активности на

вашите приятели. Ако не е налице такава възможност, то плъгина ще

запълни нужното пространство с препоръки. Ако атрибута

“recommendations” има стойност true, то плъгина ще бъде разделен на две

части. В първата част ще показват активностите на вашите приятели, а във

втората ще се показват препоръките. Отново ако няма достатъчно дейности

от страна на вашите приятели в този случай и в първата част отново ще се

показват препоръки.

Activity feed може да конфигуриран, чрез следните атрибути:

App ID

Един или повече типа

Домейн

App ID

Ако изберете да използвате App ID за activity feed, ще бъдат показани

всички действия (можете да изградите и собствени дейности за дадената

апликация, които да се показват в activity feed). Забележка : ако се използва

44

xfbml версията на плъгина трябва да се посочи App ID при

инициализирането на Javascript библиотеката. Ако се използва iframe

версията на плъгина App ID, като ‘app_id’ атрибут на плъгина.

Пример за Activity feed, чрез използване на App ID :<fb:activity site="http://www.example.com" app_id="118280394918580"></fb:activity>

Един или повече типа (One or more action types)

Различните типове се изброяват в атрибута action като за разделител се

използва запетая.

Пример :

<fb:activity

site="http://www.example.com"

action="critiqueapp:despise,critiqueapp:review,critiqueapp:grade">

</fb:activity>

Домейн (Domain)

При задаване единствено на Домейн ще покажат всички предефинирани

от Facebook активности :

харесване (like)

четене (read)

гледане (watch)

слушане (listen)

играене, свирене (play)

45

Домейнът ще включи дейности само за зададения в aтрибута site,

например ако използвате site=facebook.com няма да се включат дейностите

нито от developers.facebook.com, нито от www.facebook.com. Не можете в

момента да правите агрегация на множество домейни.

Activity feed може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/activity/

Фиг. 13 ­ Activity feed генератор

Aтрибути :

46

site ­ Домейна, за който искате да покажете активността. Ако

използвате XFBML версия по подразбиране е текущия домейн

action ­ със запетая се разделят различните типове дейности, за които

искате да покажете каква активност тече по вашия сайт.

app_id ­ ще се покажат всички дейности, и предефинираните от

Facebook и тези, които вие можете да си създадете.

width ­ ширината на плъгина в пиксели. По подразбиране е 300px.

height ­ височината на плъгина в пиксели. По подразбиране е 300px.

header ­ определя дали да се показва Facebook header. Стойностите,

които можете да задавате са Boolean true и false.

colorscheme ­ аналогичен с другите плъгини.

font ­ аналогичен с другите плъгини.

recommendations ­ По ­ горе бе обяснен.

filter ­ позволява да укажете кои URL адреси искате да бъдат включени

във activity feed. Например ако зададем на атрибута ‘site’ ­

‘www.example.com’, а на ‘filter’ атрибута ‘/section1/section2’ само

страници, които съвпадат със следния регулярен израз :

‘http://www.example.com/section1/section2/*’ ще бъдат включени в

плъгина. Филтър атрибута не важи за препоръките на сайта.

linktarget ­ указва по какъв начин да се отварят връзките в activity feed.

По подразбиране връзките ще се отварят в нов прозорец. Ако искате

можете да използвате параметрите за атрибута ‘target’, за html таг ‘а’.

ref ­ аналогичен с другите плъгини.

max_age ­ указва граничния период на времената на създаване на

препоръките и времето на създаването на статиите. По подразбиране

стойността е 0, тоест времето на създаване няма да бъде фактор при

47

показване на информацията в activity feed. Все пак ако желаете да

включвате по стари дейности, то може да се зададе като стойност

Integer стойност между 1 и 180 като тази стойност определя дните.

Ако стойността е 30, то дейности на който датата на създаване е по

стара от 30 дни няма да се покажат.

Следене на трафика на сайта генериран от Activity feed плъгина

Тази статистика да бъде налична трябва да използвате ref атрибута.

Пример за използване на ref атрибута :<fb:activity ref="homepage"></fb:activity><iframe src="...&ref=homepage"></iframe>В този случай потребителя, когато натисне върху някой от линковете то ще

премине през fb_ref. Пример :

http://www.facebook.com/l.php?fb_ref=homepage

Activity feed поддържа и четирите вида имплементации :

HTML5<div class="fb­activity" data­site="http://www.ue­varna.bg"data­width="300" data­height="220" data­header="true"></div>

XFBML<fb:activity site="http://www.ue­varna.bg" width="300"height="220" header="true"></fb:activity>

IFRAME<iframesrc="https://www.facebook.com/plugins/activity.php?action=like&border_color=%23ececec&font=tahoma&header=true&height=220&linktarget=_blank&locale=en_US&site=http%3A%2F%2Fwww.ue­varna.bg"scrolling="no" frameborder="0" style="border:none;

48

overflow:hidden; width:300px; height:220px;"allowTransparency="true"></iframe>

URL

https://www.facebook.com/plugins/activity.php?action=like&border_color=%23ec

ecec&font=tahoma&header=true&height=220&linktarget=_blank&locale=en_US&

site=http%3A%2F%2Fwww.ue­varna.bg

1.7. Recommendations Box

Модулът за препоръки (на англ. “Recommendations box”) показва

препоръките на хората, които използват вашата апликация или уеб сайт. Тъй

като съдържанието се намира на сървърите на Facebook, то ние можем да го

персонализира ме. За генериране на препоръки, плъгина счита всички

социални итерации с URL адреси от вашия сайт. Recommendations box

показва на първо място препоръки дадени от ваши приятели, ако сте влезли

с Facebook профила си. Отново както при Activity feed­a е забранено да се

прави агрегация на множество домейни.

Recommendations box може да конфигуриран, чрез следните атрибути :

App ID

Един или повече типа

Домейн

App ID

Ако изберете да използвате App ID за Recommendations box, ще бъдат

показани всички действия (можете да изградите и собствени дейности за

дадената апликация, които да се показват в Recommendations box).

49

<fb:recommendations site="example.com" app_id="118280394918580"></fb:recommendations>

Един или повече типа (One or more action types)

Различните типове се изброяват в атрибута action като за разделител се

използва запетая.

Пример :

<fb:recommendations

site="example.com"

action="critiqueapp:despise,critiqueapp:review,critiqueapp:grade">

</fb:recommendations>

Домейн (Domain)

При задаване единствено на Домейн ще покажат всички предефинирани

от Facebook активности :

харесване (like)

четене (read)

гледане (watch)

слушане (listen)

играене, свирене (play)

Пример :<fb:recommendations site="jerrycain.com"></fb:recommendations>

Recommendations box може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/recommendations/

50

Фиг. 14 ­ Recommendations box генератор

Атрибутите на Recommendations box са идентични на Activity Feed като

единствено атрибута ‘recommendations’ липсва.

Recommendations box поддържа и четирите вида имплементации :

HTML5<div class="fb­recommendations" data­site="ue­varna.bg"data­width="300" data­height="220" data­header="true"></div>

XFBML<fb:recommendations site="ue­varna.bg" width="300"

51

height="220" header="true"></fb:recommendations>

IFRAME<iframesrc="https://www.facebook.com/plugins/recommendations.php?action=like&border_color=%23ececec&font=tahoma&header=true&height=220&linktarget=_blank&locale=en_US&site=http%3A%2F%2Fwww.ue­varna.bg" scrolling="no" frameborder="0" style="border:none;overflow:hidden; width:300px; height:220px;"allowTransparency="true"></iframe>

URL

https://www.facebook.com/plugins/recommendations.php?action=like&border_col

or=%23ececec&font=tahoma&header=true&height=220&linktarget=_blank&locale

=en_US&site=http%3A%2F%2Fwww.ue­varna.bg

1.8. Recommendations Bar

Прозорецът за препоръки (на англ. “recommendations bar”) позволява на

потребителите на вашата апликация или уеб сайт да харесат съдържание, да

видят кои са препоръките направени от тяхни приятели и да споделят какво

в момента четат със своите приятели. Сайтовете, които могат да се

възползват от този плъгин най ­ често са новинарски или такива, които

съдържанието им наподобява на статии или блог постове.

Recommendations bar винаги се позиционира в долния десен ъгъл или в

лявата част на прозореца на потребителя. Когато страницата се зареди или

когато хората скролират по нея, Recommendations bar привлича вниманието

на потребителите на вашия сайт или на вашата апликация и те могат да

52

харесат дадена страница или да предложите подобно съдържание с цел

увеличаване на техния престой.

Задължително условие за да работи Recommendations bar е правилно да

бъде интегриран Open Graph markup на вашите истории. Ако не е 24

изпълнено това условие вместо да показва препоръки (recommendations) ще

показва съобщение за грешка.

Кога се визуализира Recommendations bar ?

Начинът, по който ще се визуализира този плъгин се задава, чрез

атрибута “trigger” с комбинация от прекараното време на потребителя на

дадената страница, които се указва в атрибута “read_time”. Има три

стойности, които може да приеме “trigger” атрибута :

onvisible ­ Recommendations bar се показва, когато потребителите

прeминат точно където е поставен <fb:recommendations­bar />. Това е

най ­ простият вариант и от Facebook ни дават като съвет да поставим

<fb:recommendations­bar /> точно след края на нашата статия. Trigger

атрибута по подразбиране приема тази стойност.

X% ­ Recommendations bar ще се покаже в зависимост процентното

съотношение на скролбара (от англ. “scrollbar”) на вашата страница.

Стойността трябва да бъде зададен като Integer и да не бъде по ­

голяма от 100. С няколко примера ще илюстрираме как работи

Recommendations bar при наличие X% стойност :

При зададена стойност от 100 това означава, че потребителя е

видял 100 % от съдържанието на нашата страница и чак тогава

24 Open Graph markup, https://developers.facebook.com/docs/opengraph/using­actions/, 08.2013 г.

53

ще се покаже Recommendations bar.

При зададена стойност от 50 това означава, че Recommendations

bar ще се покаже когато хората са видели половината

съдържание на дадена страница.

manual ­ тази опция ще задейства плъгина ръчно. Когато искаме да

задействаме показването на Recommendations bar ни ще трябва да

извикаме “FB.XFBML.RecommendationsBar.markRead(href);” в нашия

JavaScript. “href” атрибута не е задължителен и ако не е зададен той ще

приеме като стойност текущата страница. Ако все пак искате да

зададете стойност на атрибута “href”, то вие ще трябва да го направите

в XFBML тага. Тази опция е полезна, когато имате множество статии.

Да кажем, че имаме сайт с три статии и не искаме при четене на

първата и втората статия Recommendations bar да се покаже, а само

при четене на третата, то само тогава ще трябва дa извикаме

“markRead” в нашия JavaScript.

“read_time” атрибута казва на Recommendations bar колко време да изчака

преди да се покаже. Стойността, която приема този атрибут е Integer и по

подразбиране това ще бъдат 30 секунди. Минималната стойност е 10.

Recommendations bar може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/recommendationsbar/

54

Фиг. 15 ­ Recommendations bar генератор

Фиг. 16 ­ Визуализация на Recommendations bar

Атрибути :

href ­ URL адреса на страница. По подразбиране е текущата.

trigger ­ По ­ горе бе обяснен.

read_time ­ По ­ горе бе обяснен.

action ­ аналогичен с другите плъгини.

side ­ Позицията на която плъгина ще се визуализира. Опциите са две :

‘left’ и ‘right’.

site ­ Може да изброите множество домейни, за които се отнася

Recommendations bar, а разделителя е запетая. По подразбиране се

взима този от href атрибута.

ref ­ аналогичен с другите плъгини.

55

num_recommendations ­ броя на препоръките (recommendations), които

ще се покажат. По подразбиране са две, а максимум можете да

покажете пет.

max_age ­ аналогичен с другите плъгини.

Recommendations bar поддържа само вида от имплементациите :

HTML5<div data­site="mashable.com"data­href="http://mashable.com/2013/08/12/ios­top­smartphone/"data­read­time="10" data­trigger="onvisible"class="fb­recommendations­bar"fb­xfbml­state="rendered"></div>

XFBML

<fb:recommendations­bar site="mashable.com"

href="http://mashable.com/2013/08/12/ios­top­smartphone/" read_time="10"

trigger="onvisible"></fb:recommendations­bar>

1.9. Like Box

Модулът за харесване на Facebook страница (на англ. “Like box”) е

социален плъгин, който позволява на собствениците на сайтове да

привлекат харесвания за своите Facebook страници. Like box дава

информация на посетителите, които използват твоята апликация или уеб

сайт да за следните аспекти :

Колко на брой са хората харесали дадената Facebook страница и кои

твои приятели са го сторили преди това.

Могат да прочетат последните постове от дадената Facebook страница

56

Могат да харесат дадената Facebook страница само с едно натискане

без да е нужно да влизат във Facebook.

Like box може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/like­box/

Фиг. 17 ­ Like box генератор

Фиг. 18 ­ Визуализация на Like box

57

Атрибути :

href ­ URL адреса на Facebook страница. От Юли 2013 задължително

URL aдреса трябва да бъде абсолютен.

width ­ широчината на плъгина в пиксели. По подразбиране дължината

е 300px, a минималната дължина е 292px.

height ­ височината на плъгина в пиксели. По подразбиране височината

варира спрямо броя на снимките, които се показват и броя на

постовете, които се показват. Ако имаме постове, които да се

показват и под тях се покажат 10 профилни снимки, то височината в

този случай ще бъде 556px. Ако изберем да не се показват нито

постове, нито профилни снимки, то в такъв случай височината ще

бъде 63px.

colorscheme ­ аналогичен с другите плъгини.

show_faces ­ указва дали да се показват профилните снимки, които се

разполагат в долната част на плъгина. По подразбиране стойността е

‘true’.

stream ­ указва дали да се показват последните постове от Facebook

страница. По подразбиране стойността е ‘true’.

header ­ указва дали да се вижда Facebook header в топ частта на

плъгина.

show_border ­ указва дали да се показва сив border около плъгина. По

подразбиране стойността е ‘true’.

force_wall ­ ако имате Локации във вашите постове, то трябва да

зададете стойност на този атрибут ‘true’, защото по подразбиране

такива постове не се показват в Like box.

58

Like box поддържа и четирите вида имплементации :

HTML5<div class="fb­like­box"data­href="https://www.facebook.com/University.of.Economics.Varna" data­width="292" data­show­faces="true"data­header="true" data­stream="true"data­show­border="true"></div>

XFBML<fb:like­boxhref="https://www.facebook.com/University.of.Economics.Varna"width="292" show_faces="true" header="true" stream="true"show_border="true"></fb:like­box>

IFRAME<iframesrc="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2FUniversity.of.Economics.Varna&amp;width=292&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=true&amp;show_border=true&amp;appId=247554305278677" scrolling="no" frameborder="0"style="border:none; overflow:hidden; width:292px;height:590px;" allowTransparency="true"></iframe>

URL

http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.face

book.com%2FUniversity.of.Economics.Varna&width=292&height=590&colorsch

eme=light&show_faces=true&header=true&stream=true&show_border=true&appI

d=247554305278677

59

1.10. Login Button

Бутонът за вход във Facebok (на англ ”Login Button”) дава възможност да

свържете вашата апликация или уеб сайт с информацията на потребителя

попълнена от него във Facebook, както и достъп до приятелите ми, който

вече са влезли в даденото приложение, чрез същия бутон.

Login Button е много полезен ако желаете хората по ­ бърз начин да се

регистрират и в същото време да имате достъп до техните данни във

Facebook.

Ако желаете можете да покажете под самия бутон и профилните снимки

на приятелите на потребителя използващи дадената апликация или уеб сайт.

За да организирате по ­ добра структура от Facebook ви дават възможност

да укажете на колко реда искате максимално да се разположат профилните

снимки. Дължината, която плъгина заема е динамична, за да илюстрираме

какво означава ще дадем следния пример :

ако искаме профилните снимки да се разполагат максимално на

четири реда, но имаме информация, която заема само два от тях

плъгина ще заема само нужните два реда.

Забележка : Потребителите, които посещават вашата апликация или уеб

сайт, ако през това време са влезли успешно в техните си Facebook профили

няма да видят Login button.

Login button може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/login/

60

Фиг. 19 ­ Lоgin button генератор

Атрибути :

show_faces ­ указва дали да се виждат профилните снимки

autologoutlink ­ ако стойността на този атрибут е ‘true’ и ако вече

потребителя е влязъл в своя профил, то бутона ще промени своята

снимка и ще позволи на дадения потребител да излезе като ще

прекъсни и всички активни сесии с Facebook. По подразбиране тази

опция е изключена.

onlogin ­ какво трябва да стане след като потребителя влезе успешно

във Facebook. Пример : onlogin=”submitLoginForm();”

max­rows ­ Максимално, на колко реда да се показват профилни

снимки. По подразбиране стойността е 1.

width ­ ширината на плъгина в пиксели. По подразбиране е 200px.

scope ­ По подразбиране Login Button изисква от потребителите да ви

предоставят публичната си информация от Facebook, но ако е

необходимо достъп до лична информация, то вие трябва да го

укажете в този атрибут. За разделител се използва запетая при

61

изброяване на различните права, от които се нуждаете. Целия списък

от правила за достъп, които може да използвате е достъпен на

следния адрес : https://developers.facebook.com/docs/reference/login/,

секция : “Permissions”.

registration­url ­ Ако потребителя не бъде регистриран, то той ще бъде

пренасочен към този URL адрес.

size ­ бутонът може да има различен размер. Опциите са : ‘small’,

‘medium’, ‘large’, ‘xlarge’. По подразбиране бутона има размер :

‘medium’.

kid_directed_site ­ аналогичен с другите плъгини.

За да използвате Login Button трябва да използвате и JavaScript SDK, а

имплементациите, които може да използвате са следните :

HTML5<div class="fb­login­button" data­width="200"></div>

XFBML<fb:login­button width="200"></fb:login­button>

1.11. Registration

Социалният плъгин за Регистрация (на англ. “Registration”) позволява на

потребителите на вашия уеб сайт или апликация по ­ лесен начин да се

регистрират, чрез своите Facebook профили. Социалният плъгин за

Регистрация имплементира форма, чрез която потребителите си попълват

желаните от нас данни.

Плъгинът за Регистрация ви дава възможност да сте по ­ гъвкави и да

62

поискате информация, която не е разположение, чрез Facebook API

(например, любим филм). Плъгинът позволява и на потребители, които

нямат профил във Facebook или не искат да си предоставят данните от

техния Facebook също на равно да се регистрират. По този начин не е

нужно интеграция на две отделни регистрации.

Пример как изглежда плъгина за регистрация :

Фиг. 20 ­ Примерен изглед на плъгина на регистрация

Кодът, които отговоря на фиг. 20 e следния :<iframesrc="https://www.facebook.com/plugins/registration?client_id=113869198637480&redirect_uri=https%3A%2F%2Fdevelopers.facebook.com%2Ftools%2Fecho%2F&fields=name,birthday,gender,location,email" scrolling="auto" frameborder="no" style="border:none"allowTransparency="true" width="100%" height="330"></iframe>

63

Атрибути :

Client_id ­ App ID на апликацията

redirect_url ­ URL адреса, който ще се изпълни при успешна

попълнена форма, като event, които отговоря за тази дейност е

‘signed_request’.

fields ­ Използва се разделител при изброяването на ‘Name Fields’ или

на JSON ‘Custom Fields’.

fb_only ­ Атрибута не е задължителен (Boolean атрибут). Позволява

само на потребители, които имат желание да свържат своите Facebook

профили. От Facebook ни съветват да използваме тази опция,

единствено ако няма собствена система за регистрация. По

подразбиране стойността на този атрибут е ‘false’.

fb_register ­ Атрибута не е задължителен (Boolean атрибут). Позволява

на потребителите да се регистрират във Facebook. Отново от Facebook

ни дават съвeт да използваме тази опция, единствено ако няма

собствена система за регистрация. По подразбиране стойността на

този атрибут е ‘false’.

width ­ Атрибута не е задължителен (Integer атрибут). Ширината на

плъгина в пиксели. Ако ширината е под 520, то в такъв случай плъгина

ще бъде визуализиран с по ­ малки размери (small layout).

border_color ­ Атрибута не е задължителен. Цвета на рамката на

плъгина.

target ­ Атрибута не е задължителен. Този атрибут отговоря за ‘target’

атрибута на формата и има три опции : _top(по подразбиране), _parent

или _self.

64

Полетата предефинирани от Facebook (Name Fields) :

Реда на визуализация на полетата се определя от самия разработчик, но

Facebook задължават винаги ‘name’ полета да е на първо място.

name ­ Пълното име на потребителя.

birthday ­ Рождената дата на потребителя. Формата е mm/dd/yyyy.

email ­ Email адреса на потребителя (Ако потребителя притежава вече

Facebook профил, то той ще бъде извлечен автоматично и ще бъде

изпратен отново email за верификация на данните).

gender ­ Пола на потребителя.

location ­ Името или ID на града, в които потребителя в момента

живее.

password ­ Създава се парола, която няма нищо общо с паролата на

потребителя във Facebook.

captcha ­ Визуализиране на картинка, която да спре автоматичната

регистрация.

first_name ­ Името на потребителя. Полезно е с view=not_prefilled.

last_name ­ Фамилията на потребителя.

Полетата first_name и last_name се използват по ­ рядко.

Потребителски полета (Custom Fields) :

Доста често пъти при интеграцията на плъгина за регистрация

предоставените по­горе полета от Facebook, няма да са достатъчни. За

щастие от Facebook ни дават възможност да създадем полета, които желаем

за дадената апликация. Форматът на тези полета е JSON string, вместо 25

25 JSON, http://json.org/, 08.2013 г.

65

CSV(Comma­separated values) . Пример за визуализация на форма с 26

потребителски полета може да се види на фиг. 21 :

Фиг. 21 ­ Примерен изглед на форма за регистрация с потребителски

полета

Форматът на примерната форма е JSON масив с обекти. По ­ детайлно той

26 CSV (Comma­separated values), http://en.wikipedia.org/wiki/Comma­separated_values, 08.2013 г.

66

може да се разгледа на следния адрес :

https://developers.facebook.com/docs/plugins/registration/#custom_fields.

Полетата, които се предефинирани от Facebook има само поле ‘name’. А

всяко от потребителските полета е съставено от обект със следните

параметри (на англ. “properties”) :

name ­ съответното име на атрибута ‘name’ на съответното поле. Това

име ще се използва при дешифрирането на информацията от

signed_request.

description ­ стойността на html таг label.

type ­ типа на потребителското поле. Стойностите, които може да

приема са следните : text, date, select, checkbox, typeahead и hidden.

views ­ Каква информация да се покаже в съответното поле. Има два

вида полета : ‘prefilled’ и ‘not_prefilled’. При ‘prefilled’ потребителя ще

се регистрира посредством профила си във Facebook, при

‘not_prefilled’ означава, че потребителя не се регистрира с профила си

във Facebook. Този параметър е полезен ако например се изисква

парола само от потребителите, които се регистрират без да използват

своя Facebook профил. По подразбиране показва и двете стойностите.

Спрямо избрания тип на потребителското поле са налице и допълнителните

параметри (properties) :

options ­ При ‘type:select’. Отново се използва JSON обект с ключ

(‘submit value’) и стойност (‘user description’).

categories ­ При ‘type:typeahead’. Масив с Open Graph Protocol

типовете, които са валидни за това поле.

default ­ При ‘type:select’ и ‘type:checkbox’. Трябва да съдържа ключ и

стойност при тип ‘select’ и думата ‘checked’ при тип ‘checkbox’ като

67

по този начин съответния checkbox ще бъде маркиран автоматично.

Освен това има потребителските полета имплементират и по сложни

концепциите като например : Custom client side validation, Async validation,

no_submit. Детайлна спецификация ни предоставят от Facebook за тези

опции на следния адрес :

https://developers.facebook.com/docs/plugins/registration/advanced/

Освен показаната по ­ горе имплементация, чрез IFRAME от Facebook ни

дава възможност да използваме и XFBML имплементация, която изисква и

интеграция на JavaScript SDK на Facebook. Като в този случай от Facebook

ни предоставяват и модерна форма, която има responsive design .27

Фиг. 22 ­ Примерен изглед на форма за регистрация, чрез XFBML

имплементация

27 Responsive web design, http://en.wikipedia.org/wiki/Responsive_web_design, 08.2013 г.

68

Изходният код на формата показана по ­ горе е следния :<div id="fb­root"></div><scriptsrc="https://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID&xfbml=1"></script>

<fb:registration fields="name,birthday,gender,location,email" redirect­uri="https://developers.facebook.com/tools/echo/" width="530"></fb:registration>

Вход и регистрация съчетание (на англ. Login + Registration Flows)

Когато искате от вашия потребител да влезе или да се регистрира, от

Facebook ни са предоставили съответния XFBML бутон :<fb:login­buttonregistration­url="https://developers.facebook.com/docs/plugins/registration" />

Ако потребителя, които разглежда вашия сайт не е влязъл във своя

профил във Facebook, то тогава на бутона ще пише ‘Login’. Когато

потребителя натисне този бутон ще се покаже диалогов прозорец, в които

той трябва да влезе в своя Facebook профил, ако съответния потребител

няма регистрация в нашия сайт, то съответния потребител ще бъде

пренасочен към бъде пренасочен към желания от нас URL адреса, които сме

задали в атрибута ‘registration­url’. Ако потребителя вече е регистриран, то

ще бъде извикан съответния JavaScript Event ­ onlogin(). Когато това събитие

бъде извикано вече ще имате съответния профил за дадения уеб сайт.

69

Ако потребителя, които разглежда вашият сайт вече е влязъл във своя

Facebook профил, то тогава на бутона вече ще пише ‘Register’ и при

натискане на бутона отново ще бъде пренасочен към зададения

‘registration­url’ адрес.

И накрая, ако потребителя е влязъл във Facebook и вече се е регистрирал,

то тогава бутона отново ще пише ‘Login’, но този път нищо няма да се

случи (но ако апликацията изисква да бъде засечен съответното състояние,

чрез метода getLoginStatus и по този начин ще можем да скрием този бутон).

От Facebook ни предоставят ръководство с най ­ добрите практики и

диаграми при интеграция Login + Registration Flows, което се намира на

следния адрес : https://developers.facebook.com/docs/user_registration/flows/

Четене на потока от данни при изпращане на формата за регистрация

Facebook ни предоставят и начин за четене на попълнената информация

от потребителя. Това става, чрез параметъра ‘signed_request’. Този

параметъра използва секретен ключ, който е известен само на собственика

на дадената апликация и на Facebook. Ако някой реши да промени данните,

то това няма да е успешно, защото ще бъде променен секретния ключ.

Отново от Facebook ни предоставят и по ­ детайлна документация, която

може да бъде прочетена на следния адрес :

https://developers.facebook.com/docs/facebook­login/using­login­with­games/

Примерен дешифриран резултат от параметъра ‘signed_request’ може да

70

бъде намерен отново на :

https://developers.facebook.com/docs/plugins/registration в секцията “Reading the

data”, а на същата страница в секцията “PHP Example reading signed_request“

е показана имплементация, която използва PHP и PHP Facebook SDK.

1.12. Facepile

Facebook плъгина Facepile показва профилните снимки на вашите

приятели, които са свързани с дадена Facebook страница, чрез глобалните

или потребителските типове. Може също да бъде конфигуриран и Facepile

да показва профилните снимки на хората, които използват дадена Facebook

апликация.

За да покажете профилните снимки на потребителите, които са свързани

с даден тип действие, то трябва да се използва атрибута ‘action’. Пример :<fb:facepile app_id="62572192129" action="og_runkeeper:run"width="300" max_rows="1"></fb:facepile>

За да се покажат профилните снимки на потребителите, които са

свързани с дадена Facebook страница, то адреса на страница трябва да бъде

зададен в атрибута ‘href’, а за да се покажат профилните снимки на

потребителите, които използват дадена Facebook апликация трябва да се

използва атрибута ‘app_id’.

Facepile може да се създаде, чрез генератор на следния адрес :

https://developers.facebook.com/docs/reference/plugins/facepile/

71

Фиг. 23 ­ Facepile генератор

Атрибути :

href ­ по ­ горе беше обяснен.

action ­ по ­ горе беше обяснен.

app_id ­ по ­ горе беше обяснен.

max_rows ­ максималният брой редове с профилни снимки, които ще

се покажат. XFBML версията на плъгина автоматично ще изчисли

нужната височина; ако искаме профилните снимки да се разполагат

максимално на четири реда, но имаме информация, която заема само

два от тях плъгина ще заема само нужните два реда. По подразбиране

има стойност 1.

width ­ ширината на плъгина в пиксели. По подразбиране широчината

е 300px, а минимум тя може да бъде 200px.

size ­ Размерът на снимките и социалното съдържание. По

72

подразбиране е избран размер : ‘medium’.

colorscheme ­ аналогичен с другите плъгини.

Facepile поддържа и четирите вида имплементации :

HTML5<div class="fb­facepile" data­width="300" data­max­rows="1"data­href="http://facebook.com/FacebookDevelopers"></div>

XFBML<fb:facepile href="http://facebook.com/FacebookDevelopers"width="300" max_rows="1"></fb:facepile>

IFRAME<iframesrc="//www.facebook.com/plugins/facepile.php?app_id&amp;href=http%3A%2F%2Ffacebook.com%2FFacebookDevelopers&amp;width=300&amp;max_rows=1&amp;colorscheme=light&amp;size=medium&amp;show_count=true&amp;appId=498176196925493" scrolling="no"frameborder="0" style="border:none; overflow:hidden;width:300px;" allowTransparency="true"></iframe>

URL

http://www.facebook.com/plugins/facepile.php?app_id&href=http%3A%2F%2Ffa

cebook.com%2FFacebookDevelopers&width=300&max_rows=1&colorscheme=l

ight&size=medium&show_count=true&appId=498176196925493

1.13. Embedded Posts

Вградените мнения (на англ. “Embedded Posts”) e сравнително нов

плъгин и затова в момента е на разположение на няколко новинарски сайта,

но се очаква в най ­ скоро време от Facebook да го пуснат, за употреба в по

­ широк кръг.

73

Embedded Posts е начин да се публикува публични постове от Facebook

(Facebook страница или Публична личност от Facebook) във вашия уеб сайт.

С Embedded Posts вие можете да покажете ако има прикачения видео или

аудио файлове, броя на харесванията и споделянията, както и прикачени

документи. С Embedded Posts ще позволите на вашите потребители да

използват същия набор на информация, които е на разположение и в

Facebook.com. По този начин те ще могат да започнат да следват публични

личности или да харесат съдържание на даден автор или на Facebook

страница, директно през вграденото съдържание.

Създаване на Вградено съдържание (“Embedded Post”)

При създаване Embedded Post, то трябва да проверим дали дадения пост

във Facebook е публичен (Facebook ще указват тези постове с глобална

икона). Засега единствено публични постове от Facebook страници и

профили ще могат да бъдат вградени.

Ако даденият пост е публичен ще трябва да натиснем иконата, която е

десния горен ъгъл във Facebook :

74

Фиг. 24 ­ Създаване на Embed Post

След това трябва да изберем опцията : ‘Embed Post’ от падащият списък.

След това ще ни се покаже диалогов прозорец, с кода които ние трябва да

интегрираме в нашия сайт :

Фиг. 25 ­ Примерен код за интеграция на Embed Post

Embedded Posts ще поддържат само два вида на имплементация : HTML5 и

XFBML.

2. Open Graph Protocol

Open Graph Protocol позволява комуникация между вашата уеб страница 28

и Facebook. Целта на Open Graph Protocol е да зададете точно каква

28 The Open Graph Protocol, http://opengraphprotocol.org/, 08.2013 г.

75

информация искате да бъде споделена от потребителите ви във Facebook.

Основната мета информация (Basic Metadata)

За да интегрирате във вашите страници граф обектите (graph objects), тo

трябва да се добави базовата мета информация на нашата страница. Open

Graph protocol се базира на протокола RDFa , което означава, че трябва да 29

се добавят <meta> тагове в <head> частта на нашата страница. За да имаме

коректен граф обект, то ние трябва да включим четири параметъра

(properties) :

og:title ­ Заглавието на нашия обект.

og:type ­ Типа на обекта (пример : “video.movie”). Спрямо избрания

тип може да се наложи да се включат и други параметри.

og:image ­ URL адресът на снимката като пътя до снимката трябва да е

абсолютен.

og:url ­ Cannonical URL адрес на нашия обект (абсолютния адрес на

страницата, която искаме да споделим). Пример за такава страница :

“http://www.imdb.com/title/tt0117500”.

Изходният код на страницата “The Rock on IMDB” ще бъде следния :<html prefix="og: http://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url"content="http://www.imdb.com/title/tt0117500/" />

29 RDFa, http://en.wikipedia.org/wiki/RDFa, 08.2013 г.

76

<meta property="og:image"content="http://ia.media­imdb.com/images/rock.jpg" />...</head>...</html>

Допълнителна мета информация (Optional Metadata)

Следващите параметри не са задължително, но е желателно те да

присъстват. Те биват :

og:audio ­ URL адреса до аудио файл.

og:description ­ Едно или две изрeчения, с които описваме дадения

обект.

og:determiner ­ Думата, която се показва преди заглавието на нашия

обект. Изборът за такава дума е от константен стрингов списък (enum)

и опциите са : “a”, “an”, “”, “the”, “auto”. Ако сме избрали “auto”, то

нашия потребител ще да избере между “a” или “an”. По подразбиране

стойност е “” (празна).

og:locale ­ Основният Locale на обекта. По подразбиране е en_US, а

формата е ‘language_TERRITORY’.

og:locale:alternate ­ Масив с другите locale, които са налични за тази

страница.

og:site_name : Бранд името на вашия сайт. Пример : “IMDb”.

og:video : URL адреса до видео файл.

Пример :<meta property="og:audio"

77

content="http://example.com/bond/theme.mp3" /><meta property="og:description" content="Sean Connery foundfame and fortune as the suave, sophisticated British agent,James Bond." /><meta property="og:determiner" content="the" /><meta property="og:locale" content="en_GB" /><meta property="og:locale:alternate" content="fr_FR" /><meta property="og:locale:alternate" content="es_ES" /><meta property="og:site_name" content="IMDb" /><meta property="og:video"content="http://example.com/bond/trailer.swf" />

Структурирани параметри (Structured Properties)

Някой от параметрите изброени по ­ горе имат допълните мета

информация. Тя се дефинира по същия начин както досега с “property” и

“content”.

og:image е параметър, които има допълните структура :

og:image:url ­ Идентичен с og:image

og:image:secure_url ­ Алтернативен URL адрес, ако страницата изисква

HTTPS.

og:image:type ­ MIME type на снимката.30

og:image:width ­ Ширината на снимката в пиксели. Стойността се

задава като число.

og:image:height ­ Височината на снимката в пиксели. Стойността се

задава като число.

Пример код :

30 MIME type, http://en.wikipedia.org/wiki/Internet_media_type, 08.2013 г.

78

<meta property="og:image" content="http://example.com/ogp.jpg"/><meta property="og:image:secure_url"content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" />

Мета og:video има същата структура, както и og:image. В този случай кода ще

бъде :<meta property="og:video"content="http://example.com/movie.swf" /><meta property="og:video:secure_url"content="https://secure.example.com/movie.swf" /><meta property="og:video:type"content="application/x­shockwave­flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

При og:audio имаме само първите три параметъра на разположение :<meta property="og:audio"content="http://example.com/sound.mp3" /><meta property="og:audio:secure_url"content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Масиви (Arrays)

За някой тагове може да се задават множество от стойности. Често този

приом се прилага, ако при споделянето на дадена страница искаме

79

потребителя да избере снимката която най ­ много му харесва от дадения

списък. Пример :<meta property="og:image"content="http://example.com/rock.jpg" /><meta property="og:image"content="http://example.com/rock2.jpg" />

Трябва да сложите структурираните параметри след техния родителски

таг (root tag). В този случай структурираните параметри се отнасят

единствено и само за своя родителски таг. Пример :<meta property="og:image"content="http://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image"content="http://example.com/rock2.jpg" /><meta property="og:image"content="http://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />В този пример имаме три снимки на нашата страница, като първата снимка

има размери 300x300, размерите на втората снимка не са указани, а трета

снимка има височина от 1000px.

Типовете на граф обекта (Object Types)

За да имаме валиден граф обект, то той задължително трябва да има тип.

Както беше казано по ­ горе това става, чрез параметъра og:type като той

има следния синтаксис :<meta property="og:type" content="website" />

80

Когато общността (community) одобри схемата на даден тип, то този тип

бива добавен към глобалния списък object types. Всички други обекти в

системата на типовете следват форматът на CURIEs (съкращение от Compact

URI) :31

<head prefix="my_namespace: http://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />

Глобалните типове са групирани вертикално. Всеки вертикален тип има

собствено пространство от имена (namespace). Стойностите og:type за

даденият namespace винаги следват префикс от namespace и период. По този

начин се цели намаляването от дефинирането на потребителски

пространства от имена за даден тип.

Музика (Music)

Namespace URI : http://ogp.me/ns/music#

Стойностите, които може да приeме og:type са :

music.song

music:duration ­ Integer стойност по ­ голяма или равна на 1.

Времето на самата песен в секунди.

music:album ­ масив от music.album. Албумът, на който

принадлежи песента.

music:album:disc ­ Integer стойност по ­ голяма или равна на 1.

Дискът от съответния албум.

music:album:track ­ Integer стойност по ­ голяма или равна на 1.

31 CURIE, http://en.wikipedia.org/wiki/CURIE, 08.2013 г.

81

Номерът на песента в съответния диск.

music:musician ­ profile array. Кой музикант изпълнява песента.

music.album

music:song ­ music.song. Песента от този албум.

music:song:disc ­ Integer стойност по ­ голяма или равна на 1.

Песента от кои диск е.

music:song:track ­ Integer стойност по ­ голяма или равна на 1.

music:musician ­ profile. Музикантът създал тази песен.

music:release_date ­ datetime. Датата на пускане на албума.

music.playlist

music:song ­ Идентично на music.album

music:song:disc

music:song:track

music:creator ­ profile. Създателя на playlist

music.radio_station

music:creator ­ profile. Създателя на радио станцията.

Видео (Video)

Namespace URI : http://ogp.me/ns/video#

Стойностите, които може да приeме og:type са :

video.movie

video:actor ­ profile array. Актьорите в съответния филм.

video:actor:role ­ string. Ролята, която играе съответния актьор.

video:director ­ profile array. Продуцентите на филма.

video:writer ­ profile array. Сценаристите на филма

video:duration ­ Integer стойност по ­ голяма или равна на 1.

82

Дължината на филма в секунди.

video:release_date ­ datetime. Датата на пускане на съответния

филм.

video:tag ­ string array. Ключовите думи, по които да се асоциира

съответния филм.

video.episode

video:actor ­ Идентично на video.movie

video:actor:role

video:director

video:writer

video:duration

video:release_date

video:tag

video:series ­ video.tv_show. На коя серия този епизод

принадлежи.

video.tv_show ­ ТВ шоу, което е разделено на различни епизоди. Мета

информацията е идентична с video.movie

video.other ­ Видео, което не принадлежи на нито една от по ­ горните.

Мета информацията е идентична с video.movie

Не вертикални (No Vertical)

Има глобални типове, които не отговарят на дефинициите на

вертикалните и те са наричат не вертикални. Такива са :

аrticle ­ Namespace URI : http://ogp.me/ns/article#

article:published_time ­ datetime ­ Кога е първата публикация на

статията.

83

article:modified_time ­ datetime ­ Кога за последно е правена

промяна по статията.

article:expiration_time ­ datetime ­ Времето, до когато дадената

статия е актуална.

article:author ­ profile array ­ Хората на писали дадената статия

article:section ­ string ­ Секцията, към която спада дадената статия

article:tag ­ string array ­ Ключовите думи, по които се асоциира

дадената статия.

book ­ Namespace URI : http://ogp.me/ns/book#

book:author ­ profile array ­ Хората написали дадената книга.

book:isbn ­ string.

book:release_date ­ datetime ­ Дата на издаване на съответната

книга.

book:tag ­ string array ­ Ключовите думи, по които се асоциира

дадената книга.

profile ­ Namespace URI : http://ogp.me/ns/profile#

profile:first_name ­ string ­ Първото име.

profile:last_name ­ string ­ Фамилията.

profile:username ­ string ­ Псевдоним.

profile:gender ­ enum(male, female) ­ Пола

website ­ Namespace URI : http://ogp.me/ns/website#. Няма специфични

параметри, които да го характеризират. Всички уеб страници, които

не отговарят на горните типове трябва да има за стойност

og:type=”website”.

Имплементации (Implementations)

84

Oтвореното общество в програмирането (open source community) е

разработила няколко на брой parsers и публични инструменти и библиотеки.

Списъка е следния :

Facebook Object Debugger ­ Официалният инструмент предоставен ни

от Facebook.

Google Rich Snippets Testing Tool ­ Open Graph Protocol се поддържа от

Google.

PHP Validator and Markup Generator ­ библиотека за езика PHP, която

валидира коректността на Оpen Graph protocol и генерира PHP5

обекти.

PHP Consumer ­ библиотека написана на езика PHP, за извличане на

Open Graph Protocol.

OpenGraphNode in PHP ­ Изключително прост parser за езика PHP.

OpenGraph Ruby ­ Ruby Gem, които може да анализира и да извлече

Open Graph Protocol.

PyOpenGraph ­ библиотека написана на езика Python, която извлича

Open Graph Protocol от зададената страница.

OpenGraph for Java ­ Малък Java клас за работа с Open Graph Protocol.

RDF::RDFa::Parser ­ RDFa parser за езика Perl, които разпознава Open

Graph protocol

WordPress plugin ­ Официалният плъгин, които добавя Open Graph

metadata към вашия Wordpress.

3. Преглед на библиотеките във Facebook

Следвайки официалната документация на Facebook за наличните

85

библиотеки за разработка (на англ. SDKs) можем да ги разделим на две 32

групи :

Официални ­ това са библиотеки, които са разработени от самите

разработчици във Facebook. Засега може да се възползвате SDKs за

следните програмни езици :

iOS(Objective­C) с актуална версия към Август 2013г. v. 3.6. iOS

SDK осигурява за библиотеки, ако искате да разработвате за

iPhone, iPad и iPod като библиотеката е написана на Objective­C.

Библиотеката ви предоставя класове за вход и регистрация (на

англ. authentication), Graph API и диалози. SDK­то е с отворен

код и е достъпно в GitHub.

Аndroid с актуална версия версия 3.0.2. Аndroid SDK осигурява

библиотеки, ако искате да разработвате за смартфони или

таблети с операционна система Android. Добавени са нови native

UI controls, oпростено управление на сесиите и по ­ добра

поддръжка за различните класове библиотеки. SDK­то е с

отворен код и може да бъде изтеглено от GitHub.

JavaScript SDK дава възможност да покриете потребителите с

настолни компютри или такива с мобилни устройства и имате

пълен достъп до Graph API и диалозите, чрез езика JavaScript.

Чрез използването на тази библиотека вие имате достъп до

услугите на Facebook за вход и регистрация (на англ.

authentication) и XFBML версии всички социални плъгини на

Facebook.

PHP с актуална версия 3.2.2. Библиотеката ви помага да

32 SDKs for Facebook, https://developers.facebook.com/docs/sdks/, 08.2013 г.

86

добавите authentication и Graph API поддръжка за настолни или

мобилни апликации. PHP SDK може да се интегрира и JavaScript

SDK и може да се интегрира без проблемно server­side и

client­side authentication. SDK ­ то е с отворен код и може да бъде

изтеглено от GitHub.

От външни разработчици (на англ. Third­Party SDKs) ­ са библиотеки,

които имат за цел да покрият другите програмни езици, но не са

разработени от хора, които в момента са работата в самата компания

Facebook. По тази причина Facebook насърчава използването само на

oфициалните библиотеки и при възникване на каквито и да е било

проблеми ви моли да се обърнете към техните автори в GitHub. Към

август 2013 г. можете да се възползвате от библиотеки за следните

езици :

Flash (ActionScript) от компанията Adobe. Актуалната версия е 3

и улеснява комуникацията между Flash приложенията и

Facebook Open Graph API.

Python. Библиотеката е разработена с цел поддръжката на

Facebook Graph API и Facebook JavaScript SDK.

Java (Swing), Spring Social е добавка към Spring Framework и

позволява на Java приложения достъп до Facebook.

Java (Blackberry) by RIM е библиотека за приложения за

Blackberry.

C# от фондацията “Outercurve Foundation” спонсорирана от

Microsoft. Чрез тази библиотека програмистите, които използват

.NET като технология могат да разработват приложения за

Windows Phone, Windows 8, Уеб и Десктоп C# апликации, които

87

интегрират Facebook Apache License 2.0. Facebook SDK за .NET

опростява интеграцията на вход и регистрация (на англ.

authentication) и Graph API.

Ruby

Resh­Graph е олекотена версия интегрираща Facebook

Graph API клиента. Авторите на библиотеката изместват

при разработката на приложения от rest­graph към

rest­core. Като целта е разрешаването на бъгове да бъде в

rest­graph, а добавянето на въведения да бъде в rest­core.

MiniFB е малка библиотека за работа с Facebook API.

Koala e библиотека, която поддържа Graph API, REST API,

актуализации в реално време, тестови потребители и

Facebook вход и регистрация. Авторите описват Koala със

следните думи :

лек

бърз

гъвкав

модул за тестване

FBGraph e гем за Ruby on Rails 3. Библиотеката поддържа

повече от основните функции на Facebook Open Graph

API, освен анализ функциите.

Mogli е първата библиотека за интеграция на Facebook

Open Graph API във вашите приложения. Авторите на

Mogli изискват да бъде инсталиран като gem и httparty.

Facebooker2 е библиотека, която ви дава помощни

функции (на англ. helpers functions) за взаимодействие с

88

Facebook Open Graph Javascript API­то. Авторите на

Facebooker2 изискват от нас инсталирането на Mogli и

ruby­hmac като гемове (gems).

OmniAuth е библиотека, която стандартизира multi­provider

authentication(инсталирането на OmniAuth ни позволява

достъп до услугите за вход и регистрация на различните

социални мрежи) за уеб апликации. Създадена да бъде

мощен, гъвкав и да направи разработването на

приложения за Ruby по ­ лесно. Всеки разработчик може

да създаде собствена стратегия за OmniAuth, чрез

използването на разнородни системи. Стратегиите в

OmniAuth създават всичко от Facebook до LDAP (e 33

протокол за апликацията, които дефинирана достъпа и

поддържането на информацията по директории през

Интернет протокол).

Node.js

amachang на Facebook Node SDK е библиотека

поддържаща изцяло Facebook Graph API, FQL и REST

API. Съвместим е с официалното SDK на Facebook за

PHP.

FBgraph е Node.js модул, който осигурява лесен достъп до

Facebook Graph API.

tenorviol node.js Facebook SDK е порт към PHP SDK­то на

Facebook.

33 Lightweight Directory Access Protocol,http://en.wikipedia.org/wiki/Lightweight_Directory_Access_Protocol, 08.2013 г.

89

4. Изграждане на Facebook Апликацията “Пътувай с Bgrazpisanie.com”

Bgrazpisanie.com е платформа, която се наложи като най ­ добрата

информация система за автобусни и жп разписания в България. През 2012г.

системата беше използвана от над 1 мил. души като винаги най ­ много

посещения в системата се отчитат през летните месеци : Юли, Август.

Затова се наложи от маркетинг гледна точка разработка на Facebook

Апликация, която да накара хора да споделят интересни снимки от своята

лятна почивка с цел спечелване на награда предоставена от фирма 158 ООД

собственик на платформата Bgrazpisanie.com. Наградата ще бъде спечелена

от снимката събрала най ­ много харесвания.

4.1. Обобщен План за работа при изграждане на системата

Разработката на системата в едри щрихи може да се опише със следните

етапи :

1. Проверка дали Потребителя е харесал Facebook страницата на

Bgrazpisanie.com

2. Показване на Бутон за регистрация в играта и визуализиране на

всички участници до този момент

3. Ако участника е регистриран в играта сe визуализира форма, чрез

която потребителя да може да сподели своята снимка.

4. При успешно попълнена форма от страна на потребителя,

информацията която е въведена да бъде споделяна на Facebook

стената(на англ. Timeline) на потребителя.

90

Фиг. 26 ­ Схема на работа на Апликацията

91

Разделяйки процесите на подпроцеси, за да се разгледа системата

детайлно, тя придобива следния схематичен вид :

Проверка дали потребителя е харесал Facebook страницата (Фиг. 27):

Проверява се дали апликацията има достъп до харесванията на

потребителя (Нужният достъп, които ни трябва е user_likes).

Заявка, чрез FQL (FQL е подобен език на SQL, с които могат да се

правят заявки до базата данни на Facebook) с която да проверим дали

дадения потребител е харесал Facebook страницата на Bgrazpisanie.com

Ако потребителя не е харесал Facebook страницата на

Bgrazpisanie.com, за целта се използва техниката Fan­gating известна 34

и като “Like­gating”.

34 Fan­gating, http://en.wikipedia.org/wiki/Fan­gating, 08.2013 г.

92

Фиг. 27 ­ Проверка дали потребителя е харесал Facebook стр. (схема)

93

Етап 2 ­ Показване на Бутон за регистрация в играта и визуализиране на

всички участници до този момент (Фиг. 28) :

Визуализира се бутон за регистрация и паралелно с това се извличат

всички участници до момента

Проверява се дали апликацията има достъп до :

email : е ­ поща на потребителя.

user_birthday : рождената дата на потребителя

publish_actions : Тази опция ни е нужно при етап 4 за да можем

успешно да публикуваме съобщение на стената на потребителя.

При натискане на бутона за регистрация се проверява дали дадения

потребител съществува в локалната база на апликацията и ако не

съществува се създава запис с нужната информация.

Преминаване към етап 3

94

Фиг. 28 ­ Бутон за рег. и визуализиране на участниците (схема)

95

Формата за участие (Фиг.29):

Формата се визуализира като трябва да се попълнят три полета :

заглавие

снимка

бутон за съгласие с общите условия на играта

Формата се изпраща

Извършват се нужните валидации

При коректни данни от страна на потребителя се преминава към етап 4

96

Фиг. 29 ­ Форма за участие (схема)

97

Публикуване на съобщение на стената(Тimeline) на Потребителя (фиг. 30):

Зареждане на данните за създаване на Timeline съобщение

Изпраща се заявка за ново съобщение към системата на Facebook

Ако информация е коректна се публикува на стената на потребителя

Фиг. 30 ­ Създаване на Timeline съобщение (схема)

98

4.2. Технически и програмни изисквания към апликацията

Техническите и програмните изисквания са ясно дефинирани във

Възлагателното писмо сключено в офиса на фирма 158 ООД в гр. Варна.

Изискванията към апликацията са :

Формат: HTML/ JavaScript/ PHP

Проектът трябва да бъде разработен, чрез Azaret Framework

Изготвяне на MySql база от данни

Многоезичност : Апликацията ще бъде пусната на български език, но

да има и възможност за добавяне на още езици в последствие.

Възможност за администриране на система.

При зареждане на апликацията трябва да има проверка дали дадения

потребител е харесал страницата на Bgrazpisanie.com във Facebook и

ако не го е направил да се покаже Fangate, чрез който да го направи.

Възможност на потребителите използващи системата да качат повече

от една снимка.

При качване на снимка, системата трябва да създава пост във

Facebook, които да бъде поместен в Timeline на съответния

потребител.

Системата трябва да позволява на потребителите да гласуват за дадена

снимка, чрез бутона „Харесва ми/Like”.

Допълнителни изисквания, които не фигурират във Възлагателното

писмо са :

Апликацията трябва да върви без проблеми на Apache HTTP сървър 35

с версия на PHP 5.3

35 Apache HTTP сървър, http://httpd.apache.org/docs­project/, 08.2013 г.

99

Дизайнът на апликацията трябва да е Responsive design (Responsive

design е web design концепция за разработката на сайтове, които да

могат да бъдат удобни за използвани от най ­ много устройства).

Кодът на приложението трябва да бъде качен в SVN сървъра на 36

фирма 158 ООД.

4.3. Изготвяне на база от данни за апликацията

Настоящата апликация има проста MySql (MySQL е най ­ използвания 37

проект с отворен код за менажиране на релационни база от данни) база от

данни. Базата от данни използва InnoDB (архитектурен шаблон, които 38

описва по какъв начин ще се запазват данните). InnoDB позволява

създаването на Първични и Вторични Ключове (Primary and Foreign Key

Constraints) . Базата от данни съдържа следните таблици :39

pictures ­ В таблицата се запазват снимките на участниците. Таблицата

има следните колони :

id : Integer, auto increment

user_id : Integer, индексна колона. Референция към полето от

таблицата users.

title : varchar(400)

picture : varchar(400). Полето запазва имената на снимките.

ratio : double. Полето запазва отношението широчината на

снимката спрямо дължината.

created_at : datetime(YYYY­MM­DD HH:MM:SS). Полето запазва

36 Apache Subversion, http://en.wikipedia.org/wiki/Apache_Subversion, 08.2013 г.37 MySQL, http://en.wikipedia.org/wiki/MySQL, 08.2013 г.38 InnoDB, http://en.wikipedia.org/wiki/InnoDB, 08.2013 г.39 Primary and Foreign Key Constraints, http://technet.microsoft.com/en­us/library/ms179610.aspx, 08.2013

100

кога е била създадена снимката

updated_at : datetime(YYYY­MM­DD HH:MM:SS). Полето запазва

кога е била извършена последната промяна за съответния запис.

users ­ Таблицата се запазва нужната информация за потребителите,

които са се регистрирали за участие в състезанието.

id : Integer, auto increment

oauth_provider : enum(‘facebook’). Полето запазва, чрез коя

социална мрежа се е регистрирал дадения потребител.

oauth_uid : varchar(25). Използва се стрингово поле, а не Integer

поле, зареди различния формат на потребителските уникални

идентификатори.

first_name : varchar(100). Името на потребителя, което той е задал

в своя профил

last_name : varchar(100). Фамилията на потребителя, която той е

задал в своя профил

email : varchar(100). E ­ поща на потребителя.

profile : varchar(255). URL адреса на профила на потребителя.

gender : enum(‘male’, ‘female’). Пола на дадения потребител.

birthdate datetime(YYYY­MM­DD). Рождената дата на

потребителя.

created_at : datetime(YYYY­MM­DD HH:MM:SS). Полето запазва

кога е бил създадена съответния потребител.

updated_at : datetime(YYYY­MM­DD HH:MM:SS). Полето запазва

кога е била извършена последната промяна за съответния запис.

101

SQL синтаксис

За да създадем базата от данни на апликацията използваме следния код :CREATE DATABASE IF NOT EXISTS bgrazpisanie_fbgame DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;

За създаване на таблицата pictures използваме следния код :CREATE TABLE IF NOT EXISTS pictures ( id int(11) NOT NULL AUTO_INCREMENT, user_id int(11) NOT NULL, title varchar(400) COLLATE utf8_unicode_ci DEFAULT NULL, picture varchar(400) COLLATE utf8_unicode_ci NOT NULL, ratio double DEFAULT NULL, created_at datetime NOT NULL, updated_at datetime NOT NULL, PRIMARY KEY (id), KEY user_id (user_id)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ciAUTO_INCREMENT=1;

За създаване на таблицата users използваме следния код :CREATE TABLE IF NOT EXISTS users ( id int(11) NOT NULL AUTO_INCREMENT, oauth_provider enum('facebook') COLLATE utf8_unicode_ciNOT NULL, oauth_uid varchar(25) COLLATE utf8_unicode_ci NOT NULL, first_name varchar(100) COLLATE utf8_unicode_ci NOT NULL, last_name varchar(100) COLLATE utf8_unicode_ci NOT NULL, email varchar(100) COLLATE utf8_unicode_ci NOT NULL, profile varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, gender enum('male','female') COLLATE utf8_unicode_ci NOTNULL,

102

birthdate date DEFAULT NULL, created_at datetime NOT NULL, updated_at datetime NOT NULL, PRIMARY KEY (id)) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ciAUTO_INCREMENT=1 ;

Създаване на Вторичен ключ (Foreign Key) :ALTER TABLE pictures

ADD CONSTRAINT pictures_ibfk_1 FOREIGN KEY (user_id) REFERENCES users (id) ON DELETE CASCADE ON UPDATE CASCADE;Oпцията, която сме избрали при редакция и изтриване на първичния ключ е

Каскадна, тоест при изтриване или редакция на запис от таблицата с

потребители, то автоматично ще бъдат изтрит или редактиран user_id.

Фиг. 31 ­ ERR Диаграма

103

4.4. Структура на апликацията

Апликацията е разработена, чрез Azaret Framework. Azaret Framework e

PHP MVC(Model­view­controller) Framework (МVC е архитектурен шаблон 40

за дизайн в програмирането, основан на разделянето на бизнес логиката от

графичният интерфейс и данните на дадено приложение показан на Фиг.32)

разработен за нуждите на фирма 158 ООД. Azaret Framework беше

разработен през месец септември 2010г. заедно с инж. Александър

Михайлов. Към настоящият момент са разработени над 100 проекта, чрез

Azaret Framework.

Фиг. 32 ­ Архитектура на MVC

Апликацията има следната файлова структура :

config

controllers

libs

models

public

views

40 MVC(Model­view­controller), http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller,08.2013 г.

104

.htaccess

index.php

robots.txt

Допълнителни библиотеки, които се използват в проекта са :

jQuery version 2.0.3 ­ JavaScript библиотека за по ­ бързо и по ­ лесно

писане на JavaScript.

Facebook JavaScript SDK ­ последна версия към настоящия момент.

Facebook PHP SDK ­ последна версия към настоящия момент.

Config

Папката съдържа всички конфигурационни файлове, а те са :

locales ­ Папката, в която се различните езикови файлове.

database.php ­ Използва за да се укаже настройките за свързване с

базата от данни.

evn.php ­ Използва се да се дефинират всички глобални

конфигурационни променливи за проекта.

pagination.php ­ Тук се дефинират всички конфигурации при

използването на странициране.

routes.php ­ Дефинират се структурата на URL адресите, които ще

използва проекта.

Controllers

Контролерите взимат данните от модела или извикват допълнителни методи

за обработката на данните, след което ги предават за отпечатване във

Изгледа (View). Настоящата Апликация има следните контролери :

105

Application ­ Базов Контролер, които се наследява от всичко останали

контролери. Служи за дефинирани на функциите, които са общо

валидни за всички методи. Application контролера наследява Controller

библиотеката на Azaret Framework.

Users ­ Наследява базовия контролер. Служи за обработка на данните

от users таблицата.

FacebookUsers ­ Наследява Контролера Users. Контролера изпраща и

обработва данни, чрез Facebook PHP SDK

Pictures ­ Наследява базовия контролер. Служи за обработка на

данните от pictures таблицата.

Libs

Папката съдържа всички библиотеки, които използва дадената апликация и

те са :

common ­ съдържа Pagination и PaginationCollection библиотеки, които

изграждат страницирането на записите от данните.

facebook ­ съдържа PHP SDK на Facebook.

files

DirectoryTool ­ библиотека за листване на файловата структура

на дадена папка и изтриване на файловете вътре в нея, както и

самата папка.

FileUploader ­ библиотеката за качване и копиране на файлове,

чрез PHP библиотеките: ImageMagick или GD .41 42

framework ­ Основните библиотеки на Azaret Framework

41 PHP: ImageMagick, http://php.net/manual/en/book.imagick.php, 08.2013 г.42 PHP: GD, http://php.net/manual/en/book.image.php, 08.2013 г.

106

Controller ­ библиотека за предаване на информацията

между контролерите(controllers) и изгледите(view).

Database ­ библиотеката използва PHP MySqli 43

библиотеката за достъп до дадената база от данни.

Helpers ­ библиотека с най ­ различни помощни функции.

Route ­ библиотека за достъп до съответната функция на

даден контролер, чрез използване URL адреси.

i18n ­ Библиотека, коятo отговоря за многоезичността на

даденото приложение.

json ­ съдържа библиотека за извличане и връщане на JSON

информация.

Модели (Models)

Всичките модели наследяват Database библиотеката описана по ­ горе.

Моделите служат за извличане на информация от съответната база от данни.

Настоящият проект съдържа само два модела : User, Picture.

Public

Всеки модерен MVC Framework има такъв тип папка, в която се слагат

всички публични папки и файлове. В нашия случай папката има папката има

следния вид :

contestimages ­ В тази папка ще бъдат качвани всички снимки на

участниците. Като за по ­ добра файлова структура и менажиране

всяка снимка има собствена директория, в която се съдържа дадена

снимка и също така се запазват по ­ малки версии на снимката

43 PHP: Mysqli, http://www.php.net/manual/en/book.mysqli.php, 08.2013 г.

107

наречени на англ. thumbnails.

css ­ В папката се запазват всички нужни файлове за стилизирането на

апликацията.

Javascript ­ В папката се намират всички JavaScript файлове нужни за

приложението.

Изгледи (Views)

Изгледите се грижат за визуализирането на изходния данни подадени от

контролера. Едно от предимствата на MVC Framework­овете, е че са

структурирани да използват layouts.

.htaccess (hypertext access)44

.htaccess е файл, чрез който се задават или променят настройките на дадения

Apache сървър. За нашия проект .htaccess е следния :

RewriteEngine On

RewriteCond %REQUEST_FILENAME !­d

RewriteCond %REQUEST_FILENAME !­f

RewriteRule . index.php [L]

php_value upload_max_filesize 4M

php_value post_max_size 4M

Целта на първият абзац е да се премахне .php от URL адреса нашата

апликация, а втория с него увеличаваме максималния размер на файловете,

които може да се качат на нашия сървър. Това се налага, защото по

44 .htaccess, http://en.wikipedia.org/wiki/Htaccess, 08.2013 г.

108

подразбиране на по ­ голямата част от Apache сървърите в световен мащаб

максималния допустим размер на файл, които искаме да качим не трябва да

надвишава 2 MB.

index.php

Зарежда всички нужни библиотека за нормална работа с Azaret Framework.

robots.txt (Robots exclusion standard)45

robots.txt известен и като Robot Exclusion Standard/Robots Exclusion Protocol

служи да даде информация на търсещите машини като Google, Bing, Yahoo

кои URL адреса са достъпни за тях и кои не са. За нашата апликация искаме

всички URL адреси да се достъпват и затова robots.txt има съдържа следния

синтаксис :

User­agent: Mediapartners­Google

Disallow:

User­agent: *

Allow: /

4.5. Комуникация със сървъра при качване на снимка

Цялата комуникация между клиента и сървъра се извършва чрез HTTP

POST команди, изпратени от клиента към сървъра, на които сървърът

отговаря с JSON­сериализиран резултат. При успех сървърът връща HTTP

статус код 200, а при грешка връща трицифрен статус код за грешка във

формат 4XX или 5XX (например 404 Not Found, 403 Forbidden или 500

45 Robots exclusion standard, http://en.wikipedia.org/wiki/Robots_exclusion_standard, 08.2013 г.

109

Internal Error). Форматът на всяка JSON­сериализиран резултат е описан в

таблиците по ­ долу.

Tабл. 1 Описание на грешка от тип 500 Невалидна форма(Internal Error)

Поле Type Стойност и Описание

HTTPCODE Integer 500

message message Текст с описание на грешката

type String invalidform (Указва типа на грешката)

Tабл. 2 Описание на грешка от тип 403 Невалидни полета(403 Forbidden)

Поле Type Стойност и Описание

HTTPCODE Integer 403

message message Oбект (Oписан е детайлно в табл.3)

type String fields (Указва типа на грешката)

titlevalue String Стойността на заглавието на снимката

Tабл. 3 Описание на полето message при грешка от тип 403

Поле Type Стойност и Описание

title Integer Указва дали заглавието на снимката е валидно

picture message Указва дали качения файл е валидна снимказа система

conditions String Указва дали потребителя е съгласен собщите условия

110

В табл.3 указаните параметри е напълно възможно не всички от тях да

присъстват като всичките имат идентична структура. Всеки от Обектите

имат като параметър “message”, в което детайлно е описано защо даденото

поле не е валидно.

Tабл. 4 Описание на резултата при успешно попълнена форма

Поле Type Стойност и Описание

HTTPCODE Integer 200

message String Съобщението се визуализира напотребителя

fbname String Заглавие на снимката

fbtitle String Текста на съобщението, което ще сепубликува във Facebook

fbdescription String Описание на страницата на снимката

fblink String Абсолютният адрес на снимката

fbimage String Пътят, където е качена дадената снимка

В табл. 4 всички полета започващи с префикс fb се използват при

създаване на съобщението, което се публикува на стената на потребителя(на

неговия Timeline).

4.6. Постъпково детайлно описание на ключовите моменти в кодаЦелта на тази точка е да се опишат ключовите моменти от използването

на Javascript SDK предоставено от Facebook като кода описан по ­ долу се намира в файл : 158.js разположен в папката javascript на приложението.

4.6.1. Инициализация

111

За инициализация на кода за работа с Facebook се използва функцията init, съдържаща се в променливата FB, която е декларирани от Javascript SDK. Декларация на Fb.init :46

FB.init( appId: FacebookAppId, status: true, cookie: true, xfbml: true);

Атрибути : appId ­ FacebookAppId е глобална променлива, която е декларирана в

еnv.js намиращ се в папката javascript/config като указва Facebook АppId на апликацията.

status ­ има за цел да провери дали потребителя e влязъл в свояпрофил.

cookie ­ Включваме и поддръжката на Cookies за нашето приложение. xfbml ­ Ще инициализира всички социални плъгини, които вече са

били заредени.

4.6.2. Взимане състоянието на потребителяСлед като е направено успешно инициализация на Javascript SDK време е

да проверим дали дадения потребител е влязъл в профила си във Facebook и дали е разрешил на апликацията достъп до неговите данни. За целта използваме функцията FB.getLoginStatus :47

FB.getLoginStatus(function(response) // Проверка дали статуса на потребителя е коректен if (response.status === 'connected') var uid = response.authResponse.userID;

// Проверка дали дадения потребител е харесал страницана Bgrazpisanie checkUserIsFanToPage(uid);

// Проверка дали дадения потребител е дал нужнитеразрешения на апликацията. checkUserPermissions(); else

// Зареждане на Facebook диалог за Влизане във Facebook

46 FB.init, https://developers.facebook.com/docs/reference/javascript/FB.init/, 08.2013 г.47 FB.getLoginStatus, https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/,08.2013 г.

112

fbOauthDialog(); // Зареждане на бутона за регистрация в играта

loadRegisterButton(); // Зареждане на снимките на участниците pictureChallenger.initialize(); );

4.6.3. Зареждане на диалог за влизане във Facebook и достъп на апликацията до данните на потребителя

Тази стъпка от кода се изпълнява единствено ако потребителя не е влязъл в своя профил или не е разрешил достъп на апликацията до неговите харесвания. Диалоговият прозорец има две състояния показани на фиг. 33 и фиг. 34. Ако потребителят е вече влязъл във своя профил, то той няма да види фиг.33.

Фиг. 33 ­ Диалогов прозорец за вход във Facebook

Фиг. 34 ­ Диалогов прозорец за достъп до профила на потребителя

113

Функцията fbOauthDialog интегрира в себе си FB.login и FB.api и има48 49

следния синтаксис:// Зареждаме черен екран зад диалоговия прозорецaddBlackScreen();// Подаваме заявка за зареждане на диалогов прозорецFB.login(function(response) // Премахваме черния екран $('.blackscreen').remove(); // Проверяваме дали потребителя е влязъл в системата и имадостъп на апликацията if (response.authResponse) // Извличаме информацията за потребителя FB.api('/me', function(response)

// Проверяме дали дадения потребител е харесалстраницата на Bgrazpisanie.com във Facebook checkUserIsFanToPage(response.id); ); // Подаваме заявка, че искаме да имаме достъп до страниците,които е харесал дадения потребител., scope: 'user_likes');

4.6.4. Проверка дали потребителя е харесал страницата на Bgrazpisanie

във Facebook

Една от точките в Обобщения план за работа при изграждане на

системата е да се провери дадения потребител е харесал Facebook

страницата на Bgrazpisanie.com визуално представено, чрез фиг. 27. Това

става във функцията checkUserIsFanToPage, която приема Integer параметър

48 FB.login, https://developers.facebook.com/docs/reference/javascript/FB.login/, 08.2013 г.49 FB.api, https://developers.facebook.com/docs/reference/javascript/FB.api/, 08.2013 г.

114

uid (id­то на потребителя в социалната мрежа Facebook). Функцията

интегрира в себе си FB.api и заявка написана на езика FQL, синтаксиса е

следния :// Заявка написана на езика FQLvar query = "SELECT uid FROM page_fan WHERE page_id = '" +FacebookPageId + "'" + " AND uid = '" + uid +"' LIMIT 1";// Изпращане на заявкатаFB.api('fql', q: query, function (response)

// Проверка дали дадената страницата е харесана if (response.data.length === 0)

// Зареждане на Fan­gating страницата loadFangateAndFangateWebFonts(); );FacebookPageId е глобална променлива декларирана отново в

javascript/config/env.js като съдържа Integer стойност, която указва кое е Id­то

на страницата във Facebook.

Ако Fan­gating страницата се появи, то се следи за следния Facebook

event: FB.Event.subscribe с параметър 'edge.create' и callback функция, 50

която следи дали харесаната страница от потребителя е страницата на

Bgrazpisanie.com във Facebook. FB.Event.subscribe се извиква като event при

харесването на дадена страница, а това което връща като резултат е адреса

на страница, които сме харесали. Синтаксиса, които използваме в

апликацията е следния :

50 FB.Event.subscribe, https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/,08.2013 г.

115

FB.Event.subscribe('edge.create', function(response) // Проверяме дали страницата, която е харесал потребителянаистина е === 'http://www.facebook.com/bgrazpisanie' if (response === FacebookPageURL) fangate.destroy(); );

4.6.5. Проверка на позволенията, които са дадена на апликацията

По всяко време даден потребител без наше знание може да изтрие

апликацията ни или ние да решим да добавим допълнителна

функционалност, която да изисква специфични позволения за достъп до

Facebook, затова е нужно интегрирането на функция, която да проверява

коректност на позволенията. За целта сме дефинирали функцията :

checkUserPermissions, която в себе си интегрира FB.api. Апликацията

“Пътувай с Bgrazpisanie” има нуждата от следните позволения (на англ.

permissions) :

email : е ­ поща на потребителя.

user_birthday : рождената дата на потребителя

publish_actions : Тази опция ни е за да можем успешно да публикуваме

съобщение на стената на потребителя.

Нужните позволения са декларирани в променливата registartionPermission,

която се намира отново в javascript/config/env.js, а дефиницията ѝ е :var registartionPermission = new Array();registartionPermission.push('email');registartionPermission.push('user_birthday');registartionPermission.push('user_likes');registartionPermission.push('publish_actions');

116

checkUserPermissions има следния синтаксис :// Извличаме какви позволения има потребителя за нашатаапликацияFB.api('/me/permissions', function(response) // Проверяваме дали получената информация от Facebook екоректна if (response.hasOwnProperty('data')) // В permissionCounter запазваме колко от позволениятаса дадени на апликацията var permissionCounter = 0; for (var iterator in registartionPermission) var property = registartionPermission[iterator]; if (response.data.length > 0) var data = response.data['0']; if (data.hasOwnProperty(property)) permissionCounter += 1; // Проверяме дали зададените позволения са толковаколкото са указани в registrationPermissions if (permissionCounter ===registartionPermission.length) // Преминаваме към следващия етап : опит засъздаване на потребител в локалната база от данни. createDatabaseUser(); else // Зареждаме Бутона за регистрация loadRegisterButton();

117

);

4.6.6. Създаване на потребител в локалната база от данни

Функцията createDatabaseUser използва асинхронна AJAX заявка за да 51

изпрати информацията до PHP частта, която проверява дали дадения

потребител съществува в базата от данни и ако не съществува създава

съответния потребител. createDatabaseUser имплементира в себе си FB.api и

jQuery.ajax , а синтаксиса е следния е :52

// Зареждаме spinner докато чакаме да се обработи информациятаloadSpinner();// Извличаме информация за потребителяFB.api('/me', function(response) // Добавяме от коя социална мрежа е постъпила информацията response['provider'] = 'facebook'; // Изпратената информация ще бъде в форматът JSON.JSON.stringify прави даден обект или масив в JSON стринг var jsonString = JSON.stringify(response); // Изпращаме AJAX заявка $.ajax( url: server.registeruser, data: jsonString, type: 'POST', contentType: 'application/json', dataType: "json", timeout: 10000 ).done(function() // Използваме jQuery Селектор за да окажем къде трябва

51 Ajax, http://en.wikipedia.org/wiki/Ajax_(programming), 08.2013 г.52 jQuery.ajax, http://api.jquery.com/jQuery.ajax/, 08.2013 г.

118

да бъде добавена формата за качване на снимка. var wrapper = $('.js­user­wrapper­controller'), // FormUploaderWidget се грижи за добавянето наформата formUploaderWidget = new FormUploaderWidget(wrapper); formUploaderWidget.createFormTag(); ).fail(function(error) // Показваме на потребителя, че е възникнала грешка loadServerError(error); ););

4.6.7. Публикуване на съобщение на стената на потребителя във

Facebook

В последната точка от Обобщения план за работа при изграждане на

системата се дава визуална представа как трябва да работи система, за да

публикува съобщение на стената на потребителя във Facebook (фиг.30).

Форматът на информацията, която ще бъде използвана за създаването на

това съобщение е описана в табл.4. Изглед как поста се визуализира във

Facebook e демонстриран на фиг. 35

Фиг. 35 ­ Визуализация на съобщение публикувано през апликацията

119

При реализацията на тази функционалност е използвана официалната

документация на Facebook и по ­ специално секцията “Feed Dialog” . 53

Функционалността е реализирана във функцията loadSuccess в тялото на

JavasScript Обекта FormUploaderWidget, а синтаксиса е следния :// Изпращане на POST заявка за създаване на ново timelineсъобщение.FB.api('/me/feed', 'post', message: parser.fbtitle, link: parser.fblink, picture: parser.fbimage, name: parser.fbname, description: parser.fbdescription, function(data) // Използва се при разработка на приложението, за да сепроследи, защото съобщението не е публикувано //console.log(data););

4.6.8. Допълнителни JavaScript ОбектиЗа реализация на апликацията са създадени няколко обекта, които са

написани, чрез правилата за създаване на JavaScript Prototype (Object.prototype ) обекти и те са :54

RegisterButtonWidget ­ отговоря за създаването и манипулирането на бутона за регистрация

FormUploaderWidget ­ отговоря за създаването на цялата форма, както за обработка на грешки възникнали зареди некоректни данни, а също така и за изпращането на заявка до Facebook за създаване на ново Timeline съобщение

53 Feed Dialog, https://developers.facebook.com/docs/reference/dialogs/feed/, 08.2013 г.54 Object.prototype,https://developer.mozilla.org/en­US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype,08.2013 г.

120

PictureChallenger ­ отговоря за визуализацията и за подредбата на снимките участници

PictureChallengerSinglePage ­ отговаря за визуализацията и за подредбата на индивидуалната страница на всяка снимка участник.

Spinner ­ отговаря за създаването на елементи, които показват, че информацията се обработва (на англ. spinner или loader)

Fangate ­ отговоря за създаването и за подредбата на Fangate страницата.

RegisterButtonWidget, FormUploaderWidget, PictureChallenger, PictureChallenger се намират в javascript/158.js, Spinner се намира в javascript/libs/spinners.js, а Fangate в javascript/fangate.js. Единствено fangate.js не се зарежда при зареждането на страницата, защото е напълно възможно да не е нужно да се използва. fangate.js се зарежда асинхронно.

При някой от обектите се създават динамично Facebook like бутони, за които е необходимо да се използва функцията FB.XFBML.parse , която 55

служи за изпращане на заявка за рендиране на част от социалните плъгини на Facebook. FB.XFBML.parse() ще вземе всички елементи, които са социални плъгини и ще ги рендира независимо дали вече социалния плъгин е бил визуализиран. Затова винаги в настоящата апликация се използва втората опция, коята Facebook предлага, а тя е да се подаде на функцията кой точно елемент искаме да визуализираме като синтаксиса е следния : FB.XFBML.parse(document.getElementById('foo'));

4.7. Интерфейс на апликацията

Facebook апликацията “Пътувай с Bgrazpisanie” ще бъде пусната през

месец Септември като продължителността на играта ще бъде в рамките на 1

месец. Към настоящият момент играта може да бъде видяна на следния

Интернет адрес : http://game.bgrazpisanie.com, а във Facebook може да се види

на следния адрес : https://www.facebook.com/appcenter/bgrazpisaniefb.

55 FB.XFBML.parse, http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/, 08.2013 г.

121

Както беше споменато в секцията за Техническите и програмните

изисквания апликацията трябва да поддържа responsive design и това е

направено като може да се види в следващите фигури :

Фиг. 36 ­ Изглед на апликацията “Пътувай с Bgrazpisanie” през iPad

Фиг. 37 ­ Изглед на апликацията през Смартфон

122

Апликацията има следните страници :

Начална страница

Общи условия

Fangate страница

Индивидуална страница на всяка снимка участник в състезанието

Начална страница

Началната страницата е основна за апликацията като на нея се

визуализира бутона за регистрация/формата за участие и паралелно с това

всички участници до този момент. Изглед началната страница общ изглед

на началната страница беше показан на фиг. 36 и фиг. 37, а формата за

участие е показана на следващата фиг. :

Фиг. 37 ­ Изглед на формата за участие

Общи условия

Страницата с общите условия е едно от многото неща, които трябва да

123

има всяка една апликация, то тя да бъде одобрена и да може да се използва

публично. Страницата с общите условия в настоящата апликация за

изясняване на всякакви въпроси и казуси при нейното използване.

Фиг. 38 ­ Изглед на Страницата с Общите условия

Fangate страница

Fangate страницата, както беше изяснено преди това служи за набиране

на фенове към дадена Facebook Страница. Много голям процент да не

кажем всички Facebook уеб апликации в днешно време имат такава страница

като дори подобен тип страница се е превърнало в задължително изискване

от страна на клиентите. “Пътувай с Bgrazpisanie” не прави изключение и

страницата, за по ­ добра визия са използван един от много шрифтове

124

предоставени ни от : http://www.google.com/fonts. Изгледа на страница е :

Фиг. 39 ­ Fangate страница

Индивидуална страница на всяка снимка участник в състезанието

Тази е страницата, която всеки участник споделя във Facebook, както и

бива харесана от неговите приятели като за целта е имплементиран Open

Graph Protocol детайлно представен по ­ рано. Пример за имплементиран

Open Graph Protocol на една от страниците :<!­­ Facebook Open Graph ­­><meta property="og:title" content="Спомен от лято 2013"/><meta property="og:type" content="website"/><meta property="og:url"content="http://game.bgrazpisanie.com/bg/picture/24"/><meta property="og:image"content="http://game.bgrazpisanie.com/public/contestimages/24/IMG_6034.jpg"/>

125

<meta property="og:site_name" content="bgrazpisanie"/><meta property="og:description" content="..."/><!­­ END Facebook Open Graph ­­>

Същата тази страница изглежда под мобилен телефон по следния начин :

Фиг. 40 ­ Изглед на индивидуална страница на всяка снимка участник

В техническите и програмните изисквания едно от изисквания е за

Администриране на система. Това изискване е изпълнено като се прави

проверка посредством Facebook PHP SDK дали човека, които е качил

снимката и потребителя на системата са едно и също лице. Ако това е

126

истина то в десния горен ъгъл точно до заглавието на снимката се

визуализира бутон за изтриването на снимката. На същия принцип се прави

и проверка дали потребителя на система не е един от администраторите на

системата, които са зададени предварително в Контролера Pictures. Ако

потребителя на системата се окаже, че е администратор и той вижда същия

бутон.

Фиг. 41 ­ Административен изглед на индивидуална страница на

всяка снимка участник

127

Заключение

Целта на настоящата дипломна работа беше да бъде показан какъв е

начин за работа с най ­ голямата социална мрежа в наши дни и какви са

съвременните инструменти за разработка на различна гама от софтуер. За

целта бе избрано разработката на Facebook апликация тип игра, която към

днешна дата е едно от най ­ силните маркетингови инструменти за набиране

на Facebook фенове и развитие на брандови стратегии.

Апликацията ще бъде активна в рамките около 30 дни в месеците

септември и октомври и очакванията са да донеси около 15 % ­ 30 % нови

фенове на страницата на Bgrazpisanie, както и подпомогне за развитието на

марката на Bgrazpisanie на Българския пазар.

От направеното проучване преди започване на разработката може да се

направят няколко заключения какво трябва да включва апликация от такъв

тип :

Задължителна е разработката на Fangate страница

Потребителите трябва да бъдат мотивирани да участват с

атрактивна награда

Препоръчително е подобен тип апликации да имат като

функционалност автоматично създаване на съобщения на

стената на потребителя във Facebook.

Едно от бъдещите въведения, което социалната мрежа Facebook ще

наложи от 1 Октомври за всички Facebook апликации е защита на личните

128

данни с протокола HTTPS (съкратен от “Hypertext Transfer Protocol 56

Secure”). Такъв протокол беше закупен за домейна bgrazpisanie.com и

настройката на сертификата за сигурност е последната стъпката преди

пускането на “Пътувай с Bgrazpisanie”.

56 HTTP Secure, http://en.wikipedia.org/wiki/HTTP_Secure, 08.2013 г.

129

Литература

1. Social Network, https://en.wikipedia.org/wiki/Social_network, 08.2013г.

2. Tönnies, Ferdinand (1887). Gemeinschaft und Gesellschaft, Leipzig: Fues's

Verlag. (Translated, 1957 by Charles Price Loomis as Community and

Society, East Lansing: Michigan State University)

3. Durkheim, Emile (1893). De la division du travail social: étude sur

l'organisation des sociétés supérieures, Paris: F. Alcan. (Translated, 1964, by

Lewis A. Coser as The Division of Labor in Society, New York)

4. Simmel, Georg (1908). Soziologie, Leipzig: Duncker & Humblot.

5. Harrison White, https://en.wikipedia.org/wiki/Harrison_White, 08.2013г.

6. Social network service,

https://en.wikipedia.org/wiki/Social_networking_service, 08.2013г.

7. Eat Your Vegetables, and Don't Forget to Tweet,

http://finance.yahoo.com/news/pf_article_112952.html, 08.2013г.

8. Pew Internet : Social Networking (full detail),

http://pewinternet.org/Commentary/2012/March/Pew­Internet­Social­Network

ing­full­detail.aspx, 08.2013г.

9. The Positive Impact Of Social Networking Sites On Society [Opinion],

http://www.makeuseof.com/tag/positive­impact­social­networking­sites­socie

ty­opinion/, 08.2013г.

10. Pew Internet : Coming and Going on Facebook,

http://www.pewinternet.org/Reports/2013/Coming­and­going­on­facebook/K

ey­Findings.aspx, 08.2013г.

11. Negative Effects of Social Networking Sites for Students,

http://performancing.com/negative­effects­of­social­networking­sites­for­stud

130

ents/, 08.2013г.

12. The Brief History of Social Media,

http://www.uncp.edu/home/acurtis/NewMedia/SocialMedia/SocialMediaHisto

ry.html, 08.2013г.

13. Friends Reunited, http://en.wikipedia.org/wiki/Friends_Reunited, 08.2013г.

14. Friendster, http://en.wikipedia.org/wiki/Friendster, 08.2013г.

15. Myspace, http://en.wikipedia.org/wiki/Myspace, 08.2013г.

16. Silicon Valley’s All Twttr, http://gigaom.com/2006/07/15/valleys­all­twttr/,

08.2013г.

17. Google Buzz, http://en.wikipedia.org/wiki/Google_Buzz, 08.2013г.

18. Facebook Buys Instagram for $1 Billion,

http://mashable.com/2012/04/09/facebook­instagram­buy/, 08.2013 г.

19. Facebook reaches one billion users,

http://money.cnn.com/2012/10/04/technology/facebook­billion­users/index.ht

ml, 08.2013г.

20. Google+ Surpasses Twitter to Become Second Largest Social Network,

http://www.searchenginejournal.com/google­plus­surpasses­twitter­to­becom

e­second­largest­social­network/57740/, 08.2013г.

21. XFBML, http://fbdevwiki.com/wiki/XFBML, 08.2013г.

22. Share Dialog,

https://developers.facebook.com/docs/reference/plugins/share­links/,

08.2013г.

23. Percent­encoding, http://en.wikipedia.org/wiki/Percent­encoding, 08.2013г.

24. Open Graph markup,

https://developers.facebook.com/docs/opengraph/using­actions/, 08.2013г.

25. JSON, http://json.org/, 08.2013г.

131

26. CSV (Comma­separated values),

http://en.wikipedia.org/wiki/Comma­separated_values, 08.2013г.

27. Responsive web design,

http://en.wikipedia.org/wiki/Responsive_web_design, 08.2013г.

28. The Open Graph protocol, http://opengraphprotocol.org/, 08.2013г.

29. RDFa, http://en.wikipedia.org/wiki/RDFa, 08.2013г.

30. MIME type, http://en.wikipedia.org/wiki/Internet_media_type, 08.2013г.

31. CURIE, http://en.wikipedia.org/wiki/CURIE, 08.2013г.

32. SDKs for Facebook, https://developers.facebook.com/docs/sdks/,

08.2013г.

33. Lightweight Directory Access Protocol,

http://en.wikipedia.org/wiki/Lightweight_Directory_Access_Protocol,

08.2013г.

34. Fan­gating, http://en.wikipedia.org/wiki/Fan­gating, 08.2013г.

35. Apache HTTP сървър, http://httpd.apache.org/docs­project/, 08.2013г.

36. Apache Subversion, http://en.wikipedia.org/wiki/Apache_Subversion,

08.2013г.

37. MySQL, http://en.wikipedia.org/wiki/MySQL, 08.2013г.

38. InnoDB, http://en.wikipedia.org/wiki/InnoDB, 08.2013г.

39. Primary and Foreign Key Constraints,

http://technet.microsoft.com/en­us/library/ms179610.aspx, 08.2013г.

40. MVC(Model­view­controller),

http://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller,

08.2013г.

41. PHP: ImageMagick, http://php.net/manual/en/book.imagick.php, 08.2013г.

42.PHP: GD: http://php.net/manual/en/book.image.php, 08.2013г.

132

43. PHP: Mysqli, http://www.php.net/manual/en/book.mysqli.php, 08.2013г.

44. .htaccess, http://en.wikipedia.org/wiki/Htaccess, 08.2013г.

45. Robots exclusion standard,

http://en.wikipedia.org/wiki/Robots_exclusion_standard, 08.2013г.

46. FB.init, https://developers.facebook.com/docs/reference/javascript/FB.init/,

08.2013г.

47. FB.getLoginStatus,https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/, 08.2013г.

48. FB.login,https://developers.facebook.com/docs/reference/javascript/FB.login/,08.2013 г.

49. FB.api, https://developers.facebook.com/docs/reference/javascript/FB.api/,08.2013г.

50. FB.Event.subscribe,https://developers.facebook.com/docs/reference/javascript/FB.Event.subscribe/, 08.2013г.

51. Ajax, http://en.wikipedia.org/wiki/Ajax_(programming), 08.2013г.52. jQuery.ajax, http://api.jquery.com/jQuery.ajax/, 08.2013 г.53. Feed Dialog, https://developers.facebook.com/docs/reference/dialogs/feed/,

08.2013г.54. Object.prototype,

https://developer.mozilla.org/en­US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype, 08.2013г.

55. FB.XFBML.parse,http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/, 08.2013г.

56. HTTP Secure, http://en.wikipedia.org/wiki/HTTP_Secure, 08.2013 г.

133