如何使用jquery中的addThis插件与图像共享帖子

时间:2016-07-21 05:44:40

标签: javascript jquery addthis

如何使用addThis在脸书中与图片分享帖子。我写了这段代码,分享在facebook,twitter和mail。

现在我可以在没有图像的情况下发布或分享内容,并且得到这样的结果(参考图片)What i get

请帮我发布图片和标题。

我已将我的代码添加到小提琴中,甚至您可以在此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";
						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>

1 个答案:

答案 0 :(得分:0)

您只需将此元标记添加到HTML代码

上的<Head>即可
<meta content="your image source" property="og:image">