1

Uma listagem de 5 artigos, com links e títulos diferentes, cada um deles com um link Compartilhar que abre um modal, onde possui quatro botões para serem compartilhados nas mídias sociais. Para ser compartilhado é necessário ter o link do post. Penso que seria desastroso, colocar o modal em um loop php, criando assim um modal especifico para cada artigo listado. O que eu quero é manter apenas um modal, e passar o valor do link/titulo do post para ele, com javascript através do botão Compartilhar

PS: Isso é para um projeto em wordpress, então cada artigo listado possui, ID próprias. id="post-150", id="post-50", id="post-650"

Exemplo

jQuery(function($) {
    $('.popup-modal').magnificPopup({
        type: 'inline',
        preloader: false,
        focus: '#username',
        modal: true
    });
    $(document).on('click', '.popup-modal-dismiss', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });

    
});
.post-article {
    border-bottom: 1px solid #eee;
    padding: 10px;
    margin-bottom: 10px;
}
.post-article:nth-child(odd) {
    background: #eee;
}

.post-article:nth-child(even) {
    background: #fafafa;
}
.popup-modal-dismiss {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

        <link rel="stylesheet" type="text/css" href="http://dimsemenov.com/plugins/magnific-popup/site-assets/all.min.css?v=1.1.0">
<script src="http://dimsemenov.com/plugins/magnific-popup/dist/jquery.magnific-popup.min.js?v=1.1.0"></script>

<div class="main-articles">

<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-01">Post 01 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-02">Post 02 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-03">Post 03 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-04">Post 04 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>


<article class="post-article">
    <h1 class="post-title"><a href="http://example.com/minha-news-05">Post 05 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a></h1>
    <a class="popup-modal" href="#test-modal"><i class="fa fa-share"></i> Compartilhar</a>
</article>
</div>

<div id="test-modal" class="white-popup-block mfp-hide">
    <p>Compartilhar Post</p>

    <div><b>Título do post: </b></div>

    <!-- Facebook -->
    <a href="http://www.facebook.com/sharer.php?u=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
    </a>
    
    <!-- Google+ -->
    <a href="https://plus.google.com/share?url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/google.png" alt="Google" />
    </a>
    
    <!-- LinkedIn -->
    <a href="http://www.linkedin.com/shareArticle?mini=true&amp;url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/linkedin.png" alt="LinkedIn" />
    </a>

    <!-- Twitter -->
    <a href="https://twitter.com/share?url=http://URL-DO-POST" target="_blank">
        <img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
    </a>

    <p><a class="popup-modal-dismiss" href="#">Close</a></p>
</div>

1 Resposta 1

1

Este código faz o que deseja, coloca o título na modal e atribui os devidos links a cada ícone de rede social:

$('.popup-modal').on('click', function(){

   var comp = $(this).closest("article").find("h1 a"),
       url_ = comp.attr("href"),
       tit_ = comp.text();

   $("#test-modal div b").text('Título do post: '+tit_);

   var fb_link = "http://www.facebook.com/sharer.php?u="+url_, // facebook
       gp_link = "https://plus.google.com/share?url="+url_, // google+
       li_link = "http://www.linkedin.com/shareArticle?mini=true&amp;url="+url_, // linkedin
       tw_link = "https://twitter.com/share?url="+url_+"&text="+tit_; // twitter

   $("#test-modal a").each(function(){

      var href = $(this).attr("href");

      if(~href.indexOf("facebook")) $(this).attr("href", fb_link);
      if(~href.indexOf("google")) $(this).attr("href", gp_link);
      if(~href.indexOf("linkedin")) $(this).attr("href", li_link);
      if(~href.indexOf("twitter")) $(this).attr("href", tw_link);

   });

});

Não consegui reproduzir no snippet aqui, portanto segue exemplo no JSFiddle.

5
  • é exatamente isso. Só mais uma coisa, no twitter, linkedin e outros que pretendo colocar, geralmente passam o título do post na URL: assim http://twitter.com/intent/tweet?url=http://link-post-twitter.com&text=Titulo do Post As vezes é com name=, title=, text= etc. Commented 21/03/2018 às 17:56
  • 1
    blz... vou alterar para ficar melhor
    – Sam
    Commented 21/03/2018 às 19:02
  • 1
    Pronto, acho que assim fica melhor.
    – Sam
    Commented 21/03/2018 às 20:10
  • Solução perfeita.! Commented 21/03/2018 às 20:23
  • pt.stackoverflow.com/q/285804/95735 Commented 22/03/2018 às 16:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .