Facebook Like box за WP без плъгин

petya77

petya77

Well-Known Member
Семпла (и ненатрапваща се) фейсбук кутийка за WordPress само с няколко реда CSS код.

CSS код - поставя се в основния style.css файл на темата:
Код: 
@keyframes autopopup{from{opacity:0;margin-left:-330px}to{opacity:1}}#facebook{z-index:10000;max-width:100%;height:auto;position:fixed;top:13%;left:1%;margin:0;padding:5px 5px 0;background-color:#4267b2;border:3px solid #fff;box-shadow:0 0 2px black;animation:autopopup 2s}#facebook:target{transition:all 1s;opacity:0;visibility:hidden}}.facebook-container{position:relative;margin:0;padding:0}a.facebook-close{position:absolute;top:-17px;right:-17px;border:3px solid #fff;box-shadow:0 0 2px black;background-color:#4267b2;padding:5px 10px;font-family:Verdana!important;font-size:23px;font-weight:bold;text-decoration:none;line-height:1;color:#fff!important}


HTML код - поставя се най-долу в content-single.php или single.php (кутийката ще се показва само в страниците с публикациите). Ако предпочитате да се показва (досадно) из целия сайт, поставяте кода във footer.php преди </body>

Запазете си оригиналните файлове в случай, че оплескате кода. :)

Код: 
<!-- Facebook Like Box --><div id="facebook" class="facebook-container"><iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fotslabvai.net%2F&tabs&width=290&height=214&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=402400089893420" width="290" height="214" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe><a class="facebook-close" href="#facebook">X</a></div><!-- End Facebook Like Box /-->

Код за фейсбук кутийката може да генерирате от следния линк: https://developers.facebook.com/docs/plugins/page-plugin

Поставяте URL адреса на вашата фейсбук страница в празното поле. В полето под "Width" вписвате 290. Полетата под "Tabs" и "Height" оставяте празни. Генерирате кода. Избирате "IFrame" и го копирате.
Не забравяйте да замените горния <iframe>...</iframe> код с вашия. :)
o2LUp0F.png


Демо: https://jsfiddle.net/0z7sm49r/6/
Демо в сайт (копирайте линка и го поставете в полето за търсене на браузъра ви): goo.gl/KznVsa
 
Видях че кутийката не се показва на мобилни устройства . Също ако сайта е твой , рекламите не са респонсив , което прецаква респонсив темата. Иначе кутийката е приятна, въпреки че адсенс не харесват много летящи обекти над рекламите им.
 
BurnX каза:
Видях че кутийката не се показва на мобилни устройства . Също ако сайта е твой , рекламите не са респонсив , което прецаква респонсив темата. Иначе кутийката е приятна, въпреки че адсенс не харесват много летящи обекти над рекламите им.
Увеличете...

Възможно ли е да си отворил страница, която не е публикация? Защото кутийката се показва само в постовете. При мен се вижда от мобилния.
Screenshot.jpg


Единствено банерът (на Татото) в хедъра не е адаптивен, затова съм му задала параметри да се показва като 'отрязан" и да не избутва контента със страничен скрол. Рекламите на Гошко ще са временни до появата на нещо по-смислено. :)
 
Отварям публикации , браузърът е CM Browser , кутийка не се появява , хедър банера се появява изцяло и излиза извън очертанията на сайта. Има хоризонтален скрол.
 
Благодарско за информацията... :) Интересно, че при проверка от два телефона, като инсталнах и в моя СМ браузър, всичко е нормално. Никакви аномалии няма. Дано е само при теб, че ще ми се отвори още работа. Ще тествам още. На уеб туловете не разчитам. :)
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Горе