I want to add a Twitter button on my website to share content, as well as a Twitter card. I've already added the meta tags.
Here is the code for my share button:
Tweet
This is the code for the meta tags I've added as well:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="#nytimes">
<meta name="twitter:creator" content="#SarahMaslinNir">
<meta name="twitter:title" content="When Great Minds Don’t Think Alike">
<meta name="twitter:description" content="How much does culture influence creative thinking?">
<meta name="twitter:image" content="http://176.32.230.11/trialandtest.com/assets/images/profile-img.jpg">
Here is the link to my site:
http://176.32.230.11/trialandtest.com/
I'd be grateful if someone could assist me as to where I am going wrong, because I have my URL whitelisted on Twitter, but when I try to share something it does not share the content on the preview window and shares the old one.
Your share url should be dynamic. I think when you click on the share button it is taking your static url ie. http://176.32.230.11/trialandtest.com
Related
Until today I did not know how to show an image when sharink a link on whatsapp.
I have this site:
https://vivepuravida.com/propiedad/casa-escazu-41-apartamento-115k/
You can check I have this on the head tag:
<meta property="og:url" content="https://vivepuravida.com/propiedad/casa-escazu-41-apartamento-115k/">
<meta property="og:type" content="website">
<meta property="og:title" content="Testing sharing">
<meta property="og:image" itemprop="image" content="https://image.wasi.co/eyJidWNrZXQiOiJzdGF0aWN3Iiwia2V5IjoiaW5tdWVibGVzXC9ncjgwMjkyMDIxMDEwNjExNDgxNS5qcGciLCJlZGl0cyI6eyJub3JtYWxpc2UiOnRydWUsInJvdGF0ZSI6MCwicmVzaXplIjp7IndpZHRoIjo5NzksImhlaWdodCI6NzQzLCJmaXQiOiJjb250YWluIiwiYmFja2dyb3VuZCI6eyJyIjoyNTUsImciOjI1NSwiYiI6MjU1LCJhbHBoYSI6MX19fX0=">
As you can see the og:image is set with another picture took from another site.
But when sharing my website on whatsapp, it only displays my website icon.
Can anyone help me?
Thanks!
Try resizing the image to 400×400 and convert to .png or .jpg formats.
I don't know where to start with this, my default link preview for my site looks like this:
I don't know why it's displaying bootstrap and not what is in my site. This is the page I am trying to share:
so I was expecting that the link would have the image and the title(blacked out).
But on the good side, when you click on the bootstrap link, it will redirect to my page and not to bootstrap but still what I cannot get is why is it displaying bootstrap and not what is on the page? Where can I change it?
Thanks for the help.
Your problem is this line in your <head>:
<link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/blog/">
This tells bots, web crawlers, and generally everyone that this page is exactly the same as https://getbootstrap.com/docs/4.0/examples/blog/. It even goes a step further and indicates that this is the proper URL for your page.
Most automated systems will stop parsing your page after seeing a <link rel="canonical"> tag and instead parse the linked page as though it was the current one. This is where Facebook et al. are getting the Bootstrap metadata from.
TL;DR: Remove this line.
For future reference, you can use Facebook’s Sharing Debugger to troubleshoot problems like this. For the given URL, this is the current result:
Note the Canonical URL and Redirect Path fields, which indicate my above diagnosis.
You need to use something like react-helmet or react-meta-tags to set your <head> data correctly. The data you are looking to set would be openGraph data which can be found here.
Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<title>IMDB</title>
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />
Example from https://ogp.me/
You can also use the ogtag.me API that allows you to shorten your links dynamically and send the data you want it to display on social platforms and then use this shorten links in your share buttons.
I am developing an HTML5 game for the Facebook platform. I am using Facebook's Web Hosting product to host the game and I have created a test version of the app to see if it works properly on Facebook.
Despite having added the open graph meta tags to the games HTML code, when I test the game and try to share it using the share dialog, all the information in the meta tags is ignored. The title, the description, the image, none of them are used.
I have used Facebook's share debugger, but it claims none of the meta tags are set. The documentation is not really helpful in this specific case.
These are my open graph tags:
<meta property="og:url" content="http://apps.facebook.com/kanji-climber/" />
<meta property="og:title" content="Kanji Climber" />
<meta property="og:description" content="Test your kanji knowledge! How high can you climb?" />
<meta property="og:type" content="game">
<meta property="fb:app_id" content="172026516880138" />
This is the function call I use for sharing:
FB.ui({
method: 'share',
href: 'https://apps.facebook.com/kanjiclimber',
}, function(response){});
Am I missing something?
Facebook development newbie.
I have added the meta tags to the html file which I want to share to Facebook.
like:
<meta property="og:type" content="article"/>
<meta property="og:title" content="title"/>
<meta property="og:description" content="description"/>
<meta property="fb:app_id" content="23232323323232"/>
<meta property="og:image" content="https://fajfladjfaljafl.jpg/>
I want to make the image thumbnail in Facebook profile different for different people. For example, people can do a small test here then share the result to Facebook, the image thumbnail should be the test result of that person. So how can I do this.
Now I am thinking to generate a new webpage within specific meta property for that person every time. But this's so dump!
Can I change <meta property="og:image" content="https://fajfladjfaljafl.jpg/> automatically when people share it to Facebook? or any other ideas?
Thank you very much!!
Hi everyone:
I am doing this via feed dialog. As what #Mosh Feu and #CBroe said, it doesn't make sense to change meta data.
I am using feed share link
https://www.facebook.com/dialog/feed?app_id=APP_ID&link=URL&picture=THUMBNAIL_URL&name=NAME&description=DESCRIPTION&caption=CAPTION&redirect_uri=REDIRECT_URI
to define the parameters every time.
my app is a chrome extension
I have a content-script injected to Facebook share pop-up.
I successfully manage to add text to the input via DOM manipulation,
but when I click share, it clears the input and then share the link.. any idea why?
Best practice for FB share is via Open Graph, http://ogp.me/
<!-- Facebook Open Graph Meta Tags -->
<meta property="og:title" content="OG title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://domain.com" />
<meta property="og:image" content="http://domain.com/fb-image.png" />
<meta property="og:description" content="OG description" />
You can also try FB sharer, but keep in mind that it's deprecated and not advised to use.
fb share