getting picture to associate with domain name?
Permalink
Alright, so I'm trying to put a facebook "like" button on my webpage and I've mananged to do so just fine. however, when someone "likes" my site, on their facebook the link shows up and next to the link is a picture, that picture currently is a very unsightly "AttractaSEO" icon. If you don't know what i'm talking about, please take a look, my site ishttp://www.TJGwoodworking.com i know the placement of the like button is a little random right now, but i'm trying to get it to work properly first. so, "like" it and then look at your facebook page and you'll see what i mean hopefully. I am trying to get this picture to be something nicer, perhaps one of my pieces of furniture or a logo. I'm not an expert with this web stuff but i do alright. hopefully somebody is able to help. thanks alot folks :)
John,
I appreciate your input. I took a look at the link you provided. so, i understand the concept of adding a meta tag so that facebook recognizes it. the only question i have now is, it says to add that bit of code to the [<head>] of the website. i am not sure how to do this, i tried just putting the code into a random spot on my homepage under the html menu, but nothing happens. i think i know where i could have done this before i got the update and everything changed. beforehand, i remember seeing a menu for editing a page which allowed you to change page type, add meta tags, meta descriptions, etc. i'm not sure if this is where i would have gone. Like i said, i'm not a pro at this. any ideas? -Tyler
I appreciate your input. I took a look at the link you provided. so, i understand the concept of adding a meta tag so that facebook recognizes it. the only question i have now is, it says to add that bit of code to the [<head>] of the website. i am not sure how to do this, i tried just putting the code into a random spot on my homepage under the html menu, but nothing happens. i think i know where i could have done this before i got the update and everything changed. beforehand, i remember seeing a menu for editing a page which allowed you to change page type, add meta tags, meta descriptions, etc. i'm not sure if this is where i would have gone. Like i said, i'm not a pro at this. any ideas? -Tyler
tymann,
If you only need to add it to a single page (or only a handful of pages), you can use the page Properties to add in "Header Extra Content" as a "Custom Attribute". If you need it on a LOT of pages, you're going to need to modify elements of your site theme to add it there so that it's on every (or lots of) page.
To add the "Header Extra Content" (using Concrete 5.5.x)...
(1) Go to Edit and select "Properties"
(2) Click the "Custom Attributes" tab
(3) Click on "Header Extra Content" in the left column
(4) Scroll down until you find the "Header Extra Content" box in the right hand column
(5) Enter your meta tag code
(6) Save your changes
If you look at your page in the browser and view the source code, you should be able to see your meta tag between the <head> and </head> tags (along with LOTS of other stuff). LOL!
Hope that helps!
- John
If you only need to add it to a single page (or only a handful of pages), you can use the page Properties to add in "Header Extra Content" as a "Custom Attribute". If you need it on a LOT of pages, you're going to need to modify elements of your site theme to add it there so that it's on every (or lots of) page.
To add the "Header Extra Content" (using Concrete 5.5.x)...
(1) Go to Edit and select "Properties"
(2) Click the "Custom Attributes" tab
(3) Click on "Header Extra Content" in the left column
(4) Scroll down until you find the "Header Extra Content" box in the right hand column
(5) Enter your meta tag code
(6) Save your changes
If you look at your page in the browser and view the source code, you should be able to see your meta tag between the <head> and </head> tags (along with LOTS of other stuff). LOL!
Hope that helps!
- John
John,
thanks for your reply. i was following your steps but got stumped when i hit the menu for custom attributes. when i clicked it, all it opened was a search box, which appears to be useless. I am almost positive i'm running 5.5. I was just hoping to get the "like" button on just my home page, that way on facebook people could see that my website was liked, this would increase traffic hopefully. so, i wouldn't need to modify the themes, just the one page like you described. any more ideas? thank you for your patience, it's much appreciated. -Tyler
thanks for your reply. i was following your steps but got stumped when i hit the menu for custom attributes. when i clicked it, all it opened was a search box, which appears to be useless. I am almost positive i'm running 5.5. I was just hoping to get the "like" button on just my home page, that way on facebook people could see that my website was liked, this would increase traffic hopefully. so, i wouldn't need to modify the themes, just the one page like you described. any more ideas? thank you for your patience, it's much appreciated. -Tyler
Hmmmm... sounds like there could be an issue with either your browser or your installation of C5. I was pretty sure the "Header Extra Content" attribute was a "default"... but maybe it is only installed if you install the sample content when setting up a new C5 install? Is your install fresh? And did you install the sample content?
Some other quick thoughts/ideas:
(1) Try clearing your browser cache (or trying a different browser) to see if that's the issue
(2) Try clearing your C5 server cache: go to Dashboard/System & Settings and then the "Clear Cache" option under Optimization
(3) See if you have any attributes installed: go to Dashboard and choose "Attributes" from under "Pages & Themes". Does anything show? If not, you may have to create it. Use the "Add Attribute" box... select "Text" and click "Add". Then enter the following for the details:
Handle: header_extra_content
Name: Header Extra Content
Set: Page Header
Searchable: check off both
Input Format: Plain Text
Once it's created, you should be able to go back to your page, select "Edit / Properties / Custom Attributes" and add it to your page. Then paste your meta tag in and you should be good to go.
If none of the above works, you're out of my league with what could be causing the problem. You might need to post another topic asking about why you don't have any custom attributes to add to your pages... and specifically the "Header Extra Content" attribute.
Good luck!!!
- John (off to bed)
Some other quick thoughts/ideas:
(1) Try clearing your browser cache (or trying a different browser) to see if that's the issue
(2) Try clearing your C5 server cache: go to Dashboard/System & Settings and then the "Clear Cache" option under Optimization
(3) See if you have any attributes installed: go to Dashboard and choose "Attributes" from under "Pages & Themes". Does anything show? If not, you may have to create it. Use the "Add Attribute" box... select "Text" and click "Add". Then enter the following for the details:
Handle: header_extra_content
Name: Header Extra Content
Set: Page Header
Searchable: check off both
Input Format: Plain Text
Once it's created, you should be able to go back to your page, select "Edit / Properties / Custom Attributes" and add it to your page. Then paste your meta tag in and you should be good to go.
If none of the above works, you're out of my league with what could be causing the problem. You might need to post another topic asking about why you don't have any custom attributes to add to your pages... and specifically the "Header Extra Content" attribute.
Good luck!!!
- John (off to bed)
Hi john
sorry it has taken a bit of time to get back to you. so here's my status, i was using IE explorer before, but switched over to firefox and that solved the problem as far as seeing the window in the attributes menu. i was able to find the extra header content and clicked that, which moved it over to the right hand side. that's pretty much as far as i got unfortunatly. i put the code in the box under the extra header content. nothing happened, i tried the code for just the image tag, nothing happened, i tried putting both codes in a random spot in the site, nothing happened. so then i decided to try and get rid of the picture that was being displayed, the "attracta seo" this is a statistics thing apparently. so, i removed that, it was also on another page in the site, and i removed that one as well. so now, there are no traces of this "attracta seo" but it's still there when i go to "like" the page. I didn't think this would be so hard and it's driving me up a wall thinking of possibilities. i've come to the conclusion that this attracta image must be embedded somwhere in my site that i'm just not seeing. facebook is obviously seeing it. is there a way to view the entire page in open script?
sorry it has taken a bit of time to get back to you. so here's my status, i was using IE explorer before, but switched over to firefox and that solved the problem as far as seeing the window in the attributes menu. i was able to find the extra header content and clicked that, which moved it over to the right hand side. that's pretty much as far as i got unfortunatly. i put the code in the box under the extra header content. nothing happened, i tried the code for just the image tag, nothing happened, i tried putting both codes in a random spot in the site, nothing happened. so then i decided to try and get rid of the picture that was being displayed, the "attracta seo" this is a statistics thing apparently. so, i removed that, it was also on another page in the site, and i removed that one as well. so now, there are no traces of this "attracta seo" but it's still there when i go to "like" the page. I didn't think this would be so hard and it's driving me up a wall thinking of possibilities. i've come to the conclusion that this attracta image must be embedded somwhere in my site that i'm just not seeing. facebook is obviously seeing it. is there a way to view the entire page in open script?
Tyler,
Well... a couple of things:
(1) In looking at your site, I see that there are some Open Graph tags in two places: one set is in the <head> (I assume these are ones you placed into the "Header Extra Content" field) that have info about the movie "The Rock"... and another set down in the body of the site, which appear to be ones relevant to you. Replace the ones in the "Extra Header Content" box with the ones you've got in the content area... then delete the ones in the content. They won't work there anyway.
(2) I didn't remember that there is a specific implementation of the FaceBook "Like" button required in order for the Open Graph tags to work. So... here's what I THINK is a step-by-step to get things working OK for you:
(A) Add an HTML block at the very top of your page and paste in this code:
(B) Then, where you want the Facebook Like button to appear, put another HTML block with this code in it:
(C) Then, add the Open Graph tags to the head of your page by pasting the following into the "Edit / Properties / Custom Attributes / Extra Header Content" field:
Then, it may take up to 24 hours for Facebook to "scrape" your page and get the info... but after that, anyone who "Likes" your page SHOULD see the image you have referenced in your OG meta tag.
I think. ;)
I hope that's clear... let me know if anything doesn't work.
- John
Well... a couple of things:
(1) In looking at your site, I see that there are some Open Graph tags in two places: one set is in the <head> (I assume these are ones you placed into the "Header Extra Content" field) that have info about the movie "The Rock"... and another set down in the body of the site, which appear to be ones relevant to you. Replace the ones in the "Extra Header Content" box with the ones you've got in the content area... then delete the ones in the content. They won't work there anyway.
(2) I didn't remember that there is a specific implementation of the FaceBook "Like" button required in order for the Open Graph tags to work. So... here's what I THINK is a step-by-step to get things working OK for you:
(A) Add an HTML block at the very top of your page and paste in this code:
<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
(B) Then, where you want the Facebook Like button to appear, put another HTML block with this code in it:
<div class="fb-like" data-href="http://www.tjgwoodworking.com/" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark"></div>
(C) Then, add the Open Graph tags to the head of your page by pasting the following into the "Edit / Properties / Custom Attributes / Extra Header Content" field:
<meta property="og:title" content="TJGwoodworking" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://www.tjgwoodworking.com" /> <meta property="og:image" content="http://www.tjgwoodworking.com/files/8213/2114/5528/101_5551.jpg" /> <meta property="og:site_name" content="TJGwoodworking" /> <meta property="fb:admins" content="563462111" />
Then, it may take up to 24 hours for Facebook to "scrape" your page and get the info... but after that, anyone who "Likes" your page SHOULD see the image you have referenced in your OG meta tag.
I think. ;)
I hope that's clear... let me know if anything doesn't work.
- John
alright john,
I just edited everything as per the specs you gave me. I wasn't aware that it sometimes took 24 hours for something to show up from scrapeing i believe you called it. so, that being sad, i will leave everything as it is right now and will check it tomorrow evening to see if there's any chance. we can keep our fingers crossed. Thanks for all your help.
-Tyler
I just edited everything as per the specs you gave me. I wasn't aware that it sometimes took 24 hours for something to show up from scrapeing i believe you called it. so, that being sad, i will leave everything as it is right now and will check it tomorrow evening to see if there's any chance. we can keep our fingers crossed. Thanks for all your help.
-Tyler
Cool,
Just checked the code published to your site... and everything looks good except for ONE thing:
In the "Header Extra Content", the meta tags are being wrapped between a <p> and </p> tag. Can you go into your home page's "Properties" window... go to the "Custom Attributes" window... and then check what you pasted into the box for the "Header Extra Content". Be sure it doesn't begin with a "<p>" and end with a "</p>". It should just look like this:
Fingers crossed! :D
Just checked the code published to your site... and everything looks good except for ONE thing:
In the "Header Extra Content", the meta tags are being wrapped between a <p> and </p> tag. Can you go into your home page's "Properties" window... go to the "Custom Attributes" window... and then check what you pasted into the box for the "Header Extra Content". Be sure it doesn't begin with a "<p>" and end with a "</p>". It should just look like this:
<meta property="og:title" content="TJGwoodworking" /> <meta property="og:type" content="website" /> <meta property="og:url" content="http://www.tjgwoodworking.com" /> <meta property="og:image" content="http://www.tjgwoodworking.com/files/8213/2114/5528/101_5551.jpg" /> <meta property="og:site_name" content="TJGwoodworking" /> <meta property="fb:admins" content="563462111" />
Fingers crossed! :D
john,
i was just about to post a reply saying it didn't work. but then i see that you had sent me one more response. so, all hasn't failed YET! i will fix that right now. and then hopefully by tomorrow it works haha. baby steps!
i was just about to post a reply saying it didn't work. but then i see that you had sent me one more response. so, all hasn't failed YET! i will fix that right now. and then hopefully by tomorrow it works haha. baby steps!
LOL! No problem. I've got my fingers crossed... hope this works! ;)
- John
- John
John,
Today is our lucky day. It finally worked!!!! I can't thank you enough for being so patient with me and helping me through this. I appreciate it a ton, and have to say I learned quite a bit during this process. I now know what to do if I want to get other pages liked in the future. Again, thank you so much, it's much appreciated.
-Tyler
Today is our lucky day. It finally worked!!!! I can't thank you enough for being so patient with me and helping me through this. I appreciate it a ton, and have to say I learned quite a bit during this process. I now know what to do if I want to get other pages liked in the future. Again, thank you so much, it's much appreciated.
-Tyler
Glad to hear that everything's working! Sorry it turned out to be such a strain!
- John
- John
Hi, where does the content="563462111" number come from in your meta tags? I have read your thread and am trying to figure out this same problem, but haven't quite figured it out. Thank you.
@TheSandDuneandTheSnowMan,
That's your own FB ID (don't remember where to get it from, though). According to Facebook:
fb:admins
A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
Hope that helps.
That's your own FB ID (don't remember where to get it from, though). According to Facebook:
fb:admins
A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
Hope that helps.
I think what you need to do is implement a meta tag using Facebook's Open Graph tags. Basically, you add a meta tag that tells Facebook what image to use when someone does anything with your page on Facebook. It would look like this:
There are a bunch of open graph tags available. Read more about it here:
http://developers.facebook.com/docs/reference/plugins/like/...
Hope that helps!
- John