Share this issue with facebook

@perrie
8 years ago
435 posts

Hi everyone
Here is what I could figure out. Share this uses your logo as what shows up on a facebook share. My logo "The NewsTalkers" is larger than what share this allows. So what's showing is the attached file. Any ideas on how to fix this?
Thanks

updated by @perrie: 05/06/16 04:42:45PM

@michael
8 years ago
7,714 posts

Its going to depend on which page your trying to share. The sharethis button should only be visible on pages that also include the correct metatags that provides the info that facebook is after.

@derrickhand300 had some useful info on using the META TAG MANAGER module on pages that were not setup with the og:image and other facebook tags in this thread:
https://www.jamroom.net/the-jamroom-network/forum/site-builder/30227/problem-using-the-meta-tag-manager

@perrie
8 years ago
435 posts

Michael,

I am trying to share any discussion in my forum. I have looked over the info you sent me too, and it looks like I have to change every discussion in my forum, which would be impossible. There must be something else that can be done.

@perrie
8 years ago
435 posts

OK, here is another angle (especially since I would like the "Share This" on the top. If I go to their website I am given several options. The first is they type of platform that I am using. Since Jamroom isn't there, do I have to go with the "website" option, or is jamroom similar to either wordpress, joomla, or Drupal?

If I have to go with the 'website' option, I get several pieces of code.

Place these script tags in "head" section of your html.
Place these script tags in "css" section of your code.
Now, put these scripts at the end of your page. They contain the parameter preferences in JSON format.

I can only figure out where to put the css and I am not sure if this will solve the half baked embed on facebook.

Dazed
@dazed
8 years ago
1,022 posts

Can't you just specify the image you want to use using og tags? Go to http://ogp.me/ and look at og:image. Create a new graphic that fits the facebook image size and link to it. Add the meta tag accordingly in your header. Then rebuild the page. Go to https://developers.facebook.com/tools/debug/ and put in the page url to rebuild the cache and you should see the image displayed from the page scrape.

A full image example:

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />

@perrie
8 years ago
435 posts

Thanks a lot Daze, I get it a bit more now.
Right now from what I can tell, Facebook is grabbing my logo name from the front page of my site. How do I create an addy where I can put a logo that I want for the site?
updated by @perrie: 02/01/16 10:24:03AM

@michael
8 years ago
7,714 posts

Use the metatag manager and the code dazed has given above along with the URL of the image you want to use.

@perrie
8 years ago
435 posts

I understand that Michael, but I don't have that anywhere on the site except as the default for the avatars and as favicon. So how do I direct them there? Do I need a new "hidden" page with the logo I want and that will fit the parameters?
updated by @perrie: 02/01/16 12:40:49PM

@perrie
8 years ago
435 posts

OK so I put the image I wanted into my about in the footer.
I followed the directions above, and gave the image addy.
I then put it into the skin's header template

I got this back when I did a scraping:

Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.

I am totally lost. How can it be in the body when I put it into the header?

@michael
8 years ago
7,714 posts

cant tell without looking at the code, got a url.

@derrickhand300
8 years ago
1,353 posts

Sorry I have been away- maybe I can help
Try making your image 1386x721 or somewhere close that works out- thats a good default for FB sharing
If you want EACH page of your site to show the content for THAT PARTICULAR page then you may need to define the meta data for Facebook manually ( I do this on EVERY post) typing it here may seem complicated buts its really not and can be done in just a minute or two
You this code to begin with

<!-- Facebook OG -->
    <meta id="ogtitle" property="og:title" content="ADD YOUR ARTICLE/POST TITLE HERE BETWEEN COMMAS"/>  
    <meta id="ogdescription" property="og:description" content="ADD YOUR ARTICLE DESCRIPTION HERE BETWEEN COMMAS"/>
    <meta id="ogimage" property="og:image" content="NOW USING CHROME-RIGHT CLICK ON THE IMAGE IN YOUR ARTICLE YOU WANT DISPLAYED AND SELECT "COPY IMAGE ADDRESS" THEN PASTE THAT ADDRESS HERE THEN CHANGE THE IMAGE SIZE TO 800 ( CHANGE IT NO MATTER WHAT SIZE THE IMAGE IS IN YOUR ARTICLE-THE 800 DISPLAYS GREAT ON FACEBOOK POSTS"/>
    <meta id="ogurl" property="og:url" content="ADD THE URL OF THE WEBPAGE HERE"/>

When you get the above code altered then copy it and go to the page the code represents THEN go to SITEBUILDER>PAGE CONFIG> and select the PAGE SETTINGS tab...there you will see a box that says PAGE HEAD HTML....paste your facebook data there and save/exit... then go to

https://developers.facebook.com/tools/debug/

and enter the page URL into the debug box and hit the debug button THREE times...this forces facebook to rescrape your page data...scroll to the bottom and you should see how its displayed...I need to make post an article soon here I will take a screen video...it seems complicated but it really only takes a minute- just remember to save the above FACEBOOK OG code above to a notepad file- then open it and reuse it each time altering the information as needed

@derrickhand300
8 years ago
1,353 posts

Here I made a quick video of creating a page then adding all the facebook OG data needed- it will better explain the above post-I hope this helps
Jamroom-Config Facebook OG Meta Tags

I would copy this code into a notepad file and save it- then edit it each time you need to config a page for facebook

<!-- Facebook OG -->
    <meta id="ogtitle" property="og:title" content="YOUR INFO"/>  
    <meta id="ogdescription" property="og:description" content="YOUR INFO"/>
    <meta id="ogimage" property="og:image" content="YOUR INFO"/>
    <meta id="ogurl" property="og:url" content="YOUR INFO"/>

updated by @derrickhand300: 02/03/16 10:29:59AM

@perrie
8 years ago
435 posts

Thanks for all the help Derrick,

OK here is the thing, I just want facebook to pick up my logo. They are apparently using the one in my header, which is configured wrong (too large). So I configured a new one and put it in my about in my footer, found here:
http://thenewstalkers.com/about
How do I get facebook to carry that logo? Because of the nature of my site, I don't need new images all the time, just that logo. I tried to put it into the header templet, but it didn't work
updated by @perrie: 02/03/16 11:10:21AM

@derrickhand300
8 years ago
1,353 posts

Host the image by uploading it to a test page on your site using the site builder-embed image in the tinymce editor- then switch the tinymce editor to html code view and copy the image url....then add it to your meta.tpl using

<meta id="ogimage" property="og:image" content="YOUR IMAGE URL"/>

Be sure and change the 3 numbers at the end of the url to 800-that should size it for FB

http://yoursite.com/upimg/image/upimg_file/776/800"

Not sure why you are putting it in the footer or even the header...it belongs in the meta.tpl or the HEAD section which I think is different from the header.tpl

updated by @derrickhand300: 02/03/16 11:28:46AM

@perrie
8 years ago
435 posts

Let me just make sure I understand something. Should I create a new page called Test page? If so, can I delete it after facebook picks it up, since there is no way to hide a test page.

@derrickhand300
8 years ago
1,353 posts

yes just type "test" after your site url and create the page- then open a widget and upload the image...not sure why but I have been doing this since I started and the images i upload are never removed from the server...so i just host them that way.

Just to be clear I know that YOU know I am also new to all this-but for anyone else reading I AM NO EXPERT- just have been able to make things work for myself..

With that said...I just looked at the source code for the head section of your site -I dont see ANY FB meta data...
If i were you I would use this code-

<!-- Facebook OG -->
    <meta id="ogtitle" property="og:title" content="YOUR INFO"/>  
    <meta id="ogdescription" property="og:description" content="YOUR INFO"/>
    <meta id="ogimage" property="og:image" content="YOUR INFO"/>
    <meta id="ogurl" property="og:url" content="YOUR INFO"/>

Fill in all the blanks then add it to your meta.tpl
I really think that will solve your problems-just remember to change the image size in the URL to 800 ( for facebook display)

Worth a test- you can always delete it

updated by @derrickhand300: 02/03/16 11:38:40AM

@perrie
8 years ago
435 posts

LOL I won't hold you to this.

I am new to meta data... can you give me examples of what should go into the title, description, image and property. I think I know, but I am not sure.
Thanks again

@derrickhand300
8 years ago
1,353 posts

SURE

<!-- Facebook OG -->
    <meta id="ogtitle" property="og:title" content="The News Talkers"/>  
    <meta id="ogdescription" property="og:description" content="Your source for discussing the latest news and headlines from around the world"/>
    <meta id="ogimage" property="og:image" content="YOUR INFO"/>
    <meta id="ogurl" property="og:url" content="http:thenewstalkers.com"/>

The image URL would be your header image or whatever image of choice uploaded to a test page- then copy that URL and change the size ( 3 numbers on the end) to 800

@perrie
8 years ago
435 posts

OK will let you know how it goes. Fingers crossed!

@perrie
8 years ago
435 posts

OK that didn't work and I am now locked out since they say I have an excessive amount of scrapes. I guess I will have to wait a bit, and try again.

I still would like to thank you for your help!
updated by @perrie: 02/03/16 12:46:44PM

@michael
8 years ago
7,714 posts

Looking in your about page:
view-source:http://thenewstalkers.com/about

the meta tags are not there:

<head>
<title>About | The News Talkers</title>
<link rel="shortcut icon" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069.ico">
<link rel="apple-touch-icon-precomposed" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_57.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_72.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_114.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_120.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_144.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_152.png">
<link rel="icon" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_96.png" sizes="96x96">
<link rel="icon" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_195.png" sizes="195x195">
<link rel="icon" href="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_228.png" sizes="228x228">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="http://thenewstalkers.com/data/media/0/0/favicon_1444438069_144.png">

<link type="text/css" href="/cometchat/cometchatcss.php" rel="stylesheet" charset="utf-8">
<script src="/cometchat/cometchatjs.php" charset="utf-8"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:700,400,200"/>
<link rel="stylesheet" href="http://thenewstalkers.com/data/cache/phNewsTalkers/672f41728c04a1a58909fa0feda69557.css" media="screen" />
<script type="text/javascript" src="http://thenewstalkers.com/data/cache/phNewsTalkers/e4b7489f03b517779a0a8733eb05866b.js"></script>
</head>

need to get your page showing the meta tags before facebook will be able to find them.

on firefox the short cut to view the page source is ctrl+u or right click and choose view source.

@derrickhand300
8 years ago
1,353 posts

Yes- if you want them in the HEAD section you will need to add the facebook meta data to the meta.tpl
Checking your HOME page source I also am not seeing it...if you are using something like CLOUDFLARE you may need to run it in development mode and reset the cache-otherwise if you have it in the meta.tpl it will show up
You may also need to check and see if you are overriding the meta.tpl somewheres...for instance if you are editing the template on the server BUT have the checkbox in the Jamroom Templates checked that may be overriding your edits on the server...

Those are the two most common mistakes i have made in the past- but if its in the meta.tpl and that template is active- your FB stuff will show in the page source.

Hope that helps

@perrie
8 years ago
435 posts

Michael,

Facebook is doing their "scraping" from the logo in the header, so I don't understand why the about would help. Could you please extrapolate.

Derrick,

I have no idea of what CLOUDFLARE is, (I am a tad code illiterate to say the least). The meta tag is still in the meta.tpl right now, so I am unsure why you are not seeing it. To my knowledge I am not overriding it anywhere else. But you did just remind me, that I although I made the changes, I don't think that I checked it... let's see .....I will get back to you!

@perrie
8 years ago
435 posts

Well the box wasn't checked so I did. Tried another two scrapings and nada.
Don't know if this screenshot will help but I am including it.

updated by @perrie: 02/04/16 09:51:58AM

@perrie
8 years ago
435 posts

This is what FB is seeing:

updated by @perrie: 02/04/16 10:02:32AM

@derrickhand300
8 years ago
1,353 posts

Its showing up now ( I can see it in the source code)

here is a screenshot when i share your page to facebook

@derrickhand300
8 years ago
1,353 posts

I noticed you have a "Test Page" in your menu which I assume means you created the page with the MENU tool in site builder...I would delete that in the MENU builder THEN in your browser paste this

http://thenewstalkers.com/test

Then you should see a page with a box that says 'This page does not exist- would you like to create it?"

Select that- then PAGE CONFIG and open a widget and use it to upload images to or to test your content- this way others cant see it unless they type in the URL

@perrie
8 years ago
435 posts

Derrick you did it!!!
It's fixed!!
It was all because I forgot to check the box!
Now I have to change my test page, where the image resides! Yes that is what is in my test page
Thank you, thank you, thank you!!
updated by @perrie: 02/04/16 11:14:53AM

@perrie
8 years ago
435 posts

Hummm.. Derrick.. did you actually try pasting that into my browser?????

I get a page of stuff. IDKY.

Maybe I should try http://thenewstalkers.com/testpage ?

But then the url will have to be adjusted for FB again, right?
updated by @perrie: 02/04/16 11:31:29AM

@perrie
8 years ago
435 posts

OK, so I did the thing with hiding my image page. I checked facebook and it looks like it took.
I am getting a strange message from them (and the image they show on their test page isn't what is showing, but that is good).
What does this mean?

updated by @perrie: 02/04/16 01:30:45PM

@douglas
8 years ago
2,790 posts

perrie:
OK, so I did the thing with hiding my image page. I checked facebook and it looks like it took.
I am getting a strange message from them (and the image they show on their test page isn't what is showing, but that is good).
What does this mean?

Your missing the // in your URL "http:thenewstalkers.com" looks like what you have entered and it should be http://thenewstalkers.com.

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@perrie
8 years ago
435 posts

Doug!
That was it! I fixed it and it's gone. Thank you!
Thanks everyone, especially Derrick for all the help. One job done. Onto the next, LOL!

@derrickhand300
8 years ago
1,353 posts

You're welcome
yes the link http://thenewstalkers.com/test is already a test page someone has created
Yes you can just name it test1 or whatever you like...for some reason the images are never deleted even when the page is deleted.. so in my case I use the editor on a test page to upload an image- link from it to a webpage if needed and whatever else- then when it looks like what i want I go to 'code view" and copy the code and paste it on whatever public page I want

@perrie
8 years ago
435 posts

I will keep this discussion marked for future use, in case I don't want just my logo, but for now, I am very happy.

Thanks again Derrick!

solved Share this issue with facebook