Хората са социални индивиди и като такива във времето се е наложило да се проучи тяхното поведение, за да се дадат отговори на техните взаимовръзки в самата социална група. Това поведение на хората се обяснява, чрез термина социална мрежа. Проучването на социалните мрежи започва в края на XIX век и е дял от социалните науки. Google Docs : https://docs.google.com/document/d/1VhS4tPwrTc6ORkMHcYfENycpTaY4EaOOth9oTdFzPcI/edit

1. Икономически Университет – Варна
Факултет „Информатика”
Катедра „Информатика”
Дипломна работа
на тема
„Социални мрежи и тяхното приложение при
изграждане на уебсайтове и Facebook
апликации”
Дипломант: Димитър Данаилов Научен ръководител:
Факултетен номер: 3043 доц. д­р Владимир Сълов
Специалност: Информатика
гр. Варна, 2013
1

2. Съдържание
Увод 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

3. 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

4. Заключение 128
Приложение 130
Литература 131
4

5. Увод
Хората са социални индивиди и като такива във времето се е наложило
да се проучи тяхното поведение, за да се дадат отговори на техните
взаимовръзки в самата социална група. Това поведение на хората се
обяснява, чрез термина социална мрежа. Проучването на социалните мрежи
започва в края на XIX век и е дял от социалните науки.
Социалните мрежи в Информатика се появяват още в зората на
компютърната епоха, но тяхното истинско развитие се случва в последните
двадесет години благодарение на появата на Интернет.
Основният пазар на социалните мрежи може да се каже, че е глобален
макар, че има и страни като Китай и Северна Корея, където достъпа е
ограничен. В Северна Корея като цяло използването на Интернет е
забранено, единствено учени и военни могат да го използват, но те
подлежат на строг контрол. В Китай ситуацията е по ­ добра, но и при тях
се наблюдава строг контрол върху свободата на словото като дори търсачка
като Google е заменена с Китай еквивалент : Baidu. Въпреки това към днешна
дата социалните мрежи се използват активно от половината население на
Земята, което показва тяхната значимост в нашето ежедневие.
Цел на настоящата дипломна работа е да се представят и да се
систематизират социалните мрежи и да се разработи Facebook апликацията
“Пътувай с Bgrazpisanie”.
За реализиране на поставените цели са дефинирани следните задачи :
5

6. ● Да се представи същността на социалните мрежи от теоретична гледна
точка.
● Да се дадат практически примери за тяхната интеграция при
разработването на софтуер.
● Да се анализират основните библиотеки за комуникация със
социалните мрежи при разработка на софтуер.
● Да се разработи практически пример за Facebook апликация тип игра.
6

7. Глава I. Същност и историческо развитие на социалните
мрежи
1. Същност на социалните мрежи
Социалната мрежа е теоретична конструкция, която се използва в
социалните науки да се изучават взаимоотношенията между лица, групи,
организации или дори и цели общества (наричани още социални единици).
Терминът се използва при описването на социалната структура. Връзките
между една социална единица с друга социална единица се нарича социален
контакт. Аксиома на социалната мрежа е подхода за разбирането на
социалното взаимодействие е, че социалните явления трябва да бъдат
изследвани чрез свойствата на отношенията между социалните единици,
вместо свойствата на отделните социални единици. По този начин едно от
основните свойства на социалната мрежа, че индивидуалната единица се
пренебрегва и не е обект на изследване. Именно поради много различните
видове отношения образувани в социалните мрежа, мрежовия анализ е
полезен, за да се разбере поведението на различните социални единици в
самата социална група. В социалните науки тези области на проучване
включват :
● антропология;
● биология;
● комуникационни изследвания;
● икономика;
● география;
● информационни науки;
7

8. ● организационни изследвания;
● социална психология;
● социология;
● социолингвистика;
Важно е да се отбележи, че социалните науки не се ограничават само да
изброените по ­ горе направления.
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.2013
2
Tönnies, Ferdinand (1887). Gemeinschaft und Gesellschaft, Leiapzig: Fuesa'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
8

