Sharing website articles on social networks
Question
Hello i have a blog which get data via ajax request using jquery. This data contains posts with title and content. The content is added via summernote and we have image and text together. When i want to create html page for each post i do this with jquery
<script> $(document).ready(function () { var getUrlParameter = function getUrlParameter(sParam) { var sPageURL = decodeURIComponent(window.location.search.substring(1)), sURLVariables = sPageURL.split('&'), sParameterName, i; for (i = 0; i < sURLVariables.length; i++) { sParameterName = sURLVariables[i].split('='); if (sParameterName[0] === sParam) { return sParameterName[1] === undefined ? true : sParameterName[1]; } } }; var id = getUrlParameter('id'); $.ajax({ type: 'GET', url: 'http:///api/posts/' + id, dataType: "json", async: false, data: {}, success: function (data) { var posts = data.data; $.each(posts, function (i) { var $title = ''; var $content = ''; $.each(posts[i], function (key, val) { if (key == 'title') { $title = val; } if (key == 'content') { $content = val; } }); var start = $content.indexOf('<img'); var end = $content.indexOf('">') - 1; var addstyle = $content.indexOf('.jpg') + 2; var myimage = $content.substr(start, addstyle) + ' ' + 'style="width: 970px;"' + '>'; var $target = $("#target"); $("#doc_title").append($title); $("#title").append($title); $("#img").append(myimage); $("<p> </p>").append($content.substr(end + 3, $content.length - (end + 3))).appendTo($target); }); } }); }); </script>
<html> <head> </head> <body> <div class="container"> <h2 id="title"></h2> <figure class="post-image" id="img"> </figure> <div class="post-content" id="target"></div> </div> </body> </html>
Also i have buttons for sharing article on social networks.
<h4>Share this article</h4>
<div class="sharethis-inline-share-buttons st-inline-share-buttons st-left st-has-labels st-animated"
id="st-1">
<div class="st-total st-hidden">
<span class="st-label"></span>
<span class="st-shares">
Shares
</span>
</div>
<div class="st-btn st-first" data-network="facebook" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m21.7 16.7h5v5h-5v11.6h-5v-11.6h-5v-5h5v-2.1c0-2 0.6-4.5 1.8-5.9 1.3-1.3 2.8-2 4.7-2h3.5v5h-3.5c-0.9 0-1.5 0.6-1.5 1.5v3.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
<div class="st-btn" data-network="twitter" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m31.5 11.7c1.3-0.8 2.2-2 2.7-3.4-1.4 0.7-2.7 1.2-4 1.4-1.1-1.2-2.6-1.9-4.4-1.9-1.7 0-3.2 0.6-4.4 1.8-1.2 1.2-1.8 2.7-1.8 4.4 0 0.5 0.1 0.9 0.2 1.3-5.1-0.1-9.4-2.3-12.7-6.4-0.6 1-0.9 2.1-0.9 3.1 0 2.2 1 3.9 2.8 5.2-1.1-0.1-2-0.4-2.8-0.8 0 1.5 0.5 2.8 1.4 4 0.9 1.1 2.1 1.8 3.5 2.1-0.5 0.1-1 0.2-1.6 0.2-0.5 0-0.9 0-1.1-0.1 0.4 1.2 1.1 2.3 2.1 3 1.1 0.8 2.3 1.2 3.6 1.3-2.2 1.7-4.7 2.6-7.6 2.6-0.7 0-1.2 0-1.5-0.1 2.8 1.9 6 2.8 9.5 2.8 3.5 0 6.7-0.9 9.4-2.7 2.8-1.8 4.8-4.1 6.1-6.7 1.3-2.6 1.9-5.3 1.9-8.1v-0.8c1.3-0.9 2.3-2 3.1-3.2-1.1 0.5-2.3 0.8-3.5 1z"></path>
</g>
</svg>
<span class="st-label">Tweet</span>
</div>
<div class="st-btn" data-network="pinterest" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m37.3 20q0 4.7-2.3 8.6t-6.3 6.2-8.6 2.3q-2.4 0-4.8-0.7 1.3-2 1.7-3.6 0.2-0.8 1.2-4.7 0.5 0.8 1.7 1.5t2.5 0.6q2.7 0 4.8-1.5t3.3-4.2 1.2-6.1q0-2.5-1.4-4.7t-3.8-3.7-5.7-1.4q-2.4 0-4.4 0.7t-3.4 1.7-2.5 2.4-1.5 2.9-0.4 3q0 2.4 0.8 4.1t2.7 2.5q0.6 0.3 0.8-0.5 0.1-0.1 0.2-0.6t0.2-0.7q0.1-0.5-0.3-1-1.1-1.3-1.1-3.3 0-3.4 2.3-5.8t6.1-2.5q3.4 0 5.3 1.9t1.9 4.7q0 3.8-1.6 6.5t-3.9 2.6q-1.3 0-2.2-0.9t-0.5-2.4q0.2-0.8 0.6-2.1t0.7-2.3 0.2-1.6q0-1.2-0.6-1.9t-1.7-0.7q-1.4 0-2.3 1.2t-1 3.2q0 1.6 0.6 2.7l-2.2 9.4q-0.4 1.5-0.3 3.9-4.6-2-7.5-6.3t-2.8-9.4q0-4.7 2.3-8.6t6.2-6.2 8.6-2.3 8.6 2.3 6.3 6.2 2.3 8.6z"></path>
</g>
</svg>
<span class="st-label">Pin</span>
</div>
<div class="st-btn st-last" data-network="linkedin" style="display: inline-block;">
<svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1em" width="1em"
viewBox="0 0 40 40">
<g>
<path d="m13.3 31.7h-5v-16.7h5v16.7z m18.4 0h-5v-8.9c0-2.4-0.9-3.5-2.5-3.5-1.3 0-2.1 0.6-2.5 1.9v10.5h-5s0-15 0-16.7h3.9l0.3 3.3h0.1c1-1.6 2.7-2.8 4.9-2.8 1.7 0 3.1 0.5 4.2 1.7 1 1.2 1.6 2.8 1.6 5.1v9.4z m-18.3-20.9c0 1.4-1.1 2.5-2.6 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5 2.6 1.2 2.6 2.5z"></path>
</g>
</svg>
<span class="st-label">Share</span>
</div>
</div>
But when i want to share my page on facebook or linkedin i have problem. The title and the image doesn't display. How i can do this?
1 answers
solution1
2 2018-06-28 21:31:34
Hello i have i blog which get data via ajax request using jquery.
This is not a good design. Not only does it make your site inaccessible to clients which do not run Javascript -- like the tools used by social networking sites to extract page information and graphics! -- but it will also increase the load time of your site, as two HTTP requests must be made to start loading any content.
The problem you are having is inherent to this design. Reconsider it.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.