Sharing to Twitter and LinkedIn with images and descriptions - twitter

Question

I need to share images from web links with text to Twitter and LinkedIn.
I am able to add text, but I am not able to add images.
I am using Kentico CMS and I have written the web part transformation as below. But the image is not shown on the Twitter and LinkedIn plugins.
Attached here with the transformation below.
Added the Twitter and LinkedIn result without images.
Can any one guide me with sharing to Twitter and LinkedIn feeds with images?
Thanks
<a class="fb-xfbml-parse-ignore" target="_blank"
href="https://twitter.com/intent/tweet?url=<%=Server.UrlEncode(CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL)%>
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString())%>
&text=<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>"
onClick="return popup(this, 'notes')">
<img src="<%# Eval("twittericon") %>" alt="twitter icon" />
</a>
<a class="fb-xfbml-parse-ignore" target="_blank" href="https://www.linkedin.com/shareArticle?url=<%=CMS.DocumentEngine.DocumentContext.CurrentDocument.AbsoluteURL%>
&picture=<%#GetAbsoluteUrl(CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("StoryImageURL").ToString()) %> <%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("BlogDescription").ToString()%>" onClick="return popup(this, 'notes')">
<img src="<%# Eval("linkedicon") %>" alt="linked icon" />
</a>

Answer 1

First of all, I do not think Twitter and LinkedIn expose a way of sharing an image alongside the text just by adding a parameter to the share URL.
For Twitter, you could set up Cards, such as a Summary Card, and add meta tags to your website. By adding a twitter:image meta tag, you can tell Twitter which image to use.
Similar applies to LinkedIn - you would need to use Open Graph meta tags, as there is no way to provide an image as part of the share URL.
Regarding the transformation you wrote - make sure you are rendering the correct data, as using CMS.DocumentEngine.DocumentContext.CurrentDocument inside a transformation would retrieve data from the current document that is being viewed, as opposed to data of the repeated item. For rendering data of the repeated item, you can use the Eval method.
This:
<%#CMS.DocumentEngine.DocumentContext.CurrentDocument.GetValue("Title").ToString()%>
Would become this:
<%#Eval("Title")%>

Answer 2

For all my sites I use a Head HTML Code webpart on the page template of the pages I want or need to have this Open Graph (OG) data on. Here's a sample of what I put in it to dynamically populate some of the data.
<meta property="og:site_name" content="Kehren Development - Kentico MVP & Experts" />
<meta property="og:url" content="{% CurrentDocument.AbsoluteURL #%}" />
<meta property="og:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{% BlogPostTitle %}" />
<meta property="og:description" content="{% StripTags(BlogPostSummary) %}" />
<meta property="article:publisher" content="https://www.facebook.com/bkehren" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{% BlogPostTitle %}">
<meta name="twitter:site" content="#kehrendev">
<meta name="twitter:creator" content="#bkehren">
<meta name="twitter:description" content="{% StripTags(BlogPostSummary) %}">
<meta name="twitter:url" content="{% CurrentDocument.AbsoluteURL #%}">
<meta name="twitter:image" content="{%RootDocument.AbsoluteURL#%}KehrenDev/media/images/logos/twitter-logo-800.jpg">
<meta name="twitter:domain" content="{%RootDocument.AbsoluteURL#%}">
This will be rendered on the page anytime a blog post is viewed. You can set these properties on the webpart to only display for those page types. There are other meta tags you can use or different fields you can set but this will get you started.
Now you can still use the share links you have but only populate the share link with the actual article link and maybe an encoded description, the OG tags will pickup the rest.