It is possible to change the thumbnail image that users see after hitting a "Like" button on my website without using the Javascript SDK?
I'm currently using this iframe:
<iframe src="http://www.facebook.com/plugins/like.php?href=www.itsmorethanatextbook.com?show_faces=false"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
Hopefully this is a simple question. :)
-Eric
Try to set
<meta property="og:image" content="http://YOURWESITE.COM/IMAGE.JPG"/>
<meta property="og:title" content="YOUR WEBSITE TITLE"/>
<meta property="og:url" content="http://YOURWESITE.COM/"/>
<meta property="og:type" content="website" />
in your HEADER, after test your web site with https://developers.facebook.com/tools/debug the url linter :)
Related
I added meta tags to the layout head for my Next.js website.
Here is what I added :
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Bouge" key="ogsitename" />
<meta
property="og:url"
content={url ? url : "https://bouge.app/"}
key="ogurl"
/>
<meta property="og:title" content={title} key="ogtitle" />
<meta
property="og:description"
content="Un service qui te donne accès aux associations, studios privés, terrains publics et activités citoyennes."
key="ogdesc"
/>
<meta
property="og:image"
content="https://bouge.app/_next/bouge.png"
key="ogimage"
/>
When I copy my homepage link, all the og meta tags info are perfectly showing however if I copy an other url from the website, the image is not showing.
Others infos, like the description are showing.
I don't understand why the image isn't working because it is in my layout. The code is the same for each page so if the description works for all pages why isn't it the case for the image ?
The image is in my public file.
I first tried this code for my image :
content="/bouge.png"
but the image wasn't showing in my firefox extension og tags preview on localhost (but once in production the image showed, but only for the mainpage).
I am getting a lot of pain with a small issue. My application https://mokapen.com is SSL certified and I added all open graph code:
<meta property="og:title" content="this is my title" />
<meta property="og:description" content="this is my description" />
<meta property="og:url" content="https://mokapen.com/" />
<meta property="og:image" content="https://mokapen.com/image/cover-open-graph.jpg" />
But the strange behavior is that in Facebook the https://mokapen.com/it is showing error title "Redirecting to https://mokapen.com" and no image.
Do you think is an issue of Laravel Localization or htaccess?
Many thanks of any help!!
Your url has static value. Change url value with current url value
<meta property="og:url" content="{{ url()->full() }}" />
Ps: different laravel version has different url helpers
I set the facebook opengraph tags in my website to display images on facebook when typing my website's url.
The images only display when typing the www.mywebsite.com , how do i display them when typing mywebsite.com like for times.com and many other websites
<meta name="twitter:card" value="summary">
<meta property="fb:app_id" content="766935150367487" />
<meta property="og:title" content="This is your car" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://carhub.fun" />
<meta property="og:image" content="http://carhub.fun/images/car15.jpg" />
<meta property="og:description" content="Liked it? Click Here for More Info."/>
<meta property="og:site_name" content="carhub.fun - Which one are you?"/>
Actual result: My website's image thumbnail displays when typing www.mywebsite.com,
Expected result: to display the image when only typing mywebsite.com like many other famous websites like times.com
I've been looking around for a solution to the problem I'm having, but it seems that none of the solutions on SO address my issue.
I was having the dreaded issue where the a href tag in my HTML does not actually take me to the link. At first, I tried removing the JavaScript includes, wondering if something in the JavaScript portion was messing up the page.
Then I removed the CSS portion as well, and ultimately removed everything until the page consisted of simply the header information for the HTML page and only the a href tag. I also changed the link to a non-existent page (to force a 404 error).
When clicking on the link, it keeps me on the current page and doesn't take me to the referenced page (or even give me a 404 error). Following is the stripped out code (everything but the commented out portion):
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<a href="test.html">Support</a/>
</html>
Thanks for the help.
I made the changes based on the answers given but still see the same behavior. As seen in the screenshot (sorry SO doesn't let me insert images), the URL shows /test.html but the page is still the main page. I changed the text of the link to ensure that the changes were applied.
I'm using rackup to quickly view the changes locally.
Screenshot
Updated code:
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support2
</body>
</html>
Working and tested:
NOTE: Both files [ current one and test.html ] are in same directory.
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>test</title>
<meta name="description" content="test1" />
<meta name="keywords" content="test2" />
</head>
<body>
Support
</body>
</html>
Also test code is working fine using target="_blank" in anchor tag , which open link in new page if working fine, like below:
<a href="test.html" target="_blank" > support </a>
You have an extra slash in your closing a tag.
Should be
</a>.
I would also make sure they are in the same directory.
Apparently the answer was here:
How to setup URLs for static site with Ruby Rack on Heroku
Individual pages were being routed to "/" all the time. Needed to modify "config.ru" to get routing to work properly.
Next step is to look into "sinatra".
When I want to share a site on facebook and want to add a custom image it doesn't work. It always gives the same image (one that is somewhere on the web page).
This is the code I've used:
<html>
<head>
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.the-website.com" />
<meta property="og:image" content="http://url-to-image.com" />
<meta property="og:site_name" content="The content" />
</head>
<body>
<h1> Facebook Like </h1>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.the-website.com%2F&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</body>
</html>
If you try running the page through Facebook linter - http://developers.facebook.com/tools/lint/ - it may show up some issue.
Did you read it ? http://developers.facebook.com/docs/reference/plugins/like/
There is a "code generator" which would do all coding for you. Try it, then copy&paste the code...
As for your code:
- in this case - to have a like on a page - there is no meta needed (your example's meta are not needed).
- you have probably something wrong inside src tag: my guess is to REMOVE the "font&" part, but this might be wrong...
In any case... just use the link I provided...
I had the same problem. What I did was, I just removed the entire line " <meta property="og:image" content="xxxxxxx" /> " . This will push the facebook crawler to scan for every images in the page. Now place the image you want to add somewhere in the page with width=1 and height=1. Users won't recognise this in your page. But this image will be scanned by the crawler and you can select it to show it on our page. This worked for me. I don't know whether it will work for you or not.
NB: This is just a workaround, not a good solution