Хората са социални индивиди и като такива във времето се е наложило да се проучи тяхното поведение, за да се дадат отговори на техните взаимовръзки в самата социална група. Това поведение на хората се обяснява, чрез термина социална мрежа. Проучването на социалните мрежи започва в края на 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