Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: user555 on August 16, 2015, 10:43:33 AM

Title: How to add picture ? Please check the image
Post by: user555 on August 16, 2015, 10:43:33 AM
Actually i was trying to share my new website on Facebook!
While sharing my web,it isn't showing any picture beside & if i try to share any other web it will show up a picture along with the website name.
Sorry, i m new and can't clarify my problem, as i don't have any idea what that thing called ,! Kindly please check out the pic. i attached,i hope u get it what am i trying to say...

Thanks
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 16, 2015, 08:08:18 PM
Well, to have an image in a web share on Facebook, you need to either have an og:image defined or you need to have an image on the page...
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 17, 2015, 01:09:08 AM
Thank you for you kind reply :)
how can i add that image and the code for it ?
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 17, 2015, 02:40:01 AM
Well, you would have ANY image on the page at all....   Or look up the instructions on how to assign og:image values... Or install one of the social media mods
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 17, 2015, 02:40:00 PM
Okay, got it, but i can't find the header.php in theme .
I need to put the code there i think
Title: Re: How to add picture ? Please check the image
Post by: JBlaze on August 17, 2015, 02:41:56 PM
Look in your theme's index.template.php, which is located in /Themes/{theme}/index.template.php

There you will find the <head> tags where you need to put your <og> tags.
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 17, 2015, 03:11:47 PM
not working, can't do it :(
everytime it's showing up an error, not possible for me, i dont know anything
anyway thanks once again
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 17, 2015, 03:35:04 PM
what exactly you trying to add please show full code
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 12:06:50 AM
I am trying to add thumbnail image, so that when I share a link in Facebook it will show up an image along with description of the website.

Added this code in  /Themes/Gearbox/index.template.php :

<meta property="og:title" content="<?php echo osc_item_title() ; ?>" />
    <meta property="og:description" content="<?php echo osc_highlight(strip_tags(osc_item_description()), 140) ; ?>" />
    <?php if( osc_count_item_resources() > ) { ?>
        <meta property="og:image" content="<?php echo osc_resource_thumbnail_url(); ?>" />
    <?php } else { ?>
        <meta property="og:image" content="<?php echo osc_current_web_theme_url('images/no_photo.gif') ; ?>" />
    <?php ?>


images/no_photo.gif'  -- this part i changed to images/og.png (added a og.png image in images folder)

But everytime it showing up an error, something wrong in line number 77 , php error
I am really bad in coding, don't have any idea, just trying to make a gaming website for our clan.
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 18, 2015, 07:38:23 AM
you can't add that code in the middle of a template...

first and foremost, SMF files are **ALL** php.
That means that the php open is defined at the start of the file and closed at the end of the file.
-- so your <?php ... ?> is just plain wrong....  that is the sort of coding that wordpress and joomla use... not SMF.

second, because of the first comment, your code has to be re-written to be a single echo statement, not html mixed with echos
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 09:59:08 AM
can you attach the correct code ??
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 18, 2015, 11:59:19 AM
hmmm.....   I'm not sure that code can be directly translated to the correct format....

can we include function calls in the middle of an echo statement?


What are these functions?   They are not part of SMF...

osc_item_title()
osc_highlight()
osc_item_description()
osc_resource_thumbnail_url()
osc_current_web_theme_url()

without those functions being defined, even the corrected code won't do anything.

I think that code is actually complete BS and pointless -- it looks like you grabbed a code snippet form some other system...


What, EXACTLY, are you trying to do?
What do you want on each page for the og:title, og:description, and og:image?


Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 01:00:06 PM
When i share my link of my website(howitworks.comze.com) on facebook, i want it to show a thumbnail image and description!

Suppose i write http://www.simplemachines.org on facebook , its showing Simple machine forum logo and description (Simple machine forum - Free & open source community software .......)
I want the same for my website, it should show logo as well as description .
howitworks.comze.com : its showing only the name of the website,community name but no thumbnail picture and description.
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 18, 2015, 01:06:13 PM
we know this what I am sure Kindred is asking is what are you trying to do with that code, where did you get it? etc
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 02:07:25 PM
i found d code somewhere within this forum, searched in google and in a thread(years before), someone had d same query and he/she posted that code..
I'm not sure what that code does, all i did is copied the code & pasted it in /Themes/{theme}/index.template.php , and then it encountered an error, and later on i deleted that code as it didnt worked.
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 18, 2015, 02:09:13 PM
Quote from: Kindred on August 17, 2015, 02:40:01 AM
Or install one of the social media mods

really simple answer right their!
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 18, 2015, 02:31:07 PM
I have no idea where you found that code... but, as it is, it will not work with SMF at all ---   as I said above, that code is not designed for use in an SMF template and requires functions which are not part of SMF...

So,
you just want a single, generic image for any page shared from your site?
You want the description and title of the page to match the description and title of the page shared?
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 02:59:34 PM
Quote from: Poύνικ on August 18, 2015, 02:09:13 PM
Quote from: Kindred on August 17, 2015, 02:40:01 AM
Or install one of the social media mods

really simple answer right their!

The mod isn't working with d version of smf i m using. Test unsuccessful.



This is the thread from where i got the code..

&&&&&& SORRY SORRY !!!!!!!!!! I thought its from smf web, lol the theme, i was wrong, luks d same, d code is from other website ! SORRY

(http://forums.osclass.org/3-2-x/help-needed-no-thumbnail-image-when-i-share-a-link-in-facebook/%5B/url)
Quoteyou just want a single, generic image for any page shared from your site?
Yes. i will add an image in the image folder(maybe a logo) and that logo should show(as thumbnail) when posting my website link on facebook.

QuoteYou want the description and title of the page to match the description and title of the page shared?
Yes, exactly !!!!!!!!!

Just like when sharing smf web ! i want something like dat :)
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 18, 2015, 03:06:50 PM
Quote from: user555 on August 18, 2015, 02:07:25 PM
i found d code somewhere within this forum.

Quote from: user555 on August 18, 2015, 02:59:34 PM
http://forums.osclass.org/3-2-x/help-needed-no-thumbnail-image-when-i-share-a-link-in-facebook/ (http://forums.osclass.org/3-2-x/help-needed-no-thumbnail-image-when-i-share-a-link-in-facebook/)
This is the thread from where i got the code..

please note how osclass does not say simplemachines

What version of SMF are you using?
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 03:11:40 PM
Yes Yes SORRY ! the theme luks alike, so i mistook it as smf !!!!!! SORRY

i m using version 2.0.10
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 18, 2015, 03:18:19 PM
sorry for being sharp.  What mod did you try?
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 03:43:07 PM
this one :

http://custom.simplemachines.org/mods/index.php?mod=3153
Title: Re: How to add picture ? Please check the image
Post by: Deaks on August 18, 2015, 03:49:47 PM
http://www.simplemachines.org/community/index.php?topic=456027.160

Did you ask the author for help with the error?
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 18, 2015, 03:50:54 PM
And, after you installed that mod - did you CONFIGURE IT?

http://custom.simplemachines.org/mods/index.php?action=download;mod=3153;id=189495;image
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 18, 2015, 03:55:24 PM
hey, i will reply tomorrow, bed time for me, Gn :)
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 19, 2015, 04:17:29 AM
This version is not supported, so didn't contact the author
Title: Re: How to add picture ? Please check the image
Post by: Kindred on August 19, 2015, 06:18:37 AM
http://wiki.simplemachines.org/smf/How_can_I_install_a_mod_that_doesn%27t_work_in_my_SMF_version
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 19, 2015, 07:48:34 AM
tried it & now it shows not compatible with the theme
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 19, 2015, 08:50:19 AM
I found this in google :

