Meta og tags for 2.11, help needed

Started by saurabh1938, June 17, 2016, 06:52:14 PM

Previous topic - Next topic

saurabh1938

I know i am asking this question again but having scanned through many posts didn't find any solution or Mod to get this working,  that when i share my content on facebook,  it should also fetch an image of it.  Just because of this i am not able to use social media adequately.  Coming back to the point. I found one post in which someone suggested to copy paste meta og tags from 2.1 to index.template.php,  the post was
Quoteto be clear here, index.template loads in every page so no don't put that code to index.template (if you insist on loading OG tags only on boardindex), on the other hand OG tags should be on every page, so I suggest taking a quick look here and apply the same for your forum.

https://github.com/SimpleMachines/SMF2.1/blob/release-2.1/Themes/default/index.template.php#L110-L116


Based on above comment I have added this code to my Index.template.php of the current theme of my forum
// Some Open Graph?
echo '
<meta property="og:site_name" content="', $mbname,'">
<meta property="og:title" content="', $context['page_title_html_safe'],'">
', !empty($context['canonical_url']) ? '<meta property="og:url" content="'. $context['canonical_url'].'">' : '',
!empty($settings['og_image']) ? '<meta property="og:image" content="'. $settings['og_image'].'">' : '','
<meta property="og:description" content="',!empty($context['meta_description']) ? $context['meta_description'] : $context['page_title_html_safe'],'">';




I am using 2.0.11 but still nothing has happened and when I share my content still no image is fetched and just plane title and description are being picked up. Please tell me what I am doing wrong, do I need to add the same code to default theme also? do I need to add some more code anywhere to make this code workable.
Visit my forum : www.gotripperz.com

Antes

You are not doing anything wrong but doing half. Those code needs to be supported by some globals and settings.

saurabh1938

Can you please help me with those Globals and settings,  i know that is too much of an ask,  but i have marginal coding knowledge but still i have made my website competent with the help of this wonderful community.  Please help me in resolving this problem
Visit my forum : www.gotripperz.com

saurabh1938

Please help on this one, I am really stuck.
Visit my forum : www.gotripperz.com

saurabh1938

Can someone please help me on this? or please let me know where and how can I get a support for this?
Visit my forum : www.gotripperz.com

Antes

