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

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!

---

Here you can change the color and you need to recompile the scss file - https://github.com/amiyasahu/q2a-social-share/blob/master/css/_buttons.scss#L195

For compiling scss you can use - http://koala-app.com/

---

Thank a lot, it helped a lot
last question: how can i add a new icon? the rest i know but dont know how to add new icon (e.g. if i wanted to add social share for Telegram APP

---

Hello? can you unblock me please?

---

1. First create a Class for your share button like this below one -
https://github.com/amiyasahu/q2a-social-share/blob/master/inc/Ami_GooglePlusButton.php
2.  The getName method should return unique name for your button class
3. Register your button class here in factory .
https://github.com/amiyasahu/q2a-social-share/blob/master/inc/Ami_SocialButtonFactory.php#L36
4. Add it to be loaded from the generator class -
Here add below line of code -

https://github.com/amiyasahu/q2a-social-share/blob/master/inc/Ami_SocialShare.php#L46

$enabled_share['<your_share_name>'] = 1 ;

<your_share_name> should be replaced with the value which is returned by your getName() of your Button class created .

This should work for you . Let me know if you face any issues .

---

Thank you Ami but I need to know how to create the new icon ( the graphics file). I do not see any *.png file associated with WhatsApp to copy the same thing for, for example Telegram App. What graphics file I need to edit? the svg file was empty too

---

I mean this file seem to be empty! social-icon.svg what graphics file I should edit to add new icon? the rest which is what to do with php is clear to me, but I am having issues with the icon itself when i need to add new icon (graphics file) for a new application

---

Go to - https://icomoon.io/app/
Click the Import Icons button at the "Left Top"
Then select the https://github.com/amiyasahu/q2a-social-share/blob/master/fonts/selection.json file from your local machine
Click Yes
Now you would see all the imported icons
Now you can add / remove / edit the icon sets (play around it)
Once you are done click the Generate Font button at the bottom . You can download the font files , replace them all in the fonts folder

You are good to go now . I think for Telegram you would already have icon in the icon sets . Just double check it before adding a new one .

Let me know if you face any issues .

---

----------
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';
        }