QuoteFacebook meta tags

The thumbnail image for your auto-posted campaign looks like this.

<meta property="og:image" content="url to image" />

If you choose not to set an icon manually, Facebook will choose an image to use as the default thumbnail for you.

The title for the post looks like this.

<meta property="og:title" content="title of the page" />

If you choose not to add this property, Facebook will populate the page title with your MailChimp campaign's subject line.

A short description of your campaign content looks like this.

<meta property="og:description" content="add a short description of the page or content"/>

If you choose not to add this property, Facebook will select a section of your campaign content for you automatically.

Where can i put those 3 lines  in index.templete.php ?
Title: Re: How to add picture ? Please check the image
Post by: samk2824 on August 19, 2015, 10:38:39 AM
So, I think it was just a misunderstanding between the use of two versions, one is updated now. It's been so long to to solve this blunder mistakes.  :o
Title: Re: How to add picture ? Please check the image
Post by: Steve on August 19, 2015, 11:06:11 AM
Quote from: user555 on August 19, 2015, 07:48:34 AM
tried it & now it shows not compatible with the theme

http://wiki.simplemachines.org/smf/Error_in_mod_installation
Title: Re: How to add picture ? Please check the image
Post by: Gluz on August 19, 2015, 05:16:19 PM
The easiest way is by modifying the index.template.php from your theme, adding the meta tags properly in the right section.

First, you need to upload the image you want to show to your FTP to be accessible via web, something like my.domain.com/image.png

Then, add them with echo and some SMF variables you can have pretty much all the info needed, for Facebook.

In index.template.php find:

// Output any remaining HTML headers. (from mods, maybe?)


and add before:

echo '
<meta property="og:image" content="my.domain.com/image.png" />
<meta property="og:title" content="', $context['page_title_html_safe'], '" />
<meta property="og:description" content="', $context['page_title_html_safe'], '"/>';


(remember to change the image URL)

This should work, but the description is just the same as the title. If you want something different, then you really need to search for a mod that does this kind of thing.
Title: Re: How to add picture ? Please check the image
Post by: user555 on August 20, 2015, 08:56:42 AM
Quote from: Gluz on August 19, 2015, 05:16:19 PM
The easiest way is by modifying the index.template.php from your theme, adding the meta tags properly in the right section.

First, you need to upload the image you want to show to your FTP to be accessible via web, something like my.domain.com/image.png

Then, add them with echo and some SMF variables you can have pretty much all the info needed, for Facebook.

In index.template.php find:

// Output any remaining HTML headers. (from mods, maybe?)


and add before:

echo '
<meta property="og:image" content="my.domain.com/image.png" />
<meta property="og:title" content="', $context['page_title_html_safe'], '" />
<meta property="og:description" content="', $context['page_title_html_safe'], '"/>';


(remember to change the image URL)

This should work, but the description is just the same as the title. If you want something different, then you really need to search for a mod that does this kind of thing.

Finally, thanks a lot @Gluz !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! The code worked :D
Thanks to everyone for helping me out! Good wishes for all ;)