BG Development


  Reply to this topicStart new topicStart Poll

> Бутон Facebook споделяне
yankoa
Публикувано на: 17-11-2017, 12:13
Quote Post



Име: Янко
Група: Потребител
Ранг: Новопостъпил

Мнения: 3
Регистриран на: 25.12.13



Здравейте,

Имам следният казус - правим сайт, в който има секция с новини и съответно бутон за Фейсбук споделяне, който сме сложили. Проблемът е че при споделяне не се взима заглавието и снимката от новината, въпреки че така съм го задал. Сайтът е на Angular, като съответно скрипта за ФБ е следният:

CODE
define(['app'],function(app) {
   app.directive("fbShare", function(){
       var appId = "544646952402024";
       var host = document.location.origin;
       return {
           restrict: 'A',
           template : "<a target='_blank' href='{{fbShareLink}}'><i class='fa fa-facebook-official'></i>{{'Споделяне' | translate}}</a>",
           link: function($scope, $element, $attrs){
               $scope.shareUrl = host + "/" +  $attrs.url;
               var description = $attrs.description;
               var title = $attrs.title;
               if(title.length > 70){
                   title = title.substring(0,70);
               }
               var pic = $attrs.pic;
               var fbShareLink = "https://www.facebook.com/sharer/sharer.php?app_id=" +
                   appId + "&sdk=joey&u=" + $scope.shareUrl + "&description=" + description
                   +"&title=" + title +
                   "&display=popup&ref=plugin&src=share_button&picture=" +
                   host +
                   pic;
               $scope.fbShareLink = fbShareLink;
           }
       }
   });
});


И съответно HTML за новината е този:

CODE
<div class="main-content">
   <section class="review-news-section main-section">
       <div class="review-news">
             <header>
                   <div class="review-news-text">
                         <h5>{{ singleNews.title }}</h5>
                         <p>
                       {{singleNews.date|cmdate:'dd.MM.yyyy'}} източник
                       <a href="{{singleNews.source[0].link}}" target="_blank" ng-if="singleNews.source[0].link">
                           {{singleNews.source[0].name}}
                       </a>
                   </p>
                   </div>
                   <div class="review-news-img">
                         <img ng-src="{{ singleNews.images[0].link }}">
                   </div>
             </header>
             <section>
                   <p ng-repeat="news in singleNews.text" ng-bind-html="displayParagraph(news.content)">
               </p>
             </section>
           <div class="share-fb-container clearfix">
               <div class="clearfix">
                   <div ng-if="singleNews" class="mail-button"
                       data-mail-share data-subject="{{singleNews.title}}"
                       data-body="{{singleNews.text[0].content}}">
                   </div>
                   <div ng-if="singleNews.title" data-fb-share class="fb-button"
                       data-title="{{singleNews.title}}"
                       data-description="{{singleNews.text[0].content}}"
                       data-pic="/{{singleNews.images[0].link}}"
                       data-url="reviewNews?title={{singleNews.title}}">
                   </div>
               </div>
           </div>
       </div>
   </section>
   <aside class="site-aside">
         <div data-popular-news class="site-aside-tabs"></div>
         <div data-info-container class="site-aside-info"></div>
   </aside>
</div>


Описал съм да взима заглавието, част от текст и снимката, както се вижда:

CODE
<div ng-if="singleNews.title" data-fb-share class="fb-button"
                       data-title="{{singleNews.title}}"
                       data-description="{{singleNews.text[0].content}}"
                       data-pic="/{{singleNews.images[0].link}}"
                       data-url="reviewNews?title={{singleNews.title}}">
                   </div>


Във Facebook Developers чета, че в хеда се слага

CODE
  <meta property="og:url" content="URL">
  <meta property="og:title" content="TEXT">
  <meta property="og:description" content="TEXT">
  <meta property="og:image" content="https://v4-alpha.getbootstrap.com/assets/brand/bootstrap-social.png">


Но проблемът е че тъй като сайта го правим на Angular, хедъра и футъра са общи за всички страници.

Предварително благодаря на отзовалите се.
PMEmail Poster
Top
PureEvil
Публикувано на: 17-11-2017, 16:39
Quote Post



Име: Атанас Митрев
Група: Потребител
Ранг: Почетен член

Мнения: 5154
Регистриран на: 21.02.04



Преправи си сайта и няма да имаш проблеми.


--------------------
<?php die("WTF"); ?>
PMUsers WebsiteICQ
Top
rvc
Публикувано на: 17-11-2017, 17:49
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2476
Регистриран на: 13.05.11



мета таговете играят важна роля за фейсбук споделянето и информацията за името и картинката се взимат от там...
PMEmail PosterUsers Website
Top
samominavam
Публикувано на: 17-11-2017, 18:07
Quote Post



Име:
Група: Потребител
Ранг: Посетител

Мнения: 51
Регистриран на: 22.08.17



Сега разбирам, че с ангулар се правели статични сайтове.
PMEmail Poster
Top
yankoa
Публикувано на: 20-11-2017, 13:56
Quote Post



Име: Янко
Група: Потребител
Ранг: Новопостъпил

Мнения: 3
Регистриран на: 25.12.13



QUOTE (samominavam @ 17-11-2017, 18:07)
Сега разбирам, че с ангулар се правели статични сайтове.

Благодаря за отговорите.

@samominavam сайтът е динамичен, ще има новини, календар, и т.н. Това е и основният проблем - новините се добавят от администрация, и тъй като се ползва общ хедър няма как да добавя метаданните за Фейсбук.

Това ми е първият Angular уебсайт и 100% греша някъде, просто не съм сигурен къде. А и вероятно избора на Angular не е най-подходящ според вас icon_smile.gif
PMEmail Poster
Top
PureEvil
Публикувано на: 20-11-2017, 14:16
Quote Post



Име: Атанас Митрев
Група: Потребител
Ранг: Почетен член

Мнения: 5154
Регистриран на: 21.02.04



Общият хедър не означава, че не може да имаш динамични данни.


--------------------
<?php die("WTF"); ?>
PMUsers WebsiteICQ
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2015 | BG Development | All Rights Reserved
RSS 2.0