Лесно поставяне на Фейсбук притурки

Социалните приставки (притурки, джаджи) отдавна се наложиха като част от съвременните уеб стандарти и, логично, всеки сайт, желаещ да има стабилна или все по-голяма посещаемост, би трябвало да предлага някакъв вариант за своите посетители лесно да споделят за него или негово съдържание в своите кръгове в социалните мрежи. Собствениците на сайтове, базирани на готови платформи са улеснени в интегрирането на социални притурки и функционалности, чрез използването на вече създадени разширения за това за тяхната платформа. Такива има дори в изобилие. И понякога точно това може да се окаже проблем - как да намерим и изберем по-добрата от възможностите за споделяне в мрежата, при това изискваща минимум усилия и познания, за да бъде интегрирана/използвана, както и несъдържаща някакви допълнителни неща, които ние не искаме! За собствениците на персонално разработени платформи (custom solutions), пък включването на подобни социални притурки рядко е възможна без намесата на техния разработчик (разбирай допълнително заплащане). Е, може би информацията по-долу ще е полезна и за двете групи.

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

За целта са ни нужни основно две неща:

1. достъп до администрацията на нашия сайт;
2. да посетим официалната страница на Фейсбук за разработчици с конфигуратори на притурки.

Ще добавя, че за някои функционалности може да са ни нужни и други неща, като собствена Фейсбук страница, например или пък малко повече познания и достъп до редакция кода на сайта ни, но това бързо ще ви става ясно още при започване на процеса, описан по-долу.

Иначе, достъпът до администрацията на нашия сайт ще ни осигури възможността да поставим кода на съответната функционалност за социално споделяне на желаното място в сайта ни, а официалната страница на Фейсбук за разработчици ще ни позволи да си създадем и персонализираме своята, желана в сайта ни функционалност, само с няколко щраквания, използвайки предоставените за целта от Фейсбук, конфигуратори на притурки.

Стъпка 1 - избор на притурка

Едва ли ще са ви необходими някакви пояснения тук, просто отваряте страницата с Фейсбук притурките (вж. по-горе) и се ориентирате коя от всичките единайсет е онази, която ви е нужна. За съжаление, страницата е само на английски, но картинките са достатъчно ясни, за да ви ориентират какво ще получите от даденото разширение. Все пак, ще поясня най-популярните от тях:

• LikeButton - позволява харесване с Фейсбук профил на страницата, в която е поставен; 
• LikeBox - показва какво се публикува във посочената от вас Фейсбук страница, заедно с лицата на феновете, които са в нея, заедно с възможност да бъде харесана;
• Comment - позволява на посетителите да коментират в страницата, където сте сложили притурката с техен Фейсбук, Яху, АОЛ или Хотмейл профил;
• Facepile - показва потребителите, свързали се с някакво социално действие, например харесване или регистрация, с посочената от вас страница.

Стъпка 2 - персонализиране на притурката

След като вече сте решили коя функционалност искате да добавите в сайта си, следва да щракнете върху нея и ще ви се отвори страницата, в която е и конфигуратора на този вид притурка. В него ще трябва да въведете някои данни (различни според различните притурки) и най-вероятно след 2 минути ще сте създали притурката такава, каквато искате да бъде (през цялото време ще виждате и самия резултат, променящ се според настройките, които правите, в реално време).

Стъпка 3 - поставяне на притурката в сайта

Всъщност, тази стъпка е май най-лесната част. Защото персонализираната от вас току-що притурка се поставя на желаното място в сайта буквално с копиране в него на два  реда код, съгласно лесни за изпълнение указания. Е, добре, ще имате избор измежду няколко възможни начина за интеграция на притурката - разгледайте ги и си изберете онзи, който ще ви е най-лесен за реализация. В повечето случаи това би била опцията "Адрес" или "URL" (в зависимост от това на какъв език е браузърът ви.

Ето, например по-долу една такава притурка за коментари, която генерирах точно за 1 минута: заповядайте, коментирайте :).

Това е - бърза, лесна и безплатна - процедурата по създаване на Фейсбук джаджи, които да поставим в нашите сайтове. И ако вие все още нямате такива във вашия сайт, независимо дали той е динамичен или статичен, или пък искате да имате и още от тях, ви остава просто да си ги добавите. А след като сте готови, похвалете се с новата ви социална притурка и тук! :)

Можете да ме подкрепите и като препоръчате този материал.

Направи си сайт - въпроси и трикове

Как лесно да добавим картинки, връзки или форматираме текст в притурка в УърдПрес

За начинаещите в създаването на Интернет страници, трудностите по поставяне на желаното съдържание на желаното място в сайта и с желания за него външен вид, могат да са твърде големи, независимо дали са базирали сайта си на някоя платформа като wordpress или blogger, или ползват някаква програма за HTML сайтове.