I'm truly sorry, I really don't have time to create the snip or port it back to SMF 2.0 :(

saurabh1938

Ok thanks, I hope you would help when you get some time. Will keep coming back to check this space as I need this feature badly but I don't know how to do it. I have been banging my head for this for more than an year now.
Visit my forum : www.gotripperz.com

saurabh1938

Any one else can help me? .. I am ready to pay as well for the solution and solution will help many smf users also for whom smf is socially dead.
Visit my forum : www.gotripperz.com

oOo--STAR--oOo

Quote from: saurabh1938 on July 16, 2016, 03:21:22 PM
Any one else can help me? .. I am ready to pay as well for the solution and solution will help many smf users also for whom smf is socially dead.

Okay I don't have 2.1 never installed it, didn't know they included the SMF tags for Facebook. I can help you if I get the required information. Are there different images that will be displayed depending on the link you are sharing to facebook? As this is a forum, I not sure how 2.1 is designed to select which image?

How does SMF 2.1 select which image to put in the OG meta tag?

Is it just a default image that you want displayed? Such as your forum logo or what ever?

With this information I can help you set the tag correctly! Unfortunately though I won't be online for a little while. So I will help but when I get back and have this information ;)
You can't fool a sufficiently talented fool.

http://www.uniquez-home.com
In Design Phase!

Mods I am designing,  No refresh Collapse Categories , Poll Redesign , Pure CSS Breadcrumb , Profile Statuses, Profile Views.

Antes

SMF 2.1 asks in theme settings. You need to supply a OG Image otherwise tag will be disabled.

Pravi

Hi surabh,

              I am also having a similar problem. The main problem is, i dont know php  :( . I have opened a topic here, which help me to add all og property to smf 2.0.11. Take a look, it definitely going to help you.  ;) ;)

          http://www.simplemachines.org/community/index.php?topic=547326.0

              But the topic is not solved yet  :( . I am looking for a way to fetch og:description and og:tittle from the first post of the topic. if possible, fetch og:image from post attachments and choose a default image if no attachment.  :o :o :o

saurabh1938

Hi Pravi, I went through your post but it doesn't give the solution I am looking for as I am not looking for default image but the image from posts.

I am not getting any support from this forum from last 2 years on this topic. Without much coding knowledge I spent day and nights to create my website just to question my decision of choosing SMF as a platform, this is a very important feature that is missing and for last two years I am not getting any solution, spent weeks trying, researching... only answer I get is... "Fella, there are Mods already, search for those" ... I spent months searching for even one Mod but again I'll get the same answer but nobody bothers about this very important feature.

I know this feature is coming in 2.1 release but that'll be a lot of work to migrate for an already established forum... I have given up now for finding any solution or support on this topic.
Visit my forum : www.gotripperz.com

Kindred

the thing is...   the og: tags COULD be a simple thing


<meta property="og:url"               content="http://..." />
<meta property="og:type"            content="..." />
<meta property="og:title"             content="..." />
<meta property="og:description"   content="..." />
<meta property="og:image"          content="..." />
<meta property="og:site_name"          content="..." />


URL, and title are simple...
type is generally going to be a set value, not changing... as is site_name

description.... now that can get a little more complicated, depending on what you want it to pull from...

image...   the simple thing is to use a fixed, set image for all pages.


echo '
<meta property="og:url"               content="' . $context['canonical_url'] . '" />
<meta property="og:type"            content="website" />
<meta property="og:title"             content="' . $context['page_title_html_safe'] . '" />
<meta property="og:description"   content="' . $context['page_title_html_safe'] . '" />
<meta property="og:image"          content="http://url/to/fixed/image.png" />
<meta property="og:site_name"    content="' . $context['forum_name_html_safe'] . '" />';


add that, just after this

echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' . $context['meta_keywords'] . '" />' : '', '
<title>', $context['page_title_html_safe'], '</title>';




See -- simple.

When it starts getting much more complicated is when you want to pull variable data from the page (like, show the first image in a thread, if present, otherwise show a default image)


the description... as I mentioned, above, is a little more complicated in 2.0.x -- currently, even the standard description metatag is just mirroring the title...  Which actually makes sense for most pages, like posts...  If you want something else, you need to get creative with how to pull the data in some useful format.



Also, on "not getting support"....

Ummm.... you only registered last year -- and this is the first topic that you have raised referring to the og tags...     so, claiming that you have not received support on this question for 2 years is ludicrous...
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

saurabh1938

Thanks, but I am trying to workout with Variables, specially variable topic, description and image to make topics shareable over social media. The solution provided by you is the static one and I have already tried that and looking for things that are variable. Unfortunatley, We are living in a highly competitive world, which is automated, variable, complex and dynamic.

On the topic of support, I believe you are an admin or moderator and you can have access to my posts and topics...

I joined SMF Community in August 2014, not last year. I said I didn't get support for this topic and for other things you can see my website and it is possible only from the support and knowledge I received from this community but this topic is an exception. If you can access my posts and topic, I have more than 20 posts in various threads/topics for Meta OG and this excluded uncounted days and hours of research on SMF, Internet but still this feature is missing in my website and because of which I am loosing this amazing opportunity which social media presents today. It's the image and topic that attracts readers on social media and who's going to click my link with static lame logo image on my article links.

Visit my forum : www.gotripperz.com

Kindred

well, the code that I gave you might use a static image.... but it does correctly pull the topic title as the title and description.

as a matter of fact, that code that I gave you only has one static item which could, potentially, be non-static -- and that is the image.
However, as I already explained, pulling the image from a thread can get VERY complicated VERY quickly. There is no simple answer.

and although you are correct in that you did join in 2014 (my mistake there)
your only comment on OG was to request it in feature requests... which we replied to stating that it is part of 2.1 (so the feature request was dealt with)
2.0.x is in maintenance only mode.. That means that it only gets updates for security, major bugs or alterations in functionality which break something (php 5.6, php 7, Paypal)


Actually, I am moving this out of support and into coding, because you are unwilling to accept any of the mods and seem to want a coding solution which is outside of actual support of the product.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

nend

#15
Problem I believe on vanilla SMF is the topic content isn't queried until the display template is loaded. I believe it is done this way to give theme developers a little control. What you have to do is edit the sources and pull that first post data and ad it to a variable.

Here is what I do, I am not going to water it down as I don't have the time for that now, so you'll have to take what you need from the code.

Part of my Sources/Display.php
// Are we showing signatures - or disabled fields?
$context['signature_enabled'] = substr($modSettings['signature_settings'], 0, 1) == 1;
$context['disabled_fields'] = isset($modSettings['disabled_profile_fields']) ? array_flip(explode(',', $modSettings['disabled_profile_fields'])) : array();

// Censor the title...
censorText($topicinfo['subject']);
$context['page_title'] = $topicinfo['subject'];
$context['meta_description'] = $topicinfo['body'];

// Is this topic sticky, or can it even be?
$topicinfo['is_sticky'] = empty($modSettings['enableStickyTopics']) ? '0' : $topicinfo['is_sticky'];


My index.template.php header
// Page thumbnail - Have to process the link tree for this, lol.
// $rel_img = array_reverse($context['linktree']);
if (isset($context['item_data']['id_media'])) {
$context['rel_image'] = $scripturl.'?action=media;sa=media;in='.$context['item_data']['id_media'].';thumb';
$context['rel_image-lg'] = $scripturl.'?action=media;sa=media;in='.$context['item_data']['id_media'].';preview';
} else if (isset($context['thumb']) && $context['thumb'] != '') {
$context['rel_image'] = $boardurl.'/img/b/sm/'.$context['thumb'];
} else if (isset($board_info['thumb']) && $board_info['thumb'] != '') {
$context['rel_image'] = $boardurl.'/img/b/sm/'.$board_info['thumb'];
/* } else if (isset($rel_img[1]) && file_exists($boarddir.'/img/b/sm/'.$rel_img[1]['name'].'.png')) {
$context['rel_image'] = $boardurl.'/img/b/sm/'.$rel_img[1]['name'].'.png';*/
} else {
$context['rel_image'] = $boardurl.'/img/viral/site_thumb.png';
}

// Page meta description
if (!empty($context['item_data']['description'])) {
$context['meta_description'] = si_desc($context['item_data']['description']);
} else if (!empty($context['description'])) {
if (preg_match('[smg id=([0-9]+)(.*)]', $context['description'], $match)) {
$context['rel_image'] = $scripturl.'?action=media;sa=media;in='.$match[1].';thumb';
$context['rel_image-lg'] = $scripturl.'?action=media;sa=media;in='.$match[1].';preview';
} else if (preg_match('#\[img(.*)\](.*)\[\/img\]#Ui', $context['description'], $match)){
$context['rel_image'] = $match[2];
}
$context['meta_description'] = si_desc($context['description']);
} else if (!empty($context['meta_description'])) {
if (preg_match('[smg id=([0-9]+)(.*)]', $context['meta_description'], $match)) {
$context['rel_image'] = $scripturl.'?action=media;sa=media;in='.$match[1].';thumb';
$context['rel_image-lg'] = $scripturl.'?action=media;sa=media;in='.$match[1].';preview';
} else if (preg_match('#\[img(.*)\](.*)\[\/img\]#Ui', $context['meta_description'], $match)){
$context['rel_image'] = $match[2];
}
$context['meta_description'] = si_desc($context['meta_description']);
} else {
$context['meta_description'] = $context['page_title_html_safe'] . '.';
}

echo '
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="'.$scripturl.'wtfavicon.ico" />
<meta name="theme-color" content="#2196F3">
<link rel="icon" href="'.$boardurl.'/img/viral/site_thumb16.png" sizes="16x16" />
<link rel="icon" href="'.$boardurl.'/img/viral/site_thumb32.png" sizes="32x32" />
<link rel="icon" href="'.$boardurl.'/img/viral/site_thumb48.png" sizes="48x48" />
<link rel="icon" href="'.$boardurl.'/img/viral/site_thumb64.png" sizes="64x64" />
<link rel="icon" href="'.$boardurl.'/img/viral/site_thumb128.png" sizes="128x128" />
<link rel="apple-touch-icon-precomposed" href="'.$boardurl.'/img/viral/site_thumb128.png" />
<link rel="image_src" href="'.$context['rel_image'].'" />';

echo '
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta http-equiv="content-language" content="en-us" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="description" content="'.$context['meta_description'].'" />
<title>', $context['page_title_html_safe'], '</title>';

// Open Graph
if (isset($context['item_data']['type']) && $context['item_data']['type'] == 'video' || isset($context['item_data']['type']) && $context['item_data']['type'] == 'embed') {
$og_type = 'video';
$og_extra = isset($context['aeva']['og_url']) ?  '<meta property="og:video" content=\''.$context['aeva']['og_url'].'\' />' : '<meta property="og:video" content=\''.preg_replace(array('~\[url=([^]]*)][^[]*\[/url]~', '~\[url]([^[]*)\[/url]~'), '$1', $context['item_data']['embed_url']).'\' />';
}
echo '
<meta property="og:title" content="', $context['page_title_html_safe'], '"/>
<meta property="og:type" content="'.(isset($og_type) ? $og_type : 'website').'"/>
<meta property="og:url" content=\''.(!empty($context['canonical_url']) ? $context['canonical_url'] : 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']).'\' />'.(!empty($context['rel_image-lg']) ? '
<meta property="og:image" content=\''.$context['rel_image-lg'].'\' />':'').'
<meta property="og:image" content=\''.$context['rel_image'].'\'/>
<meta property="og:site_name" content="SI Community"/>
', !empty($context['meta_description'])? '<meta property="og:description" content="'.$context['meta_description'].'"/>':'', ''.(isset($og_extra) ? $og_extra : '');


May I must warn, don't use this code as is. It is coded with allot of dependencies which your setup will not have. Just take what you need.

*edit
Forgot a part of Display.php
// Get all the important topic info.
$request = $smcFunc['db_query']('', '
SELECT
t.num_replies, t.num_views, t.locked, ms.body, ms.subject,

saurabh1938

Thanks for your helping hand... but I have zero PHP Knowledge, but still i give it a go using trial and error. Now the thing is this feature can't be tested on my test site, coz need to check if the code is running by crawling it through facebook and thus it is a great risk I am taking to do it on a live website. Just wanted to know if I need to update index.template.php in default theme or in custom theme?
Visit my forum : www.gotripperz.com

Kindred

in whatever theme(s) you are using...

Also, of course you can test it on a test site...  just load the page and look at the html meta code in the header.
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

saurabh1938

Hi Nend,

Using various combinations I tried the whole day yesterday but I didn't get it working, I can share my index.template.php file with you and if you can help me modifying it, I'll be really really grateful to you.

Thanks in advance.
Visit my forum : www.gotripperz.com

Dhayzon


Advertisement: