Social sharing is not working as expected

Question

I tested posting a blog post to Facebook it shows a too large pic of the header title design you made for the home page not blog image. It doesn't show the feature photo from that blog post. Also, when I share a blog post link via text, it doesn't show a thumbnail photo of that blog post's feature photo, just words. When I post to Twitter, it only shows the URL, no photo. In Instagram it open account but no sharing functionality. Here is my code.

       <a href="http://www.facebook.com/sharer.php?u=<?php echo 
urlencode(get_permalink()); ?>" target="_blank" class="link" title="<?php 
                esc_attr_e('Share on Facebook', 'cheerup'); ?>"><i class="fa fa-facebook"></i></a>

            <a href="http://twitter.com/home?status=<?php echo urlencode(get_permalink()); ?>" target="_blank" class="link" title="<?php 
                esc_attr_e('Share on Twitter', 'cheerup'); ?>"><i class="fa fa-twitter"></i></a>

            <a href="https://www.instagram.com/share?url=<?php echo urlencode(get_permalink()); ?>" target="_blank" class="link" title="<?php 
                esc_attr_e('Share on Instagram', 'cheerup'); ?>"><i class="fa fa-instagram"></i></a>

            <a href="http://pinterest.com/pin/create/button/?url=<?php 
                echo urlencode(get_permalink()); ?>&amp;media=<?php echo urlencode($media); ?>&amp;description=<?php echo urlencode($title); 
                ?>" target="_blank" class="link" title="<?php esc_attr_e('Share on Pinterest', 'cheerup'); ?>"><i class="fa fa-pinterest-p"></i></a>

Answer 1

Your pages need to have the Open Graph meta tags required for social networks to parse the needed information & display it correctly. If you're looking for a simple, straightforward solution to this, you should check out Complete Open Graph, a plugin I wrote to handle it. Much less bloat than something like Yoast, because instead of trying to do all the things, it focuses on doing one thing well -- Open Graph management. Activate it, and it'll work right out of the box.

https://wordpress.org/plugins/complete-open-graph/

Answer 2

Most of the social media platforms use there own "social media tags" to structure the content of a website. The platforms use the information from these tags to display a webseite with more information for instance Facebook shows your link with the thumbnail.

I suspect that your website haven`t these "social media tags".

The easiest way to add these "social media tags" to your page would be to use a plugin like yoast.

If you are a little bit more interested in this topic, then the following links may be helpful:

• Facebook use the Open Graph protocol
• Twitter use the card markup