How to add an image to the Q2A Social Sharing - Amiya Sahu?

Question

I am talking about this plugin:

https://github.com/amiyasahu/q2a-social-share/

The image should arise before the link like the usual facebook posts. Should I hack the plugin?

Where? Is this the correct place?

        function output_widget($region, $place, $themeobject, $template, $request, $qa_content)
        {
            $page_url      = urlencode(qa_opt('site_url').$request);
            if ( ( $template=='question' || $template=='blog' ) && isset($qa_content["q_view"])) {
                $page_title    = urlencode($qa_content["q_view"]["raw"]["title"]);
            }else {
                $page_title    = urlencode(qa_opt('site_title'));
            }
            $social_button = ami_generate_social_buttons(array(
                    '{{page_url}}' => $page_url ,
                    '{{page_title}}' => $page_title ,
                ) , $template );
            $themeobject->output($social_button) ;
        }

Is there a place where I should load an Image that could be located in the left side of the question?

 

 

Answer 1

That has nothing to do with the plugin but rather with the metadata in the link you're adding to your FB comment.

Take a look at this link: https://developers.facebook.com/docs/sharing/webmasters#images

Then you'll see that what you need to do is to add a meta HTML tag in your site. You can do so by modifying your theme like this:

function head_metas() {
    parent::head_metas();
    $this->output('<meta property="og:image" content="http://yoursite.com/logo.png" />');
}

Or, if you happen to really use your logo URL for this you can also replace the URL with the options value  qa_opt('logo_url')

Comments

+1, thank you very much for your answer. I am replacing this funcion here https://github.com/q2a/question2answer/blob/master/qa-theme/SnowFlat/qa-theme.php#L52

by the one you suggested like this

public function head_metas() {
    parent::head_metas();
    $this->output('<meta property="og:image" content="http://mysite.com/logo.png" />');
}

Is it what you were expecting for?

Your solution works like a charm.

However, I am worried if I removed something that I shouldnt have removed. Should I do something different?

---

Good question. If you already have the function then you need to merge them. Just add the "output" line from my answer below the output line of your current theme so that both outputs and the parent call are present in the resulting function

---

YOu guys might know:
I wanna change the color of whats app for color blind people, how can I do that? I searched everywhere but I could not how the whatsapp icon has been generated!

Answer 2

Now the plugin supports opengraph .

It autometically detects the post image and puts in metadata .

Also you can configrure it in the admin panel to choose an image when the post image is not found .

For the user profile page it uses the user's avatar .

Enjoy ...

Comments

----------
Who generates _buttons.scss? I need to add the new icon to this guy too. how?
---------

---

even if i edit _buttons.css what am i suppos to chose for Telegram, as for WatsApp it is btn-wa. WHat is for telegram so it understands it?

---

Okay I spent so many hours realized two things
1- I need to update  _icon.scss too
2- the class names have to be ONLY two characters only!!!

---

No it is not mandatory to have two letters only . But the get name returns two letters . The class name and icon name can be defined in the mentioned classes -

        function getClass()
        {
            return 'fb';
        }
        function getIcon()
        {
            return 'social-icon-facebook';
        }