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
Related
I'm trying to implement social share buttons in my SPA that's served over Azure CDN.
In order overcome the problem of bots not executing javascript on my page I'm redirecting these (via 302) to my express.js backend where I'm rendering and returning valid HTML with all the required og: META tags populated, all works just fine.
<head>
<meta property="og:title" content="${story?.headline}" />
<meta property="og:description" content="${introText}" />
<meta property="og:image" content="https://backend-example.com/${imageUrl}" />
<meta property="og:url" content="https://www.example.com/story/${story?.id}" />
</head>
The problem is, the og:url tag is ignored in the thumbnail rendered by social networds, and istead of:
"https://www.example.com/story/11"
it shows the URL of my backend:
"https://www.backend-example.com/story/11"
I'm wondering if there's a possible workaround for this so the thumbnail will show the SPA's URL instead of the backends?
Best,
vedtam
There is a function for every page in wordpress so if we share link in other websites then it fetches title, description and featured image of that page / post, but i wanna make this functionality in core php not in wordpress, how can i make it so when i share link to other website then it fetches only that one featured image ? without featured image functionality it fetches only logo.
please could you help me?
If I understand correctly, all you need to do is add OpenGraph on your PHP/HTML header.
<meta property="og:title" content="Your desired title" />
<meta property="og:description" content="Some sentences here" />
<meta property="og:url" content="https://www.yourdomain.com/filename.php" />
<meta property="og:site_name" content="rumahweb.com" />
<meta property="og:image" content="https://www.yourdomain.com/featured-image.png" />
Insert above code (and adjust the value as necessary) inside your HEAD section of your HTML/PHP file.
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?
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
I am using Open Graph for image sharing but it picks up the wrong image that I’ve already deleted from the database. In the Inspect Element tab of Web Inspector, it shows the correct image path but it does not share the correct image.
PHP code:
<meta name="keywords" content="HTML, Meta Tags, Metadata" />
<meta name="description" content="Profile Share by user." />
<meta name="author" content="I" />
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="http://mydocs.com/">
<meta name="twitter:title" content="User profile">
<meta name="twitter:image" content="<?php echo $SITE_PATH.$meta_userimage;?>" />
<meta property="og:title"content="User profile" />
<meta property="og:image" content="<?php echo $SITE_PATH.$meta_userimage;>"/>
I’ve already referred to this link but it doesn’t help me.
When Facebook queries the open graph data for a page, it gets cached until you flush it or 24 hours are up.
If you visit this facebook debug page and try scraping the page; you will find an option to refresh the scrape by clicking the "Fetch new scrape information" button