Welcome to the Question2Answer Q&A. There's also a demo if you just want to try it out.

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

+3 votes
647 views
asked Jun 2, 2015 in Plugins by gunrose
edited Jul 1, 2015 by gunrose

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?

 

 

2 Answers

+3 votes
answered Jun 3, 2015 by pupi1985
selected Jun 5, 2015 by gunrose
 
Best answer

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')

commented Jun 5, 2015 by gunrose
+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?
commented Jun 5, 2015 by pupi1985
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
commented Dec 26, 2015 by Waterfr Villa
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!
+1 vote
answered Oct 15, 2015 by Ami
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 ...
commented Dec 29, 2015 by Waterfr Villa
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!!!
commented Dec 29, 2015 by Ami
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';
        }
...