I am developing OG module in my app. Below is URL which is working fine with twitter and whasapp however showing issue with facebook.
http://nvie.in/portal/gyany/product/145
This is what facebook crawler see in my page-
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<link rel="canonical" href="http://nvie.in/crawler-products-page.jsp">
</head>
<body>
</body>
</html>
This is my code
<%#page pageEncoding="UTF-8"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%# taglib uri = "http://java.sun.com/jsp/jstl/functions" prefix = "fn" %>
<%# page import="org.jsoup.*" %>
<!doctype html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<%
String appVersion= "1";
String portalId= request.getAttribute("portalId").toString();
String requestProtocol=request.getScheme();
String requestDomain=request.getServerName();
String requestPort=Integer.toString(request.getServerPort());
String requestBasePath = requestProtocol+"://"+requestDomain+":"+requestPort;
%>
<head>
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website" />
<link rel="canonical" href="<%=(request.getRequestURL().toString())%>">
<sql:query dataSource="jdbc/localMysql" var="result">
--- Query to fetch portal details---= '<%=portalId %>';
</sql:query>
<c:forEach var="row" items="${result.rows}">
<meta property="og:url" content="<%=(request.getRequestURL().toString())%>" />
<meta name= "twitter:card" content="summary" />
<meta name= "twitter:site" content="#####" />
<meta property="og:title" content='<c:out value=" ${row.portal_name} "/>' />
<meta property="og:description" content='<c:out value=" ${Jsoup.parse(row.portal_tagline).text()} "/>' />
<c:if test="${not empty row.file_url}">
<meta property="og:image" content='<%=requestBasePath%>/####/<c:out value="${fn:trim(row.file_url)}"/>' />
<meta name= "twitter:card" content="summary_large_image" />
</c:if>
</c:forEach>
</head>
<body>
</body>
</html>
Related
In Bootstrap I would to create a form with a pattern mandatory validation for the addresses, where the value must be:
"Free input text" + "5 numeric characters" (mandatory)
Example:
Rome - 65498
How to do that?
Demo:
https://jsfiddle.net/Lxv4f7qe/2/
Code:
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<form class="p-5" action="POST">
<label for="zip_code">Optional Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} ?- ?\d{5})?" title="Zip code"><br><br>
<label for="zip_code">Required Spaces:</label>
<input type="tel" id="zip_code" name="zip_code" pattern="([A-Za-z]{4,60} - \d{5})?" title="Zip code"><br><br>
<input type="submit">
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Here is a helpful link on the pattern matching html input attribute: https://webdesign.tutsplus.com/tutorials/html5-form-validation-with-the-pattern-attribute--cms-25145
hope you all are well, i need your help as i am facing an issue on my wordpress website when i post my website url on my facebook page it show an random image which i don't want
In this image you easily understand which issue i am talking about, i want logo of website to be shown in place of space image, Please anyone helpme out of it , Thank you in advance
You need to put open graph tags in your header.php. I usually use this combination:
<?php
$theme = wp_get_theme();
$screenshot_url = esc_url( $theme->get_screenshot() );
if ( is_home() ): ?>
<meta property="og:url" content="<?php echo get_home_url(''); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo get_bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo get_bloginfo('description'); ?>" />
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php elseif( is_category() ):
$cat_id = get_query_var('cat');
$cat_name = get_cat_name($cat_id);
$cat_desc = (category_description( $cat_id ) != '') ? category_description( $cat_id ) : get_bloginfo('description');
?>
<meta property="og:url" content="<?php echo get_category_link($cat_id); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo $cat_name; ?>" />
<meta property="og:description" content="<?php echo $cat_desc; ?>" />
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php else: ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:type" content="website" />
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<?php if(has_post_thumbnail()):
$url = wp_get_attachment_url( get_post_thumbnail_id() );
?>
<meta property="og:image" content="<?php echo $url; ?>" />
<?php else: ?>
<meta property="og:image" content="<?php echo $screenshot_url; ?>" />
<?php endif; ?>
<?php endif; ?>
I put separate OG tags for home, category and other pages, with a fallback to theme image (this prevents random image being selected).
Hope this helps.
You can use this Plugin to fix your issues https://wordpress.org/plugins/facebook-thumb-fixer/ or you can follow this http://www.wpbeginner.com/wp-tutorials/how-to-fix-facebook-incorrect-thumbnail-issue-in-wordpress/
If you not get any solutions, let me know. Thanks
Try putting OpenGraph image tag like so
<meta property="og:image" content="link to your logo" />
Try this:
<meta property="og:image" content="<?php the_post_thumbnail(); ?>" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:description" content="<?php the_content(); ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_US" />
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="article:published_time" content="<?php echo get_the_time(); ?>" />
<meta property="article:modified_time" content="<?php the_modified_date(); ?>" />
<meta property="article:author" content="<?php the_author(); ?>" />
<meta property="article:section" content="Featured" />
<meta property="article:tag" content="<?php the_tags(); ?>" />
http://happybloggerplaza.com/how-to-fix-thumbnail-image-facebook/
https://wordpress.org/plugins/facebook-thumb-fixer/other_notes/
I tried to use this .fb-social-plugin.fb-like-box.fb_iframe_widget._4s7c this but it didn’t work. Can people help me?
I don't know if it’s possible.
I think have some CSS trick, but I don't know how it works.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
<body>
<style>
.facebook-like-box
{
width: 250px;
height: 250px;
overflow: hidden;
position: relative; /* For IE7 Compatibility */
}
.facebook-like-box .inner
{
margin: -2px 0 0 -2px;
}
.fb-social-plugin.fb-like-box.fb_iframe_widget._4s7c{border: none !important;}
</style>
<div class="facebook-like-box">
<div class="inner">
<!-- Facebook Plugin Code --->
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:like-box href="https://www.facebook.com/bolaooss"
width="250" height="250"
colorscheme="light" show_faces="true"
stream="false" header="false"></fb:like-box>
<!-- End Facebook Plugin Code -->
</div>
</div>
<fb:like-box href="https://www.facebook.com/bolaooss"
width="254" height="254"
colorscheme="light" show_faces="true"
stream="false" header="false">
</body>
</html>
You just add tag show_border="false"
<fb:like-box href="https://www.facebook.com/bolaooss"
width="254" height="254"
colorscheme="light" show_faces="true"
stream="false" header="false" show_border="false">
I just downloaded PhoneGap to try it. I made an XCode Project and it's working alright. Then, I wanted to try some jQuery Mobile on it, so added this to the default Hello World Page of Cordoba:
I added, to the head:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
And then on the body:
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
I thought it would go fine, but look how it comes out:
Here's all the code in case you want to take a look at it. Am I doing something wrong?
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div>
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body> </html>
I was missing the
<div data-role="content">
wrapping the list. That was all.
Here's all the code in case it's useful for someone:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Apache Cordova</h1>
</div>
<div>
<h1>Some text</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-filter="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
</ul>
</div>
</div>
<script type="text/javascript" src="cordova-2.7.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
I put a like button on my own website and when I click, my website is added to facebook as news feeds displaying that I likes a website, but it is no added to my profile Likes: Here the code:
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es" xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
meta properties:
<head>
<meta property="og:title" content="Puerto Deseado Turismo" />
<meta property="og:description" content="Puerto Deseado Turismo: Agencia de viajes y turismo nacional e internacional. Contamos con transportacion propia con unidades 2012" />
<meta property="og:url" content="http://www.puertodeseadoevyt.com.ar/index.html" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.puertodeseadoevyt.com.ar/images/logo-pd-facebook.jpg" />
<meta property="og:image:width" content="200" />
<meta property="og:site_name" content="Puerto Deseado Turismo" />
</head>
and the iframe:
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.puertodeseadoevyt.com.ar&send=false&layout=button_count&width=100&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
What is missing?