9. отделните частици, а взаимовръзката им в социалната група.
Георг Зимел (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

10. социалния обмен.
През 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

11. Социалната мрежа се състои често от представяне на всеки
потребител(често това се нарича профил), неговите/нейните дейности, както
и разнообразие от допълнителни услуги. Често пъти тези допълни услуги
биват :
● споделяне на снимки;
● споделяне на публикации;
● споделяне на събития;
● споделяне на интереси;
По ­ известните към днешна дата социални мрежи в глобален план са :
● 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

12. В края на Декември 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

13. Фиг. 1 ­ Статистическо използване социалните мрежи от възрастните
американци
Като на база на това проучване към Декември 2012 се получават следните
данни за използваемостта на социалните мрежи :
13

14. ● 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

15. новото правителство.
● Нов начин за комуникация ­ социалните мрежи ни предоставят лесен и
бърз начин за комуникация с нашите приятели. Едно от предимствата
на комуникацията в социалните мрежи е, че открито може да изкажете
своето мнение и то ще бъде чуто и видяно от десетки ваши приятели,
за разлика от едно телефонно обаждане.
● Винаги в крак с информацията ­ социалните мрежи не са просто
вътрешен кръг от вашите приятели и познати, те ни дават възможност
да научим последните новини и събития в страната и чужбина.
● Намиране на социална група с общи интереси ­ социалните мрежи ви
помагат да намерите хора, които споделят интереси подобни на
вашите. В 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

16. 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

17. Първият етап се характеризира със следните събития :
● 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

18. по различните типове на географските райони. 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

19. милиона потребителя.
○ 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

20. ○ 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

21. ○ 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

22. станции все още са силни, но се забелязва, че националните и
местните вестници отстъпват на Интернет.
● 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

23. благоприятства все повече хора да се свързват с Интернет за по
­ дълги периоди от време. Около 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

24. ○ 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

25. ○ Проектът на 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

26. файлове дневно.
○ 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

27. Глава II. Изграждане на Facebook Апликация за споделяне на снимки
В днешно време много малко от модерните сайтове нямат интеграция на
социалните мрежи вътре в тях. Дали ще бъде примерно интеграция на
Facebook login, Twitter login, Facebook like button, Twitter button и т.н. по една
или друга форма социалните мрежи са неразделна част от развитието на
всеки един сайт. Основните причини за такова изискване от страна на
клиентите са няколко :
● По ­ голяма популярност и по ­ голяма посещаемост на самите
сайтове. Например има няколко проучвания, че интеграцията на
плъгина на facebook за коментари вдига средната посещаемост с
около 30 %. Друг пример е интегрирането на така наречения game
bonification ­ харесайте тази страница и можете да спечелите почивка,
ваканция и т.н или ще получите 10 % намаление.
● Много от сайтове към днешно време прибягват към една или повече
от социалните мрежи с цел по ­ бърза регистрация и по ­ лесен достъп
до данните на самия потребител.
Фиг. 3 ­ Интеграция на социалните мрежи като един от начините за
създаване на публичен профил в imdb.com
Целите, които стоят пред нас е в настоящата глава е да разгледаме
детайлно документацията на Facebook и да я приложим при разработката на
27

28. апликацията за споделяне на снимки.
Както вече бе изяснено 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

29. За разработката на подобен тип приложения, а не само затова всеки
разработчик, които желае да използва ресурсите на 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

30. Атрибути, които може да задавате са :
● 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

31. ● 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

32. подразбиране. Минусът на тази версия е, че няма да работи коректно
при по стари браузъри. За дадената версия трябва да добавите
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

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

34. Фиг. 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

35. Много рядко се използва само 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

36. 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

37. ● 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
<iframe
src="//www.facebook.com/plugins/follow.php?href=https%3A%2F%2F
www.facebook.com%2Fzuck&amp;width=450&amp;height=80&amp;colors
cheme=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>
● URL
http://www.facebook.com/plugins/follow.php?href=https%3A%2F%2F
www.facebook.com%2Fzuck&width=450&height=80&colorscheme=light&
layout=standard&show_faces=true&appId=247554305278677
1.4. Comments Box
37

38. Модулът за споделяне на коментари (на англ. “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

39. Comments Box е подходящ да се интегрира в :
● Блог уеб сайтове
● Новинарски сайтове
● Директории
● Продуктови страници
● и мн. други
Comments Box може да се създаде, чрез генератор на следния адрес :
https://developers.facebook.com/docs/reference/plugins/comments/
Фиг. 12 ­ Comments Box генератор
39

40. Атрибути, които може да задавате са :
● 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

41. нов коментар се съдържа забранена дума или е направен от блокиран
потребител, този коментар автоматично има статус лимитиран.
За по ­ лесна администрация ако даден уеб сайт има 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

42. Пример за използване на Share dialog :
<a
href="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='+encodeURICompo
nent(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

43. ако желаете да оставите и коментар, но той не е задължителен.
● 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

44. когато хората споделят съдържание от нашия уеб сайт във Facebook или те
коментират нашите страници използвайки модула Comments box. Ако
хората са влезли в техните Facebook профили, докато са в нашия сайт,
съдържанието ще бъде персонализирано спрямо активността на техните
приятели. Ако те в момента не използват своите профили, то ще им бъде
предоставена възможност за влизане в своите профили и ще се покажат
препоръки от целия сайт.
Целта на плъгина е пространството да бъде заето от активности на
вашите приятели. Ако не е налице такава възможност, то плъгина ще
запълни нужното пространство с препоръки. Ако атрибута
“recommendations” има стойност true, то плъгина ще бъде разделен на две
части. В първата част ще показват активностите на вашите приятели, а във
втората ще се показват препоръките. Отново ако няма достатъчно дейности
от страна на вашите приятели в този случай и в първата част отново ще се
показват препоръки.
Activity feed може да конфигуриран, чрез следните атрибути:
● App ID
● Един или повече типа
● Домейн
App ID
Ако изберете да използвате App ID за activity feed, ще бъдат показани
всички действия (можете да изградите и собствени дейности за дадената
апликация, които да се показват в activity feed). Забележка : ако се използва
44

45. 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

46. Домейнът ще включи дейности само за зададения в 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

47. ● 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

48. показване на информацията в 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
<iframe
src="https://www.facebook.com/plugins/activity.php?action=like
&border_color=%23ececec&font=tahoma&header=true&height=220&lin
ktarget=_blank&locale=en_US&site=http%3A%2F%2Fwww.ue­varna.bg"
scrolling="no" frameborder="0" style="border:none;
48

49. 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

50. <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

51. Фиг. 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

52. height="220" header="true"></fb:recommendations>
● IFRAME
<iframe
src="https://www.facebook.com/plugins/recommendations.php?acti
on=like&border_color=%23ececec&font=tahoma&header=true&height=
220&linktarget=_blank&locale=en_US&site=http%3A%2F%2Fwww.ue­va
rna.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

53. харесат дадена страница или да предложите подобно съдържание с цел
увеличаване на техния престой.
Задължително условие за да работи 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

54. ще се покаже 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

55. Фиг. 15 ­ Recommendations bar генератор
Фиг. 16 ­ Визуализация на Recommendations bar
Атрибути :
● href ­ URL адреса на страница. По подразбиране е текущата.
● trigger ­ По ­ горе бе обяснен.
● read_time ­ По ­ горе бе обяснен.
● action ­ аналогичен с другите плъгини.
● side ­ Позицията на която плъгина ще се визуализира. Опциите са две :
‘left’ и ‘right’.
● site ­ Може да изброите множество домейни, за които се отнася
Recommendations bar, а разделителя е запетая. По подразбиране се
взима този от href атрибута.
● ref ­ аналогичен с другите плъгини.
55

56. ● 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

57. ● Могат да харесат дадената Facebook страница само с едно натискане
без да е нужно да влизат във Facebook.
Like box може да се създаде, чрез генератор на следния адрес :
https://developers.facebook.com/docs/reference/plugins/like­box/
Фиг. 17 ­ Like box генератор
Фиг. 18 ­ Визуализация на Like box
57

58. Атрибути :
● 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

59. Like box поддържа и четирите вида имплементации :
● HTML5
<div class="fb­like­box"
data­href="https://www.facebook.com/University.of.Economics.Va
rna" data­width="292" data­show­faces="true"
data­header="true" data­stream="true"
data­show­border="true"></div>
● XFBML
<fb:like­box
href="https://www.facebook.com/University.of.Economics.Varna"
width="292" show_faces="true" header="true" stream="true"
show_border="true"></fb:like­box>
● IFRAME
<iframe
src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2
Fwww.facebook.com%2FUniversity.of.Economics.Varna&amp;width=29
2&amp;height=590&amp;colorscheme=light&amp;show_faces=true&amp
;header=true&amp;stream=true&amp;show_border=true&amp;appId=24
7554305278677" 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

60. 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

61. Фиг. 19 ­ Lоgin button генератор
Атрибути :
● show_faces ­ указва дали да се виждат профилните снимки
● autologoutlink ­ ако стойността на този атрибут е ‘true’ и ако вече
потребителя е влязъл в своя профил, то бутона ще промени своята
снимка и ще позволи на дадения потребител да излезе като ще
прекъсни и всички активни сесии с Facebook. По подразбиране тази
опция е изключена.
● onlogin ­ какво трябва да стане след като потребителя влезе успешно
във Facebook. Пример : onlogin=”submitLoginForm();”
● max­rows ­ Максимално, на колко реда да се показват профилни
снимки. По подразбиране стойността е 1.
● width ­ ширината на плъгина в пиксели. По подразбиране е 200px.
● scope ­ По подразбиране Login Button изисква от потребителите да ви
предоставят публичната си информация от Facebook, но ако е
необходимо достъп до лична информация, то вие трябва да го
укажете в този атрибут. За разделител се използва запетая при
61

62. изброяване на различните права, от които се нуждаете. Целия списък
от правила за достъп, които може да използвате е достъпен на
следния адрес : 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

63. поискате информация, която не е разположение, чрез Facebook API
(например, любим филм). Плъгинът позволява и на потребители, които
нямат профил във Facebook или не искат да си предоставят данните от
техния Facebook също на равно да се регистрират. По този начин не е
нужно интеграция на две отделни регистрации.
Пример как изглежда плъгина за регистрация :
Фиг. 20 ­ Примерен изглед на плъгина на регистрация
Кодът, които отговоря на фиг. 20 e следния :
<iframe
src="https://www.facebook.com/plugins/registration?client_id=1
13869198637480&redirect_uri=https%3A%2F%2Fdevelopers.facebook.
com%2Ftools%2Fecho%2F&fields=name,birthday,gender,location,ema
il" scrolling="auto" frameborder="no" style="border:none"
allowTransparency="true" width="100%" height="330">
</iframe>
63

64. Атрибути :
● 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

65. Полетата предефинирани от 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

66. CSV(Comma­separated values) . Пример за визуализация на форма с 26
потребителски полета може да се види на фиг. 21 :
Фиг. 21 ­ Примерен изглед на форма за регистрация с потребителски
полета
Форматът на примерната форма е JSON масив с обекти. По ­ детайлно той
26
CSV (Comma­separated values), http://en.wikipedia.org/wiki/Comma­separated_values, 08.2013 г.
66

67. може да се разгледа на следния адрес :
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

68. по този начин съответния 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

69. Изходният код на формата показана по ­ горе е следния :
<div id="fb­root"></div>
<script
src="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­button
registration­url="https://developers.facebook.com/docs/plugins
/registration" />
Ако потребителя, които разглежда вашия сайт не е влязъл във своя
профил във Facebook, то тогава на бутона ще пише ‘Login’. Когато
потребителя натисне този бутон ще се покаже диалогов прозорец, в които
той трябва да влезе в своя Facebook профил, ако съответния потребител
няма регистрация в нашия сайт, то съответния потребител ще бъде
пренасочен към бъде пренасочен към желания от нас URL адреса, които сме
задали в атрибута ‘registration­url’. Ако потребителя вече е регистриран, то
ще бъде извикан съответния JavaScript Event ­ onlogin(). Когато това събитие
бъде извикано вече ще имате съответния профил за дадения уеб сайт.
69

70. Ако потребителя, които разглежда вашият сайт вече е влязъл във своя
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

71. бъде намерен отново на :
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

72. Фиг. 23 ­ Facepile генератор
Атрибути :
● href ­ по ­ горе беше обяснен.
● action ­ по ­ горе беше обяснен.
● app_id ­ по ­ горе беше обяснен.
● max_rows ­ максималният брой редове с профилни снимки, които ще
се покажат. XFBML версията на плъгина автоматично ще изчисли
нужната височина; ако искаме профилните снимки да се разполагат
максимално на четири реда, но имаме информация, която заема само
два от тях плъгина ще заема само нужните два реда. По подразбиране
има стойност 1.
● width ­ ширината на плъгина в пиксели. По подразбиране широчината
е 300px, а минимум тя може да бъде 200px.
● size ­ Размерът на снимките и социалното съдържание. По
72

73. подразбиране е избран размер : ‘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
<iframe
src="//www.facebook.com/plugins/facepile.php?app_id&amp;href=h
ttp%3A%2F%2Ffacebook.com%2FFacebookDevelopers&amp;width=300&am
p;max_rows=1&amp;colorscheme=light&amp;size=medium&amp;show_co
unt=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

74. Embedded Posts е начин да се публикува публични постове от Facebook
(Facebook страница или Публична личност от Facebook) във вашия уеб сайт.
С Embedded Posts вие можете да покажете ако има прикачения видео или
аудио файлове, броя на харесванията и споделянията, както и прикачени
документи. С Embedded Posts ще позволите на вашите потребители да
използват същия набор на информация, които е на разположение и в
Facebook.com. По този начин те ще могат да започнат да следват публични
личности или да харесат съдържание на даден автор или на Facebook
страница, директно през вграденото съдържание.
Създаване на Вградено съдържание (“Embedded Post”)
При създаване Embedded Post, то трябва да проверим дали дадения пост
във Facebook е публичен (Facebook ще указват тези постове с глобална
икона). Засега единствено публични постове от Facebook страници и
профили ще могат да бъдат вградени.
Ако даденият пост е публичен ще трябва да натиснем иконата, която е
десния горен ъгъл във Facebook :
74

75. Фиг. 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

76. информация искате да бъде споделена от потребителите ви във 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

77. <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

78. content="http://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found
fame 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

79. <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

80. потребителя да избере снимката която най ­ много му харесва от дадения
списък. Пример :
<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

81. Когато общността (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

82. Номерът на песента в съответния диск.
○ 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

83. Дължината на филма в секунди.
○ 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

84. ○ 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

85. 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

86. библиотеки за разработка (на англ. 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

87. добавите 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

88. интегрират 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

89. 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

90. 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

91. Фиг. 26 ­ Схема на работа на Апликацията
91

92. Разделяйки процесите на подпроцеси, за да се разгледа системата
детайлно, тя придобива следния схематичен вид :
Проверка дали потребителя е харесал 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

93. Фиг. 27 ­ Проверка дали потребителя е харесал Facebook стр. (схема)
93

94. Етап 2 ­ Показване на Бутон за регистрация в играта и визуализиране на
всички участници до този момент (Фиг. 28) :
● Визуализира се бутон за регистрация и паралелно с това се извличат
всички участници до момента
● Проверява се дали апликацията има достъп до :
○ email : е ­ поща на потребителя.
○ user_birthday : рождената дата на потребителя
○ publish_actions : Тази опция ни е нужно при етап 4 за да можем
успешно да публикуваме съобщение на стената на потребителя.
● При натискане на бутона за регистрация се проверява дали дадения
потребител съществува в локалната база на апликацията и ако не
съществува се създава запис с нужната информация.
● Преминаване към етап 3
94

95. Фиг. 28 ­ Бутон за рег. и визуализиране на участниците (схема)
95

96. Формата за участие (Фиг.29):
● Формата се визуализира като трябва да се попълнят три полета :
○ заглавие
○ снимка
○ бутон за съгласие с общите условия на играта
● Формата се изпраща
● Извършват се нужните валидации
● При коректни данни от страна на потребителя се преминава към етап 4
96

97. Фиг. 29 ­ Форма за участие (схема)
97

98. Публикуване на съобщение на стената(Тimeline) на Потребителя (фиг. 30):
● Зареждане на данните за създаване на Timeline съобщение
● Изпраща се заявка за ново съобщение към системата на Facebook
● Ако информация е коректна се публикува на стената на потребителя
Фиг. 30 ­ Създаване на Timeline съобщение (схема)
98

99. 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

100. ● Дизайнът на апликацията трябва да е 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

101. кога е била създадена снимката
○ 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

102. 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_ci
AUTO_INCREMENT=1;
За създаване на таблицата users използваме следния код :
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`oauth_provider` enum('facebook') COLLATE utf8_unicode_ci
NOT 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 NOT
NULL,
102

103. `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_ci
AUTO_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

104. 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

105. ● .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

106. ● 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

107. ■ 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

108. наречени на англ. 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

109. подразбиране на по ­ голямата част от 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

110. 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

111. В табл.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

112. За инициализация на кода за работа с 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 Аpp
Id на апликацията.
● 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

113. fbOauthDialog();
// Зареждане на бутона за регистрация в играта
loadRegisterButton();
// Зареждане на снимките на участниците
pictureChallenger.initialize();
}
});
4.6.3. Зареждане на диалог за влизане във Facebook и достъп на
апликацията до данните на потребителя
Тази стъпка от кода се изпълнява единствено ако потребителя не е
влязъл в своя профил или не е разрешил достъп на апликацията до неговите
харесвания. Диалоговият прозорец има две състояния показани на фиг. 33 и
фиг. 34. Ако потребителят е вече влязъл във своя профил, то той няма да
види фиг.33.
Фиг. 33 ­ Диалогов прозорец за вход във Facebook
Фиг. 34 ­ Диалогов прозорец за достъп до профила на потребителя
113

114. Функцията 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

115. uid (id­то на потребителя в социалната мрежа Facebook). Функцията
интегрира в себе си FB.api и заявка написана на езика FQL, синтаксиса е
следния :
// Заявка написана на езика FQL
var 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

116. 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

117. 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

118. }
});
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

119. да бъде добавена формата за качване на снимка.
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

120. При реализацията на тази функционалност е използвана официалната
документация на 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

121. ● 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

122. Както беше споменато в секцията за Техническите и програмните
изисквания апликацията трябва да поддържа responsive design и това е
направено като може да се види в следващите фигури :
Фиг. 36 ­ Изглед на апликацията “Пътувай с Bgrazpisanie” през iPad
Фиг. 37 ­ Изглед на апликацията през Смартфон
122

123. Апликацията има следните страници :
● Начална страница
● Общи условия
● Fangate страница
● Индивидуална страница на всяка снимка участник в състезанието
Начална страница
Началната страницата е основна за апликацията като на нея се
визуализира бутона за регистрация/формата за участие и паралелно с това
всички участници до този момент. Изглед началната страница общ изглед
на началната страница беше показан на фиг. 36 и фиг. 37, а формата за
участие е показана на следващата фиг. :
Фиг. 37 ­ Изглед на формата за участие
Общи условия
Страницата с общите условия е едно от многото неща, които трябва да
123

124. има всяка една апликация, то тя да бъде одобрена и да може да се използва
публично. Страницата с общите условия в настоящата апликация за
изясняване на всякакви въпроси и казуси при нейното използване.
Фиг. 38 ­ Изглед на Страницата с Общите условия
Fangate страница
Fangate страницата, както беше изяснено преди това служи за набиране
на фенове към дадена Facebook Страница. Много голям процент да не
кажем всички Facebook уеб апликации в днешно време имат такава страница
като дори подобен тип страница се е превърнало в задължително изискване
от страна на клиентите. “Пътувай с Bgrazpisanie” не прави изключение и
страницата, за по ­ добра визия са използван един от много шрифтове
124

125. предоставени ни от : 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

126. <meta property="og:site_name" content="bgrazpisanie"/>
<meta property="og:description" content="..."/>
<!­­ END Facebook Open Graph ­­>
Същата тази страница изглежда под мобилен телефон по следния начин :
Фиг. 40 ­ Изглед на индивидуална страница на всяка снимка участник
В техническите и програмните изисквания едно от изисквания е за
Администриране на система. Това изискване е изпълнено като се прави
проверка посредством Facebook PHP SDK дали човека, които е качил
снимката и потребителя на системата са едно и също лице. Ако това е
126

127. истина то в десния горен ъгъл точно до заглавието на снимката се
визуализира бутон за изтриването на снимката. На същия принцип се прави
и проверка дали потребителя на система не е един от администраторите на
системата, които са зададени предварително в Контролера Pictures. Ако
потребителя на системата се окаже, че е администратор и той вижда същия
бутон.
Фиг. 41 ­ Административен изглед на индивидуална страница на
всяка снимка участник
127

128. Заключение
Целта на настоящата дипломна работа беше да бъде показан какъв е
начин за работа с най ­ голямата социална мрежа в наши дни и какви са
съвременните инструменти за разработка на различна гама от софтуер. За
целта бе избрано разработката на Facebook апликация тип игра, която към
днешна дата е едно от най ­ силните маркетингови инструменти за набиране
на Facebook фенове и развитие на брандови стратегии.
Апликацията ще бъде активна в рамките около 30 дни в месеците
септември и октомври и очакванията са да донеси около 15 % ­ 30 % нови
фенове на страницата на Bgrazpisanie, както и подпомогне за развитието на
марката на Bgrazpisanie на Българския пазар.
От направеното проучване преди започване на разработката може да се
направят няколко заключения какво трябва да включва апликация от такъв
тип :
● Задължителна е разработката на Fangate страница
● Потребителите трябва да бъдат мотивирани да участват с
атрактивна награда
● Препоръчително е подобен тип апликации да имат като
функционалност автоматично създаване на съобщения на
стената на потребителя във Facebook.
Едно от бъдещите въведения, което социалната мрежа Facebook ще
наложи от 1 Октомври за всички Facebook апликации е защита на личните
128

129. данни с протокола HTTPS (съкратен от “Hypertext Transfer Protocol 56
Secure”). Такъв протокол беше закупен за домейна bgrazpisanie.com и
настройката на сертификата за сигурност е последната стъпката преди
пускането на “Пътувай с Bgrazpisanie”.
56
HTTP Secure, http://en.wikipedia.org/wiki/HTTP_Secure, 08.2013 г.
129

130. Литература
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

131. 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

132. 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

133. 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.getLoginStatu
s/, 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.subscri
be/, 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