open graph image is loading properly for some pages but not others - facebook-opengraph

This is the open graph image I want to load on all my pages shared on Facebook. It is loading properly on some pages and on others it is choosing a random image from the page. Below is the OG URL. I am using Drupal CMS for my site. All the proper code seems in place.
http://www.vaeducationoxnard.com/sites/default/files/styles/square_thumbnail/public/Charter%20Square%20Logo.png

This is because, facebook sends the whole new request to the url you are passing and because of this it gets the image from og:image in which you have passed the default image. To overcome this, try to aadd the image parameter in the url you are passing
Ex. your/url?imgToShare=
And in the main page from where you set the meta tags, add one condition
<?php
if(isset($_REQUEST['imgToShare'])
{
<set the meta tags for image you want>
}
else
{
<meta tag with the default image>
}
?>
This helped me.
Please comment if you have any doubts.

Related

Can I pass URL parameter values into webpage code to make the page display differently based on the URL Parameters? I.E. Embeded Google Drive Iframes?

I am but a human and I would like to pass URL parameters into a page's iFrame code to get a different Google Drive iFrame to show to different customers. The idea is that we will have just one page but different to the people who view them. Is that possible?
Like in the code:
<iframe src="https://drive.google.com/embeddedfolderview?(THIS BECOMES A DRIVE ID CUSTOM FIELD)#grid" style="width:100%; height:600px; border:0;"></iframe>
We want to deliver this link via email so when the user clicks the button it takes them to the page and loads the iframe with their folders on google drive in them.
the link on the email will be like:
https://customcreations.com/dashboard?driveID=(GOOGLE DRIVE ID TO POPULATE THE CUSTOM FIELD)
I am new sorry if this is not clear please let me know so I can clarify.
I tried having the id inside like a form that auto populates the iframe but it is breaking. I am really hoping this is possible.
Thank you to anyone who can help this mortal.
How about some php:
<?php
$drive_id = htmlspecialchars($_GET["driveID"]);
if (isset($drive_id)) {
// echo start <iframe> code here...
echo 'https://customcreations.com/dashboard?driveID=' , $drive_id;
// echo rest of <iframe> code here...
} else {
echo 'Invalid ID';
}
?>

how to add brand name with image at facebook page share content

Sometimes we see some page post on my timeline, where website shareing link conatin a image, below part of image attach with a page brand name (i have atatch a image example below.). if you click on link you will go to the website page and you will not see the brand name with image. I think somehow this brand name added later by coding or other system. I am confirm, content uploader does not attach this brand name with image, it happen automaticaly.
there anyone please tell me the system nmae and how to do it? at word press how can do that? have any plugin or code? thanks in advance.
You have to add the meta property inside the header area of ​​your site. Please check below article to know more.
For Facebook
For Twitter
You can add meta properties like this.
add_action('wp_head','add_meta_tags');
function add_meta_tags() {
global $post;
echo '<meta property="og:title" content="'.$post->post_title.'" />';
// So on....
}

Custom 404 Basic Page in Drupal 7 Has Blank Title Tag

I have created a basic page in drupal 7 to use as my 404. I configured under Configuration -> System -> Site Information to use this page and when an unknown URL is entered, it does indeed display this page while maintaining the unknown URL. For SEO purposes, I really want Page Not Found in the html title tags but it is missing. If you go directly to the basic page, the title tags are correct. Is there a setting somewhere that I am missing?
I used the metatag module's configuration for the 404 page to achieve the desired title tags
When you create a any page, you will get node id of the respective page.
In your case, you need to copy page.tpl.php file and rename new file with your node id like for example : page--node--1.tpl.php
Now, put below code in your newly created template file and clear the cache.
if($title) {
print $title;
}

Diazo - on error show message (when you get the content from a page)

Can we skip a diazo error and prevent page crash by replacing it with a nice message in page? Something like: Your content you want to show in this page is not created or published. Please check this section /source/homepage-content-sample-section.html.
<!-- Images slider section -->
<replace css:theme="[data-diazo='my-images-slider']"
href="homepage-content/homepage-images-slider" method="document"
css:content-children="#content-core" />
<drop css:content="#content-core [data-diazo='my-images-slider']" />
I have a page in Plone for each section in Homepage, that contains html code easy to edit. The problem is if a page is missing or private the homepage is broken.
Calling user-managed contents with href in a Diazo rule is like playing Russian roulette. If the page is not existing, there is not way to prevent the page crash.
The best approach is to call a developer-defined URL in charge of retrieving the content if it exists and that will just gently return nothing if the content does not exists.
Rapido is a very easy way to do that (you create a Rapido block which can be called like that: href="##rapido/myapp/blocks/get-content-for-my-homepage", this URL will always work, your page will never crash whatever the users have done with the content).

Facebook og:image tag could not be downloaded from Drupal website

I have a Drupal photography website. Images are important to me and no matter how hard I try, how hard I google, I couldn't get those images to work on Facebook Open Graph sharing.
I am using Drupal 7.14.
Users upload photos by using Plupload plugin.
Over-sized photos are automatically resized by Plupload resize function.
These photos are uploaded into a custom-directory. eg. sites/default/files/products/[user:id]/
The photos are thumbnailed and styled according to Drupal core styling. eg. sites/default/files/styles/large/
These photos are displayed in a overriden node page, which I have customized using Panels.
Drupal modules currently don't support Open Graph tags for Panels, so I created them myself using drupal_add_html_head.
// OG Image Tag
$node = node_load(%node:nid);
$user = $node->uid;
$filename = $node->field_product_photos['und'][0]['filename'];
$base_url = "http://www.[my-web-site].com/sites/default/files/styles/large/public/products";
$image_url = $base_url . "/" . $user . "/" . $filename;
// Thus $image_url outputs my full image url address. eg. http://www.[my-web-site].com/sites/default/files/styles/large/public/products/1/[IMAGE].JPG
$element = array (
'#tag' => 'meta',
'#attributes' => array(
'property' => 'og:image',
'content' => $image_url
),
);
require_once 'includes/common.inc';
drupal_add_html_head($element, 'og_image');
I use http://ogp.spypixel.com/Pogo/checker/index.php?url=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 to check my OG tags. og:title, og:image, og:url, og:description works like a charm with no problems.
However Facebook Debugger https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.feelsion.com%2Fproduct%2Fd700 returns only ONE problem. That is - Unable to download og:image: The image referenced by the url of og:image tag could not be downloaded.
I can confirm that ogp.spypixel.com/Pogo/checker/ could display my og:image and the image url is healthy.
I am using HTTP, so HTTPS bug for Facebook og:image is irrelevant.
I have ALT-txt for my images.
I have also included <link rel="image_src" href="[IMAGE_LINK]"into <HEAD>.
My image sizes fulfills Facebook's criteria. At least 200px for both dimensions and not more than 3:1 by proportion.
I have declared og:namespace in my page.tpl.php file.
xmlns:og="http://ogp.me/ns#
No matter how hard I Google and amend the codes and try new images. Facebook still never display my photos and returns the error as in note #9.
Image such as my website logo can be displayed in Facebook sharing. The only images not displaying is from the custom node page/panel.
I have tried to amend FTP permissions for the images but still failed.
I suspect that Plupload plugin is the culprit that the images it resize cannot be rendered by Facebook OG.
I also suspect that could be a case-sensitivity issues on the file name or on the extensions of the image.
I have worked more than 24 hours on this problem and hopes are fading. I am still hopeful that I can find my enlightenment on the problem here. Please do assist me if you know the solution or you are experiencing the same problem.
Thank you.
The problem above occurred because of a HTTP 500 Internal Server Error on the image.
The image appears well with internet browser but is inaccessible by search engine bots.
I have solved the problem by disabling Option FollowSymLinks in the .htaccess file in /public_html/sites/default/files/ folder.
To disable the option permanently, you have to erase the content of the .htaccess file while retaining the file itself in the folder.
Hope that helps, cheers.

Resources