2016-07-21 4 views
0

addThis를 사용하여 이미지와 페이스 북의 게시물을 공유하려면 어떻게해야합니까? 이 코드를 페이스 북, 트위터 및 메일로 공유했습니다.jquery에서 addThis 플러그인을 사용하여 이미지와 게시물을 공유하는 방법

이제 이미지를 게시하지 않고 콘텐츠를 게시하거나 공유 할 수 있으며 이와 같이 나타납니다 (참조 이미지) What i get.

이미지와 캡션을 게시하는 데 도움을주십시오.

나는 바이올린에 내 코드를 추가 한 또는 당신은 당신이 HTML 코드에 <Head>이 메타 태그를 추가하기 만하면이 https://jsfiddle.net/x34nnwcs/

(function() { 
 
    
 
    addthis.init(); 
 

 
    function navigatePage(e) { 
 
     var pageId = $(this).attr("id"), 
 
      $pageContent, sharingMarkup, content, 
 
      config = $.extend(true, {}, window.addthis_config), 
 
      share = $.extend(true, {}, window.addthis_share); 
 

 
     if (pageId != "pageContent") { 
 

 
      config["some_property"] = "some value"; 
 
      share.title = $(this).html(); 
 
      share.url = "http://" + pageId + ".not-a-tld"; 
 
\t \t \t \t \t \t share.photo = "http://res-5.cloudinary.com/demo/image/upload/dpr_1.0,f_auto,w_365,h_133,c_fill,g_south,o_60/group.jpg"; 
 
      $pageContent = $("#pageContent"); 
 
      sharingMarkup = $("#sharing_markup").html(); 
 
      content = $(".pageC").html(); 
 
      console.log(content); 
 
      $pageContent.html(content + sharingMarkup);    
 
      addthis.toolbox(".page_sharing_toolbox", config, share);    
 
      addthis.toolbox(".page_sharing_facebook", config, share); 
 
            
 
     } 
 
     $("#page1").click(navigatePage); 
 
    } 
 

 
    navigatePage.call(document.getElementById("pageContent")); 
 

 
}());
<div id="pageContent">  
 
    
 
     <button id="page1">Page 1</button> 
 
     <div class='pageC'> 
 
      
 
      
 
     <img src='http://res-5.cloudinary.com/demo/image/upload/dpr_1.0,f_auto,w_365,h_133,c_fill,g_south,o_60/group.jpg'/> 
 
    <p>this is a simple paragraph that is meant to be nice and easy to type which is why there will be mommas no periods or any capital letters so i guess this means that it cannot really be considered a paragraph but just a series of run on sentences this should help you get faster at typing as im trying not to use too many difficult words in it although i think that i might start making it hard by including some more difficult letters I'm typing pretty quickly so forgive me for any mistakes i think that i will not just tell you a story about the time i went to the zoo and found a monkey and a fox playing together they were so cute and i think that they were not supposed to be in the same cage but they somehow were and i loved watching them horse</p> 
 
    <p> 
 
    </div>  
 
</div> 
 

 
<script id="sharing_markup" type="text/html"> 
 
    <div class="page_sharing_facebook addthis_toolbox facebook_like"> 
 
     <a class="addthis_button_facebook_like" title="Facebook Like"></a> 
 
    </div> 
 

 
    <div class="page_sharing_toolbox addthis_toolbox addthis_default_style" style="width:290px;"> 
 
     <div class="share-icons" id="share-icons"> 
 
      <a class="addthis_button_email left" title="Email"></a>    
 
      <a class="addthis_button_facebook left" title="Facebook"></a> 
 
      <a class="addthis_button_twitter left last" title="Twitter"></a>    
 
      <a class="addthis_button_google left" title="Google"></a>    
 
     </div> 
 
    </div> 
 
</script> 
 
<script id="page1content" type="text/html"> 
 
    
 
</script> 
 

 

 

 
<!-- the async parameter has been added, query parameter style, to the hash so that things won't render until you explicitly call addthis.init() --> 
 
<script src="//s7.addthis.com/js/300/addthis_widget.js#async=1&pubid=atblog"></script> 
 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

답변

0

에서 볼 수

<meta content="your image source" property="og:image"> 
+0

실제로 메타 태그도 사용해 보았습니다. 그러나 그것은 작동하지 않습니다. 내 업데이트 된 바이올린 - https://jsfiddle.net/x34nnwcs/3/. 잘못된 것이 있으면 알려주세요. – saravanamani

+0

귀하의 코드가 사실입니다 귀하의 브라우저에서 캐싱 된 이미지를 지우려고합니다 ,,, 예 예 몇 번이나 이미지가 AddThis 팝업에 나타나지 않지만 페이스 북의 게시물을 공유 할 때 이미지가 보입니다 –