По-долу ще опиша един по-кратък и лесен начин, по-скоро трик, тъкмо за имащите сайт в WordPress, да поставят картинка с текст и връзка в страничната колона на сайта си. Споделям този трик, защото текстовите притурки (джаджи) в УърдПрес наистина нямат редактор, който да позволи подобно добавяне на изображения, връзки или дори да форматираме текста в тях и без специализирани познания по HTML постигането на подобно нещо, е невъзможно. Още повече, че по аналогичен начин, описаният по-долу трик може да се използва за добавяне на картинки или форматиран текст в притурки и при други платформи за публикуване на съдържание.

Добавяне на картинка, текст и връзка в притурка на WordPress - стъпка по стъпка

1. Влезте в админ панела и идете на Публикации -> Нова.
2. Щракнете на иконката за добавяне на изображение в лентата с инструменти.
   
3. Изберете от компютъра си картинка (тя не трябва да е по-широка от ширината на вашите странични колони) и я добавете в сайта.
4. След като се появи в публикацията, напишете под нея желания от вас текст.
5. Маркирайте целия блок (може и само единия елемент - картинка или текст, според това, кое искате да се превърне във връзка) и щракнете на иконката за създаване на хипервръзка.
6. Въведете адреса и заглавието на връзката, като посочите тя да се отваря в нов прозорец и запазете.
7. Превключете публикацията в режим HTML.
   
8. Съдържанието на публикацията ще се покаже във вид на HTML код. Копирайте всичко и го поставете в текстова притурка в желаната от вас странична колона и запазете притурката. Готово!
9. Идете в Публикации и изтрийте черновата на създадената публикация.

Този трик описва добавянето в текстова джаджа на изображение, текст и хипервръзка. Но сами се досещате, че може да се използва и за почти всичко останало, което можете да добавяте в публикациите си. Принципът е един и същ - копираме кода на създаденото там съдържание и го поставяме в притурката.

Вярвам, че с този трик добавянето на картинка, форматиран текст или връзка в притурка на вашия сайт, вече ще ви е достатъчно лесно. А ако все пак имате въпроси - питайте!

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

Вижте още въпроси и трикове в "Направи си сайт!"

Как да добавим "Акценти" в началната страница - за Blogger сайтове

Една от популярните разработчици и дизайнери за Blogger сайтове, Аманда Кенеди, публикува наскоро в поддържания от нея сайт Blogger Buster, интересно и лесно решение за собствениците на сайтове в Блогър как да включат в структурата на сайта си секция с акценти, видима само при зареждане на основната страница на сайта. Сигурен съм, че мнозина от вас ще искат да се възползват от подобна възможност, затова по-долу им предлагам в разширен превод на български, указанията на Аманда за добавяне на секция с акценти на началната страница на сайта.

"Една от най-често използваните от мен техники при създаването на шаблон за Блогър е включването на секция "Акценти" в началната страница на сайта. Използвам я, за показване на ротиращо се съдържание, мини портфолио или сменящи се изображения над основната секция с публикации.

Хвърлете един поглед на моя сайт Just Great Film, например:

JavaScript ротаторът е видим само на началната страница

Секцията с "Акценти" не се показва на вътрешните страници

Техниката за добавяне на секцията "Акценти" е добре позната, защото всъщност е обикновено добавяне на зона за притурки в блога, а ето и един лесен начин да ограничите показването й само на началната страница на своя блог.

Внимание: Направете резервно копие на шаблона си!

Преди да пристъпите към каквито и да било промени по HTML кода на вашия шаблон, е препоръчително да си създадете резервно негово копие, просто за всеки случай. Това можете да направите от менюто Дизайн -> Редактиране на HTML кода, където трябва да използвате връзката за "Изтегляне на целия шаблон" в най-горната част на страницата. Чрез нея ще можете да запазите шаблона си като .XML документ на своя компютър и по-късно, в случай на нужда, отново да го използвате, за да възстановите сайта си към същото състояние.

За "Условните" оператори

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

<b:if cond=""data:blog.url==data:blog.homepageUrl"">

<-- Съдържанието, което ще се показва на основната страница, се добавя тук -->

</b:if>

Всичко, което се включи между тези оператори, ще бъде показано само на началната страница. Това може да бъде какво да е HTML съдържание, включително шаблонни оператори на Блогър. И ако сте по-напреднали в редактирането на код, бихте могли да използвате примера и за други свои нужди. За останалите, ще покажа как да включат тази възможност в своя шаблон.

Най-лесният начин да добавим зона с акцентирано съдържание в началната страница на блога

Ако ползвате новия шаблонен редактор на Блогър (новият формат за шаблони в Блогър), можете да добавите зона за акценти само с няколко прости действия. Идете в Дизайн -> Редактиране на HTML кода и намерете в кода следната част:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='Text2' locked='false' title='Some Title' type='Text'/>
</b:section>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>
</div>

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

Добавете следните редове (оцветени в оранжево) вътре в тази част:

<div class='region-inner tabs-inner'>
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='Text2' locked='false' title='Some Title' type='Text'/>
</b:section>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:section class='tabs' id='crosscol-homepage' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='Add title if you want to' type='HTML'/>
</b:section>
</b:if>

</div>

Сега вижте от "Визуализация" своя блог: ако всичко е направено както трябва, би трябвало да видите новата притурка точно над публикациите си - вече можете да запазите направените промени.

С това, вие добавихте нова HTML притуркa (тя ще се появи под менюто за страници в блога ви, ако имате такова), в която желаното от вас съдържание ще се показва единствено на началната страница на вашия блог и няма да се показва при зареждане на вътрешна страница. Какво съдържание конкретно ще поставите в нея -  JavaScript, картинка или друг код - зависи от вас, а редактирането й можете лесно да извършвате от меню Дизайн -> Елементи в страницата."

Надявам се това кратко ръководство от Аманда Кенеди за добавяне на притурка с "Акценти" на основната страница да ви бъде полезно и в тази връзка ще се радвам да чуя вашите мнения, отзиви или въпроси.

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

Вижте още трикове от "Направи си сайт!".

Социални приставки за всеки сайт - сайтът като социална мрежа

С нарастване значението на социалните мрежи, възможностите на сайтовете да бъдат по-интерактивни и по-социални стават все по-значими за тяхното бъдеще. От Google не отминават този факт и благодарение на Google Friend Connect вече всеки сайт, независимо дали статичен или динамичен, базиран на една или друга платформа за управление на съдържание, може да интегрира такива интерактивни социални функции, с които да укрепи общността, посещаваща сайта, като позволи на посетителите си да общуват по между си под различни форми (чат, коментари, оценки) и така да се превърне в още по-желано за посещение място.

Всичко това е достъпно и за начинаещия в сайтостроенето, тъй като не се изискват знания по програмиране. Всичко се генерира и персонализирате изцяло в сайта на Google Friend Connect, а когато сте готови, ви остава да копирате няколко фрагмента код и да ги добавите в сайта си. Вече сте нетърпеливи да разберете какво можете с Google Friend Connect, нали!

Социални приставки (притурки) за сайтове от Google Friend Connect

• Приставка за Членове

Притурката за членове позволява на посетителите ви да се присъединят към сайта, да влизат и да канят приятелите си, да разглеждат профилите на другите членове, да си намират нови приятели. За ползващите blogger приставката е достъпна и като джаджа, която може да се добави през Оформление -> Добави джаджа и да се постави на желаното място в сайта.

• Лента за социални контакти

Ако ползвате Facebook, много лесно ще разберете за каква лента става въпрос. Иначе, това е инструмент, който осигурява на посетителите ви лесен достъп до социалните функции на Google Friend Connect. Лентата позволява на посетителите ви да влязат, да комуникират с другите членове директно, да оставят коментари или просто да видят скорошната активност в сайта. В настройките на социалната лента можете да укажете тя да се показва горе или долу на страниците ви или да я персонализирате като цвят и функции.

• Приставка за Коментари

Много полезна притурка, най-вече за статичните сайтове, които по принцип си нямат функция за коментари, но и за динамични сайтове, базирани на платформи като Wordpress, Drupal или phpBB. С нея ще вдъхнете допълнителен живот в сайта си, като позволите на посетителите ви не само лесно да правят коментари към страниците ви, но и да публикуват връзки към видеоклипове. Ще отбележа, че посетителите могат да използват чрез притурката и функция за превод и да четат коментарите на предпочитания от тях език.

• Приставка за Оценки и отзиви

Уловете пълноценно реакциите на посетителите ви към съдържанието на вашите страници като им позволите да оценяват: видеоклипове, статии, книги, снимки, песни... т.е. всичко, което имате в сайта. Можете дори да поставите притурката повече от веднъж в една страница, за да позволите на потребителите си да дават отзиви и да оценяват точно определени, отделни елементи в нея.

• Приставка за Препоръчване на страници от сайта

Притурката позволява на членовете, попаднали на дадена страница в сайта ви, да я препоръчват, ако я харесват. Притурката се състои от две части - едната се поставя в страниците и е бутонът, с който те препоръчват написаното (вижте го най-долу и в тази публикация), а другата е във вид на класация на най-популярните (на база най-препоръчваните) ви материали, която можете да поставите на видно място в сайта си, напр. в страничната лента.

Как функционират социалните приставки на Google Friend Connect

Google Friend Connect предоставя прост начин за проверка самоличността на потребителя: с едно щракване на мишката той може да се идентифицира с вече съществуващ профил в Google, Yahoo, AIM или да използва "отворен профил" (OpenID). Това означава, че не е необходимо потребителят да си създава нов профил за всеки сайт, в който иска да влезе.


Изброеното дотук не изчерпва възможностите на Google Friend Connect, но останалото можете да откриете и сами, тъй като страницата на програмата е изцяло достъпна и на български. А аз съм сигурен, че социалните функции на Google Friend Connect тепърва ще се разширяват, за да обединят сайтовете-участници и всички свои членове в истинска (и вероятно най-добрата) социална мрежа.

Забележка: ако поставените от вас притурки на Google Friend Connect не показват нищо, а остават празни, то вижте вероятния отговор и решение тук.

Ако информацията ви е била полезна, моля препоръчайте тази статия и/или вижте как можете да подкрепите сайта!

Направи си сайт - въпроси и трикове