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?

Looks like you need to set your Title and Favicon in the head of the HTML you are generating. That would be my guess and the first place I would start. — Adam H, Jun 28 '18 at 21:30

score 2 · Answer 1 · answered Jun 28 '18 at 21:31

2

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.

answered Jun 28 '18 at 21:31

I have no idea how to do this better. Could you help me? – Emy Jun 29 '18 at 22:54
Simply populate the HTML with your content in the original page load. Rather than using AJAX to pull down the content after the page has loaded . – TidyDev Jun 30 '18 at 13:22

Sharing website articles on social networks

1 Answers1